Go to file

Kailash Nadh 95452ae9dd Merge pull request #9 from khang-nd/defaultTab + predefine a default tab		2020-06-21 12:40:48 +05:30
src	+ predefine a default tab	2020-06-20 08:04:35 +07:00
.gitignore	ignore DS_Store files	2011-10-18 07:35:39 +02:00
LICENSE	Add LICENSE	2019-06-29 12:30:23 +05:30
README.md	+ predefine a default tab	2020-06-20 08:04:35 +07:00
index.html	+ predefine a default tab	2020-06-20 08:04:35 +07:00
index.js	Add package.json	2019-06-29 12:53:11 +05:30
package.json	Add package.json	2019-06-29 12:53:11 +05:30
styles.css	split example style and plugin style and move into conventional folders	2011-10-18 07:36:41 +02:00

README.md

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