How to use it
In order to use this control, paste this line of javascript right
at the beginning of your script tag:
This control can be used with any form element, the only thing you need to
do is to attach a special function to the form's onsubmit attribute.
You may then by able to invoke the Notebook and add some pages this way:
var nb = new Notebook(
// ELEMENT
// The Notebook will be nested inside this element.
// You may use an element's id or an HTML element's reference here.
'div_id',
{
// OPTIONS
}
);
// Adding a page loaded via AJAX
nb.addPage(
{
'id': 'first_tab_id',
'title': 'Title of the tab #1'
},
{
'url': '/ajax/resource/1'
}
);
// Static text
nb.addPage(
{
'id': 'second_tab_id',
'title': 'Title of the tab #2'
},
'Tab\'s content'
);
// Standard HTML
nb.addPage(
{
'id': 'third_tab_id',
'title': 'Title of the tab #3'
},
Widget.fromHTML('<b>Tab\'s</b> content')
);
// An existing object
nb.addPage(
{
'id': 'fourth_tab_id',
'title': 'Title of the tab #4'
},
$('object_id')
);
// Or even an external website
nb.addPage(
{
'id': 'fifth_tab_id',
'title': 'Title of the tab #5'
},
'http://astrata.com.mx'
);
Options
forceUpdate: boolean
If the page is an AJAX resource and this option is set to true, the content will be refreshed everytime it's tab is selected.selectEvent: string
The event that needs to be performed on the tab to consider it selected, the default event is mouseup.allowBookmark: boolean
false by default. It defines wheter the user is able bookmark the tab or not. This is done by adding the tab's id at the URL everytime a tab is selected.preloadContent: boolean
If true, the contents of all notebook's pages will be loaded when the page starts, not when the user selects them.removePageContent: boolean
If true, the contents of the page will be removed from the document's body while not selected.confirmClose: boolean
If true, a confirmation dialog will be shown when the user tries to close a notebook page.Methods
addPage({'id': string, 'title': string}, element, { options })
Adds a new page to the notebook, it will be identified internally in all the other methods by the given id that must not overlap with an existent one.Method options
- allowClose If true, it lets the user close the tab.
- onClose Expects a callback that will be called after the user closes the tab.
- onSelect Expects a callback that will be called after the user select the tab.