kist-tabify v0.3.1
kist-tabify
Simple tabs and accordion interface.
Installation
npm install kist-tabify --save
bower install kist-tabify --saveAPI
$Element.tabify([options], [placement])
Returns: jQuery
Element is container for tabs and corresponding panes. If panes can’t be found inside element, plugin will search for them outside container, beginning with body element.
options
Type: Object|String
Options defined as Object
type
Type: String
Default: tab
Type of tabbing interface. It can be either tab or accordion.
initial
See placement.
multiSelect
Type: Boolean
Default: false
If it’s accordion interface, determines if multi tab selection is allowed.
tab
Type: String
Default: > ul > li > a, > ul > li > button
Selector used to collect all tab toggler elements.
pane
Type: String
Default: > div > div
Selector used to collect all tab pane elements.
changeURL
Type: Boolean
Default: false
If tab toggler elements are anchor elements, determines if URL should be update with href value.
select
Type: Function
Arguments: Tab, Pane
Event: tabifyselect
Callback to run on tab selection.
deselect
Type: Function
Arguments: Tab, Pane
Event: tabifydeselect
Callback to run on tab deselection.
create
Type: Function
Arguments: Tab, Pane
Event: tabifycreate
Callback to run on tab instance creation.
Options defined as String
Type: String
destroy
Destroy plugin instance.
next
Move to next tab element.
prev
Move to previous tab element.
move
Move to tab element determined by second argument. Second argument accepts values like options → initial.
placement
Type: Integer|String|Function|Boolean
Default: 1
Initial element to select.
If defined as:
| Type | Description |
|---|---|
Integer | Index of tab element to activate. |
String | Value of id attribute, data-tab-id attribute or href attribute value of tab element to activate. |
Function | Should return either index or string which correspond to integer and string values for this property. |
Boolean | If true, it will active first tab element, else it won’t activate anything. |
Examples
Default structure for tab interface.
<div class="Tab">
<ul class="Tab-items">
<li class="Tab-item"><a href="#tab1" class="Tab-toggler">Tab 1</a></li>
<li class="Tab-item"><a href="#tab2" class="Tab-toggler">Tab 2</a></li>
<li class="Tab-item"><a href="#tab3" class="Tab-toggler">Tab 3</a></li>
</ul>
<div class="Tab-panes">
<div class="Tab-pane Tab-pane--1" id="tab1">
<p>Pane 1</p>
</div>
<div class="Tab-pane Tab-pane--2" id="tab2">
<p>Pane 2</p>
</div>
<div class="Tab-pane Tab-pane--3" id="tab3">
<p>Pane 3</p>
</div>
</div>
</div>Setup tab instance.
$('.Tab').tabify({
type: 'tab',
initial: 1,
tab: '.Tab-toggler',
pane: '.Tab-pane',
namespace: 'Foobar',
select: function ( tab, pane ) {
// I’m selected!
},
deselect: function ( tab, pane ) {
// I’m deselected!
},
create: function ( tab, pane ) {
// I’m created!
}
});Move to next/previous tab.
$('.Tab').tabify('prev');
$('.Tab').tabify('next');Move to arbitrary tab.
$('.Tab').tabify('move', 1);
$('.Tab').tabify('move', 'foo');Destroy plugin instance.
$('.Tab').tabify('destroy');Browser support
Tested in IE8+ and all modern browsers.
License
MIT © Ivan Nikolić