tinytabs is a tiny (1.1 KB minified) tabbing plugin for jQuery. All you need is a few layers in a container layer, and bam, tabbed interface.
Kailash Nadh, October 2011
License: MIT License
Documentation and Demo: http://kailashnadh.name/code/tinytabs
Thanks to Sascha Depold's contributions
<head> <script type="text/javascript" src="lib/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="src/jquery.tinytabs.css"/> <script type="text/javascript" src="src/jquery.tinytabs.min.js"></script> </head>
<div id="mytabs"> <div class="section" id="music"> <h3 class="title">Music</h3> Content here </div> <div class="section" id="videos"> <h3 class="title">Videos</h3> Content </div> </div>
$(document).ready(function() {
$('#mytabs').tinytabs();
// or
$('#mytabs').tinytabs({ // optional options
anchor: false,
hide_title: false
});
});
| 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 |
| hide_title |
true (default) or false Hide the title element within section elements. |
| section_class | Section element's class. Default is section. |
| tabs_class | Tab (ul) container's class. Default is tabs. |
| tab_class | Individual tab's (li) class. Default is tab. |
| title_class | Title element's tag. Default is title. |
| before |
A function that gets evaluated before a tab is activated. Default is nothing. If a function is defined, the first parameter will be the tab (DOM-element), the second one is the title of the tab. |
| after |
A function that gets evaluated after a tab has been activated. Default is nothing. If a function is defined, the first parameter will be the tab (DOM-element), the second one is the title of the tab. |