tinytabs
v2.0.0
Published
A super tiny Javascript library for rendering tabbed UIs.
Downloads
6
Readme
tinytabs
tinytabs is a tiny (1.3 KB minified) 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.
Documentation and Demo: https://nadh.in/code/tinytabs
Example
HTML
<!-- Include the CSS file in <head> //-->
<link rel="stylesheet" type="text/css" href="tinytabs.css" />
<!-- Content to tab //-->
<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>
<script>
// With options.
document.addEventListener("DOMContentLoaded", function(e) {
tinytabs(document.querySelector("#mytabs"), {
anchor: true,
hideTitle: false
});
});
// Without options.
document.addEventListener("DOMContentLoaded", function(e) {
tinytabs(document.querySelector("#mytabs"));
})
</script>Options
| anchor | true (default) or false. If enabled, when a tab is clicked, it's id is set in url's fragment so that the tab is retained on page reloads. Also enables linking to a tab directly. Eg: http://nadh.in/code/tinytabs#tab-example |
|--------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| hideTitle | true (default) or falseHide 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. |
| before | 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. |
| after | 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. |
MIT License.