-
Notifications
You must be signed in to change notification settings - Fork 1
Basic Usage
Ethan Finley edited this page Dec 31, 2020
·
11 revisions
After installing the library, you now can learn how to use it.
- After including the script in your page, you can create an iBox object like every other JavaScript class:
var MyiBoxObject = new ibox();- you can use the MyiBoxObject to modify the modal with the following functions
every function can be called like this:
MyiBoxObject.function_name(optional, parameters);| name | parameters | description |
|---|---|---|
| create | -- | (re)creates the DOM structure |
| remove | -- | removes the DOM structure. All attached events get removed too! |
| close | -- | closes the iBox (alias of display(false)) |
| hide | -- | alias of close()
|
| allow_close | bool state - if closing should be allowed | controls if the iBox can be closed (by the user and the internal functions) |
| open | -- | opens the iBox (alias of display(true)) |
| show | -- | alias of open()
|
| display | bool state - if the iBox should be opened or closed | opens/shows or closes/hides the iBox |
| event_add | string event_name - the event name on which the callback should be executed function callback - the function which should get executed when the event is fired. As the first parameter, the event object is passed, property detail is the ibox instance. |
listens for a custom iBox event, executes the callback function if event is fired |
| content_set | string text - the content which gets inserted | inserts the text into the iBox body, <script> tags get executed on insertion |
| content_append | string text - the content which gets appended | appends text on the iBox body, <script> tags get executed on insertion |
| content_get | -- | returns the current body content as a string |
| content_clear | -- | removes all content from the iBox body |
| content_display | bool state - whether the content should be shown or hidden | hides or shows the content and the loading bar (if content is hidden, loading bar is shown) |
| content_show | -- | hides the loading bar and showes the content (alias for content_display(true)) |
| content_hide | -- | shows the loading bar and hides the content (alias for content_display(false)) |
| content_asnyc_set | string url - the url where the content should be fetched from | hides the content, fetches text from the url, displays the content, , <script> tags get executed on insertion |
| content_async_append | string url - the url where the content should be fetched from | hides the content, fetches text from the url, appends the content, , <script> tags get executed on insertion |
| get_instance | string id - the id from the iBox DOM (can be found in the data-id attribute of the iBox frame) | returns an iBox instance (like MyiBoxObject) when an ID is given, the DOM has to be created beforehand |
| get_dom | -- | returns the iBox DOM of this specific iBox |
The following events get fired in the lifetime of the iBox modal:
- open - when the iBox starts to open
- close - when the iBox starts to close
- content_asnyc_loading - before async content starts to get fetched
- content_asnyc_loaded - after async content got inserted into the iBox body
- destroy - before the iBox DOM gets removed
- created - after the iBox DOM is created
- content_show - before content gets shown
- content_hide - before content gets hidden
- close_failed - when closing is disabled and user or library tries to close the modal
- If the first content child has the class
ibox-head-img, it will be styled as a full-width head banner.