Boost JS Tabs
A style-free tabs plugin for jQuery and Boost JS. While other plugins style and arrange your tabs and panels for you, this plugin only handles the functionality, leaving the layout and styling up to you.
Installation
Install with npm:
npm install boost-js-tabs
Install in browser:
Usage
Create Plugin
var boost = ;// var boost = $.fn.boost; (browser install) var tabs = ;// var tabs = $.fn.boost.tabs; (browser install) $fntabs = ;
Markup Structure
Tab 1 Tab 2 Tab 3Panel 1Panel 2Panel 3
Note: data-bind
is used to link the element to the instance, data-role
is used to define the element's role in that instance. See Boost JS for more details.
Instantiate Plugin
;
Options
Name | Default | Description |
---|---|---|
activeClass | "is-active" |
the class added to tab and panel when active |
onInit | null |
a callback function called when plugin is intialized |
onChange | null |
a callback function called when tabs switch |
Usage
;
- or -
...
API
changeToPanel( 'panelID', callback )
Activate a tab by providing the desired panel's id. Optional callback
function called after change.
instance;
activePanel
The id of the current active panel.
instance.activePanel // [panelID]
pairsByPanel
Each panel and corresponding tab grouped into a jquery object and organized by panel id.
instance.pairsByPanel // { panel1: $( 0:tab1, 1:panel1 ), ... }
Running Tests
$ npm install && npm test
License
Copyright © 2016, Mark McCann. Released under the MIT license.