A tiny tabbing plugin for jQuery
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib
src
.gitignore
README.md
index.html
styles.css

README.md

tinytabs

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

Example

HTML - Setup

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

HTML - Usage

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

Javascript

$(document).ready(function() {
	$('#mytabs').tinytabs();

	// or

	$('#mytabs').tinytabs({		// optional options
		anchor: false,
		hide_title: false
	});
});

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