The best way to use methods on your jBoxes is to save your jBox in a variable:
var myModal = new jBox('Modal'); myModal.setTitle('My Title'); myModal.setContent('My Content'); myModal.open();
All methods return the jBox instance so you can chain them:
var myModal = new jBox('Modal').setTitle('My Title').setContent('My Content').open();
Open and close |
|
| .open(options) | Opens the jBox. You can set a new target with the option target, e.g. {target: $('#newTarget')}. If your jBox has an opening delay, you can force it to open immediately with the option ignoreDelay, e.g. {ignoreDelay: true}. To set new AJAX content when opening the jBox, you can pass an AJAX object, e.g. {ajax: {url: 'URL'}} |
| .close(options) | Closes the jBox. If your jBox has a closing delay, you can force it to close immediately with the option ignoreDelay, e.g. {ignoreDelay: true} |
| .toggle(options) | Calls the method open when jBox is closed and close when it is open |
Dimensions |
|
| .setWidth(value) .setHeight(value) |
Sets the CSS width and height of the content container. Optional you can set a second argument to disable the automatic repositioning of jBox, e.g. .setWidth(200, true) |
Attaching jBox |
|
| .attach(jQuery selector) | Attaches your jBox to elements. Providing a jQuery selector is optional. If you don't tell this method which elements to use, it will use the selector defined in the options. This method should be called when elements, which should open or close a jBox, are being created in runtime |
| .detach(jQuery selector) | Removes the open and close function from elements |
Content |
|
| .setTitle(title) | Sets the title of your jBox. If there is no title yet, it will be created. jBox will reposition if dimensions change, to disable, pass true as second argument: .setTitle('myTitle', true) |
| .setContent(content) | Sets the content of your jBox. You can use jQuery elements to append elements (set CSS style display to none so the elements won't show up on your page). jBox will reposition if dimensions change, to disable, pass true as second argument: .setContent('myContent', true) |
| .ajax(options) | Reloads the AJAX request. You can pass the options url and data, e.g. {url: '/example.php', data: 'id=82'} or any jQuery ajax Option |
| .cancelAjax() | Cancels a running AJAX request |
Audio |
|
| .audio(url, volume) | Plays an audio file. Don't add the file extension, jBox will look for an .mp3 and an .ogg file |
Position |
|
| .position(options) | Recalculates your jBoxes position. You can set a new target with the option target, e.g. {target: $('#newTarget')} |
Animation |
|
| .animate(animation, options) | Animates for your jBox or any other element. You can use the animations 'tada', 'tadaSmall', 'flash', 'shake', 'pulseUp', 'pulseDown', 'popIn', 'popOut', 'fadeIn', 'fadeOut', 'slideUp', 'slideRight', 'slideLeft' and 'slideDown'. The animation method is independent from the option animation. By default this method will animate the jBox wrapper, to animate another element set the option element, e.g. {element: $('#animateMe')}. To execute a function when the animation is finished use the option complete, e.g. {complete: function () { $('#animateMe').remove(); }} |
Disable and enable |
|
| .disable() | Disables your jBox, you won't be able to open or close it until enabled |
| .enable() | Enables your jBox, so you can close and open it again |
Visibility |
|
| .hide() | Disables and hides the jBox |
| .show() | Enables and shows your jBox again |
Destroy jBox |
|
| .destroy() | Destroys your jBox and removes it from DOM |