mBox Documentation
mBox.Core
id: '', |
The id of your mBox, defaults to mBox_1, mBox_2, mBox_3… |
|
Name of your mBoxes theme. |
|
Add additional classes to the wrapper, container, content, title or footer. To add a class only to the wrapper, provide a string, e.g. addClass: 'myClass'. |
|
Set specific styles to the wrapper, container, content, title or footer. To set styles only to the wrapper, provide a style object, e.g. setStyles: { color: 'red' }. |
|
The target element where your mBox will be positioned at. You can use an element id, element reference, the $(window) object or 'mouse' to stick the mBox to your pointer. |
|
The elements which will open / close the mBox. Use an element id, element reference or an elements class name. |
|
The event which will open / close the mBox. You can use 'click' or 'mousenter'. |
|
Prevents the default event to fire when clicking on an attached element. E.g. Prevents a link to follow the href, when the mBox is attached to a link. |
|
The width and height of the content area. |
|
The z-index of your mBox. |
|
The content of your mBox. You can use a string, an element id, an element reference or a class-name. Those elements will be grabbed by the mBox and their style display: none will be set to display: '' |
|
If the element, which opens your mBox, has the attribute data-setContent, this attributes value is the new content: data-setContent="New content" will set the content of your mBox to 'New content' data-setContent="elementID" will hide all elements in the content area, then inject and display the element with id="elementID" |
|
Adds a title to your mBox. You can use a string, an element id or an element reference. |
|
Adds a footer to your mBox. You can use a string, an element id or an element reference. |
|
Set to true, to make your mBox dragabble when clicking on title. |
|
Defines the position of your mBox in relation to the target element. x defnes the horizontal position, y the vertical. If you want to set the position outside or inside the target element you need to use an array: E.g. x: ['right', 'outside'] or y: ['top', 'inside'] Sometimes you need to tell the mBox which attribute to use (left or right, top or bottom). To do so use a third variable in your position array: E.g. x: ['left', 'inside', 'right'] or y: ['top', 'outside', 'bottom'] |
|
The horizontal or vertical offset to add or substract. |
|
The position of your mBox adjusts when scrolling or when you resize the window. |
|
If at least one of the positions is "outside", you can add a pointer to your mBox. To adjust the pointers position, use 'right', 'left', 'top', 'bottom' or 'center'. To add an offset you need to use a second variable in an array, e.g. ['left', 10]. |
|
Set to false to open / close the mBox instantly without fading. To disable fading altogether, you can also set fade: false |
|
The fade duration. You can also set fadeDuration: 200 to use this value for opening and closing. |
|
Set to true to add an overlay. |
|
Sets the color and opacity of your overlay. |
|
The overlays fade duration. |
|
Adds a transition when your mBox opens or closes. Following shortcuts are availible: 'flyin', 'flyout', 'flyinout', 'flyoutin', 'bounce', 'bouncefly' You can also define your own transitions: E.g. {open: {transition: 'bounce:in', property: 'top', duration: 400, difference_start: 50, difference_end: 0} |
|
Closes your mBox when pressing esc. |
|
Closes your mBox when clicking anywhere. |
|
Closes your mBox when clicking on the mBox itself. |
|
Closes your mBox when clicking on the wrapper (but won't close when clicking on any child) |
|
Closes your mBox when clicking anywhere except on the mBox itself. |
|
Closes your mBox when the mouse leaves the mBox area. |
|
Adds a close button into the title area if there is one. |
|
Delay opening your mBox in ms. |
|
Delay closing your mBox in ms. |
|
delayOpen will be ignored if your mBox isn't completely closed. |
|
When set to false your mBox will be constructed onOpen rather then when it's being initialised. Might add some performance when working with a lot of mBoxes. |
|
Open your mBox automatically once it's initialized. |
mBox.Modal
buttons: [ { title: 'My Button 1' }, { title: 'My Button 2', addClass: 'button', setStyles: { marginLeft: 20 }, event: function() { this.close(); }, id: 'my_button' } ] |
Adds buttons to your mBoxes footer. The option event will be evaluated when you click on the button, it defaults to this.close(). |
mBox.Notice
type: 'default', |
The type of your notice. You can use one of the following: 'ok', 'error', 'info' or 'notice' |
move: true, |
Set move to false if you don't want your notices to move into the window. |
moveDuration: 500 |
The transition duration when move is true |