Introducing jwTabs

It’s no coincidence that I’m slowly releasing a cohesive suite of custom plugins which do everything I need (and would actually use)…and nothing more! Why recreate a tabs plugin, when there are literally dozens of options available around the web? For a couple reasons:

1. The more code you can call your own, the better!
2. Many plugins are a bit too bloated. Options are wonderful – but they come at the cost of file size bloat.

Features

1. Option to fade between slides
2. Option to auto-switch between tabs
3. Super light-weight – about 1000 bytes, packed.
4. Has everything you’d actually use…and nothing more.
5. No need to specifiy the number of tabs. This is done automatically for you.

Usage

First, create a wrapping div for your tabs, and name it how you wish:

<div id="tab-container">
</div>

Next, insert the content for each tab. Notice how the content for each one is wrapped within its own div.

<div id="tab-container">
	<div>
		<h2>1st tab</h2>
		<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
	</div>

	<div>
		<h2>2nd tab</h2>
		<p>	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
	</div>
</div>

Reference jQuery and the jwTabs Plugin

At the bottom of your page, just before the closing body tag, reference jQuery and this plugin.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="jwTabs.js" type="text/javascript"></script>

Call the Plugin

With the base html added, it’s super easy to create the tabbing functionality.

$('#tab-container').jwTabs();

It’s important to note that this plugin only allows for the functionality. I would assume that the user would prefer his own CSS over anything that might come built-in. If you need a starting point, you can use the demo stylesheet, which produces something like this:

No Need to Specify

A nice feature is that you don’t need to specify the number of tabs. Simply add more divs, and the tabs will automatically compensate, like so:

<div id="tab-container">
	<div>
		<h2>1st tab</h2>
		<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
	</div>

	<div>
		<h2>2nd tab</h2>
		<p>	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
	</div>
	<!-- adding two more divs-->
	<div>
		<h2>3rd tab</h2>
		<p>	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
	</div>

	<div>
		<h2>4th tab</h2>
		<p>	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
	</div>
</div>

Customization

There are several options that come with the plugin, for your convenience.

1. startTab : An integer representing the tab that should be displayed when the page first loads. (default is “1″)
2. interval : If set to milliseconds, this will auto scroll each tab. (example – interval : 5000)
3. fade : If set to milliseconds, will fade-in each new tab. (example – fade : 200)
4. tabTitleReference : By default, each tab is labeled as the current index. You can instead, set the value of the tab equal to the value of something like a heading, for example – tabTitleReference : ‘h2′ .. this will find the first h2 tag within each div, and set the value of the tab equal to that.
5. tabContainerName : Sets the id of the generated tabs unordered list. By default, “tab-items” is used.

$('#tab-container').jwTabs({
	interval : 5000,
	fade : 200,
	tabTitleReference : 'h2',
	startTab : 2
});

Your Tabs

If you take the time to use this plugin and style your own tabs, please email at jeffrey@jeffrey-way.com with a link, zip file, or snapshot of how they turned out. I’d like to have a list of style options to supplement this plugin.