Control.Notebook
Before proceeding you may want to read our getting started page.
What does this control do?
Lets the user view select between different contents within the same space in the page by using tabs.
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.
// Creating the notebook
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.