演示地址：http://stephanwagner.me/jBox
github下载地址：http://github.com/StephanWagner/jBox/releases
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: 'http://ajaxresponse.com'}} |
| .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 value to disable the automatic repositioning of jBox, e.g. .setWidth(200, true) |
Attaching jBox | |
| .attach(elements) | Sets the open and close functions to elements. Providing the elements is optional. If you don't tell the method which elements to use, it will use the elements defined in the options. This method should be called when elements, which should open or close a jBox, are being created in runtime |
| .detach(elements) | 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 selectors 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 |
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')} |
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. This doesnt affect the overlay |
| .show() | Enables and shows your jBox again |
Destroy jBox | |
| .destroy() | Destroys your jBox and removes it from DOM |
有话要说