You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: Source/jBox.js
+23-24Lines changed: 23 additions & 24 deletions
Original file line number
Diff line number
Diff line change
@@ -25,10 +25,10 @@ function jBox(type, options) {
25
25
// Dimensions
26
26
width: 'auto',// The width of the content area, e.g. 'auto', 200, '80%'
27
27
height: 'auto',// The height of the content area
28
-
minWidth: null,// Minimum width
29
-
minHeight: null,// Minimum height
30
-
maxWidth: null,// Maximum width
31
-
maxHeight: null,// Minimum height
28
+
minWidth: null,// Minimal width
29
+
minHeight: null,// Minimal height
30
+
maxWidth: null,// Maximal width
31
+
maxHeight: null,// Maximal height
32
32
33
33
// Responsive dimensions
34
34
responsiveWidth: true,// Adjusts the width to fit the viewport
@@ -39,30 +39,30 @@ function jBox(type, options) {
39
39
// Attach
40
40
attach: null,// A jQuery selector to elements that will open and close your jBox, e.g. '.tooltip'
41
41
trigger: 'click',// The event to open or close your jBox, use 'click', 'touchclick' or 'mouseenter'
42
-
preventDefault: false,// Prevent default event when opening jBox, e.g. don't follow the href in a link when clicking on it
42
+
preventDefault: false,// Prevent the default event when opening jBox, e.g. don't follow the href in a link
43
43
44
44
// Content
45
45
title: null,// Adds a title to your jBox
46
-
content: null,// You can use HTML or an jQuery element, e.g. $('#jBox-content'). The elements will be appended to the content element and then made visible, so hide them with style="display: none" beforehand
46
+
content: null,// You can use HTML or a jQuery element, e.g. jQuery('#jBox-content'). The elements will be appended to the content element and then made visible, so hide them with style="display: none" beforehand
47
47
getTitle: null,// Get the title from an attribute when jBox opens, e.g. getTitle: 'data-title'
48
48
getContent: null,// Get the content from an attribute when jBox opens, e.g. getContent: 'data-content'. Use 'html' to get the attached elements HTML as content
49
-
isolateScroll: true,// Isolates scrolling to content container
49
+
isolateScroll: true,// Isolates scrolling to the content container
50
50
51
51
// AJAX
52
-
ajax: {// Setting an url will make an AJAX request when jBox opens. Optional you can add any jQuery AJAX option (http://api.jquery.com/jquery.ajax/)
53
-
url: null,// URL to send the AJAX request to
52
+
ajax: {// Setting an URL will make an AJAX request when jBox opens. Optional you can add any jQuery AJAX option (http://api.jquery.com/jquery.ajax/)
53
+
url: null,// The URL to send the AJAX request to
54
54
data: '',// Data to send with your AJAX request, e.g. {id: 82, limit: 10}
55
55
reload: false,// Resend the AJAX request when jBox opens. Use true to send the AJAX request only once for every attached element or 'strict' to resend every time jBox opens
56
-
getURL: 'data-url',// The attribute in the source element where the AJAX request will look for the url
56
+
getURL: 'data-url',// The attribute in the source element where the AJAX request will look for the URL, e.g. data-url="https://ajaxresponse.com"
57
57
getData: 'data-ajax',// The attribute in the source element where the AJAX request will look for the data, e.g. data-ajax="id=82&limit=10"
58
58
setContent: true,// Automatically set the response as new content when the AJAX request is finished
59
-
spinner: true,// Hides the current content and adds a spinner while loading, you can pass HTML content to add your own spinner, e.g. spinner: '<div class="mySpinner"></div>'
59
+
spinner: true,// Hides the current content and adds a spinner while loading. You can pass HTML content to add your own spinner, e.g. spinner: '<div class="mySpinner"></div>'
60
60
spinnerDelay: 300,// Milliseconds to wait until spinner appears
61
61
spinnerReposition: true// Repositions jBox when the spinner is added or removed
62
62
},
63
63
64
64
// Position
65
-
target: null,// The jQuery selector to the target element where jBox will be opened (if no element is provided, jBox will use the attached element as target)
65
+
target: null,// The jQuery selector to the target element where jBox will be opened. If no element is found, jBox will use the attached element as target
66
66
position: {
67
67
x: 'center',// Horizontal position, use a number, 'left', 'right' or 'center'
68
68
y: 'center'// Vertical position, use a number, 'top', 'bottom' or 'center'
@@ -82,42 +82,41 @@ function jBox(type, options) {
82
82
repositionOnContent: true,// Calculates new position when the content changes with .setContent() or .setTitle()
83
83
84
84
// Pointer
85
-
pointer: false,// Your pointer will always point towards the target element. A pointer will only be added when your jBox has one outside position, so the option outside should be 'x' or 'y' (not 'xy')
85
+
pointer: false,// Your pointer will always point towards the target element, so the option outside needs to be 'x' or 'y'. By default the pointer is centered, set a position to move it to any side. You can also add an offset, e.g. 'left:30' or 'center:-20'
86
86
pointTo: 'target',// Setting something else than 'target' will add a pointer even if there is no target element set or found. Use 'top', 'right', 'bottom' or 'left'
87
87
88
88
// Animations
89
89
fade: 180,// Fade duration in ms, set to 0 or false to disable
90
90
animation: null,// Animation when opening or closing, use 'pulse', 'zoomIn', 'zoomOut', 'move', 'slide', 'flip', 'tada' (CSS inspired from Daniel Edens Animate.css: http://daneden.me/animate)
91
-
transition: false,// Add transitioning to change position with a tween effect
92
91
93
92
// Appearance
94
93
theme: 'Default',// Set a jBox theme class
95
94
addClass: null,// Adds classes to the wrapper
96
-
overlay: false,// Adds an overlay to hide page content when jBox opens (set color and opacity with CSS)
97
-
zIndex: 10000,// Use a high zIndex
95
+
overlay: false,// Adds an overlay to hide page content when jBox opens (adjust color and opacity with CSS)
96
+
zIndex: 10000,// Use a high z-index
98
97
99
98
// Delays
100
-
delayOpen: 0,// Delay opening in ms (note that the delay will be ignored if your jBox didn't finish closing)
101
-
delayClose: 0,// Delay closing in ms (note that there is always a closing delay of at least 10ms to ensure jBox won't be closed when opening right away)
99
+
delayOpen: 0,// Delay opening in ms. Note that the delay will be ignored if your jBox didn't finish closing
100
+
delayClose: 0,// Delay closing in ms. Nnote that there is always a closing delay of at least 10ms to ensure jBox won't be closed when opening right away
102
101
103
102
// Closing
104
103
closeOnEsc: false,// Close jBox when pressing [esc] key
105
104
closeOnClick: false,// Close jBox with mouseclick. Use true (click anywhere), 'box' (click on jBox itself), 'overlay' (click on the overlay), 'body' (click anywhere but jBox)
106
105
closeOnMouseleave: false,// Close jBox when the mouse leaves the jBox area or the area of the attached element
107
-
closeButton: false,// Adds a close button to your jBox. Use 'title', 'box', 'overlay' or true (true will add the button to overlay, title or box, in that order if any of those elements can be found)
106
+
closeButton: false,// Adds a close button to your jBox. Use 'title', 'box', 'overlay' or true (true will add the button to the overlay, title or the jBox itself, in that order if any of those elements can be found)
108
107
109
108
// Other options
110
-
appendTo: jQuery('body'),// The element your jBox will be appended to. Any other element than the body is only useful for fixed positions or when position values are numbers
111
-
createOnInit: false,// Create jBox when it's being initialized
112
-
blockScroll: false,// When jBox is open, block scrolling
109
+
appendTo: jQuery('body'),// The element your jBox will be appended to. Any other element than jQuery('body') is only useful for fixed positions or when position values are numbers
110
+
createOnInit: false,// Creates jBox and makes it available in DOM when it's being initialized, otherwise it will be created when it opens for the first time
111
+
blockScroll: false,// Blocks scrolling when jBox is open
113
112
draggable: false,// Make your jBox draggable (use 'true', 'title' or provide an element as handle) (inspired from Chris Coyiers CSS-Tricks http://css-tricks.com/snippets/jquery/draggable-without-jquery-ui/)
114
113
dragOver: true,// When you have multiple draggable jBoxes, the one you select will always move over the other ones
115
114
autoClose: false,// Time in ms when jBox will close automatically after it was opened
116
115
117
116
// Audio // You can use the integrated audio function whenever you'd like to play an audio file, e.g. onInit: function () { this.audio('url_to_audio_file_without_file_extension', 75); }
118
117
preloadAudio: true,// Preloads the audio files set in option audio. You can also preload other audio files, e.g. ['src_to_file.mp3', 'src_to_file.ogg']
119
-
audio: null,// The URL to an audio file to play when jBox opens. Set the URL without file extension, jBox will look for an .mp3 and .ogg file. To play audio when jBox closes, use an object, e.g. audio: {open: 'src_to_audio1', close: 'src_to_audio2'}
120
-
volume: 100,// The volume in percent. To have different volumes for opening and closeing audio, use an object, e.g. volume: {open: 75, close: 100}
118
+
audio: null,// The URL to an audio file to play when jBox opens. Set the URL without file extension, jBox will look for an .mp3 and .ogg file. To play audio when jBox closes, use an object, e.g. {open: 'src_to_audio1', close: 'src_to_audio2'}
119
+
volume: 100,// The volume in percent. To have different volumes for opening and closeing, use an object, e.g. {open: 75, close: 100}
121
120
122
121
// Events // Note that you can use 'this' in all event functions, it refers to your jBox object (e.g. onInit: function () { this.open(); })
confirmButton: 'Submit',// Text for the submit button
20
20
cancelButton: 'Cancel',// Text for the cancel button
21
-
confirm: null,// Function to execute when clicking the submit button. By default jBox will use the onclick or the href attribute in that order if found
21
+
confirm: null,// Function to execute when clicking the submit button. By default jBox will use the onclick or href attribute in that order if found
22
22
cancel: null,// Function to execute when clicking the cancel button
23
23
closeOnConfirm: true,// Close jBox when the user clicks the confirm button
0 commit comments