knadh / tinytabs

A tiny (1.3 KB minified) Javascript tabbing library for rendering tabbed UIs. Zero dependencies.

Home Page:https://nadh.in/code/tinytabs

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

image

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" default>
		<h3 class="title">Videos</h3>
		Content
	</div>
</div>

<script>
// With options.
document.addEventListener("DOMContentLoaded", function(e) { 
  tinytabs(document.querySelector("#mytabs"), {
    anchor: true,
    hideTitle: false,
    closable: true,
    onClose: function (id) {
      console.log(id)
    }
  });
});

// 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.
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.

MIT License.

About

A tiny (1.3 KB minified) Javascript tabbing library for rendering tabbed UIs. Zero dependencies.

https://nadh.in/code/tinytabs

License:Other


Languages

Language:HTML 50.5%Language:JavaScript 39.2%Language:CSS 10.3%