tinytabs — Javascript lib for tabbed UIs
Example code
tinytabs is a tiny (~750 bytes minified+gzip) Javascript tabbing library. Zero dependencies. All you need is a few layers in a container layer, and bam, tabbed interface. If Javascript is not enabled, it degrades nicely too.
See the source code of this page for an example implementation
Options
| anchor |
true (default) or false If enabled, when a tab is clicked, it's id is set in url's hashtag so that the tab is retained on page reloads. Also enables linking to a tab directly. Eg: http://kailashnadh.name/tinytabs#tab-example |
| hideTitle |
true (default) or false Hide the title element within section elements. |
| sectionClass | Section element's class. Default is section. |
| tabsClass | Tab (ul) container's class. Default is tabs. |
| tabClass | Individual tab's (li) class. Default is tab. |
| titleClass | Title element's tag. Default is title. |
| onBefore |
function(id, tab). Callback function that gets evaluated before a tab is activated.
The first arg is the id of the tab and the second is the DOM element of the tab.
|
| onAfter |
function(id, tab). Callback function that gets evaluated after a tab is activated.
The first arg is the id of the tab and the second is the DOM element of the tab.
|
| onClose |
function(id). Callback function that gets evaluated while closing the tab.
The argument is the id of the tab.
|