Author: | jenstornell |
---|---|
Views Total: | 3,615 views |
Official Page: | Go to website |
Last Update: | February 18, 2020 |
License: | MIT |
Preview:

Description:
Tabbis.js is a lightweight, pure JavaScript library for generating nice, clean, nested, fully accessible tabs interface from plain HTML structure.
How to use it:
Put the tabbis.js and tabbis.css into the webpage.
<link rel="stylesheet" href="tabbis.css" /> <script src="tabbis.js"></script>
Create a normal, flat tabs component:
<div data-tabs> <div>Tab1</div> <div data-active>Active Tab</div> <div>Tab3</div> </div> <div data-panes> <div>Pane1</div> <div>Pane2</div> <div>Pane3</div> </div>
If you want a complex tabs component which contains as many sub tabs.
<div data-tabs> <div>Tab1</div> <div>Tab2</div> <div>Tab3</div> </div> <div data-panes> <div>Pane1</div> <div> <div data-tabs> <div>Tab4</div> <div>Tab5</div> </div> <div data-panes> <div>Pane4</div> <div> <div data-tabs> <div>Tab6</div> <div>Tab7</div> </div> <div data-panes> <div>Pane6</div> <div>Pane7</div> </div> </div> </div> </div> <div>Pane3</div> </div>
Initialize the Tabbis and done.
tabbis();
Determine whether or not to remember the open/close state. Default: false.
tabbis({ memory: true });
Default CSS classes & attributes.
tabbis({ paneGroup: '[data-panes]', prefix: '', // CSS prefix tabActive: '[data-active]', tabGroup: '[data-tabs]' });
Enable/disable keyboard navigation. Defaults to true.
tabbis({ keyboardNavigation: true });
Set the initial tab index when no [data-active]. Defaults to 0 (tab 1).
tabbis({ tabActiveFallback: 0 });
You can also customize the trigger event as follows. Defaults to mouse click.
tabbis({ trigger: 'mousehover' });
Trigger an event when a tab is activated.
document.addEventListener("tabbis", e => { let data = e.detail; console.log(data.tab); console.log(data.pane); }, false );
Changelog:
v3.0 (02/18/2020)
- Feature: Support for old browsers (with Babel)
- Feature: Changed callback to custom event
- Feature: Keyboard navigation added
- Feature: Accessability support with aria attributes added
- CSS: Style for focus added on tab and pane
- HTML: Changed divs to buttons for better semantics
- Option: prefix added
- Option: keyboardNavigation added
- Option: tabActiveFallback added
- Enhancement: Now both data-active and aria-selected=”true” works to activate a tab
v2.0 (02/12/2020)
- Behaviour: Set active tab with a selector
- Behaviour: If no tab is active it will set to the first tab to active
- Behaviour: Tab memory is disabled by default
- Option:
memory
– Possible to disable withfalse
- Option:
activeData
– Selector fordata-active
- Nested options
- ES6 version, smaller and more readable code
- Even smaller tabbis function call
- Complete rewrite
02/08/2020
- JS updated
- Added minified JS