A tiny tabbing plugin for jQuery
JavaScript
Switch branches/tags
Nothing to show
Latest commit a01a14f Oct 20, 2011 @knadh Merge pull request #4 from sdepold/master
- Typo in contributor's name fixed in README
- IE styling fix for li.clear in ul.tabs
Permalink
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.