Create a Tabbed Interface jQuery Plug-in

In this tutorial I explain how to create a jQuery plug-in for tabbed interfaces. This is intended to demonstrate how to create simple jQuery plug-ins, the advantages of abstracting your code, and also a few of the things you can do with jQuery.

Get SourceSee Demo

Step 1: Setting up

You can start by defining the HTML structure. It’s fairly simple and consists of a div wrapper, which will make it easier when we start working with jQuery, an unordered list, which will house the tab links, and then a div for each tab container.

<div id="tabs">
<ul>
<li><a href="#tab1" class="link_tab" id="selected">Tab 1</a></li>
<li><a href="#tab2" class="link_tab" >Tab 2</a></li>
<li><a href="#tab3" class="link_tab" >Tab 3</a></li>
<li><a href="#tab4" class="link_tab" >Tab 4</a></li>
<li><a href="#tab5" class="link_tab" >Tab 4</a></li>
</ul>

<div id="tab1">
<h1>Tab 1</h1>
<p>Example content</p>

</div>

<div id="tab2">
<h1>Tab 2</h1>
<p>Example content</p>
</div>

<div id="tab3">
<h1>Tab 3</h1>
<p>Example content</p>
</div>

<div id="tab4">
<h1>Tab 4</h1>
<p>Example content</p>
</div>

<div id="tab5">
<h1>Tab 5</h1>
<p>Example content</p>
</div>

Step 2: Styling

As far as aesthetic styling goes, you can do whatever you want. However, there are a couple of important structural rules to apply. As the tab content divs will need to be on top of each other, they will need to be positioned absolutely which means that the div wrapper will need to be relative so that you can position those divs against the wrapper rather than the page.

The styling I have applied is as follows:

#tabs {
	position: relative;
	float: left;
	font-family: verdana, sans-serif;
}
#tabs ul {
	list-style: none;
	margin-left: 12px;
	padding: 0;
}
#tabs li {
	float: left;
	margin-right: 4px;
}
.link_tab {
	text-decoration: none;
	width: 105px;
	height: 21px;
	display: block;
	text-align: center;
	color: #047198;
	font-weight: bold;
	background-color: #DFEDF0;
	padding: 3px;

}
.link_tab:hover {
	background-color: #D1E3E7;
}
.link_tab:focus {
	outline: 0 none;
}
#tabs div {
	-moz-box-shadow: 0 -5px 15px #E1E1E1;
	-webkit-box-shadow: 0 -5px 15px #E1E1E1;
	z-index: 1;
	top: 43px;
	left: 0px;
	width: 580px;
	padding: 0 10px 0 10px;

}
#tabs h1 {
	color: #047198;
	font-weight: normal;
}
#selected {
	-moz-box-shadow: 0 -6px 15px #E1E1E1;
	-webkit-box-shadow: 0 -6px 15px #E1E1E1;
	background-color: #fff;
	z-index: 2;
	position: relative;
}

Step 3: Defining a plug-in

Plug-ins are a good idea as they increase the reusability of code. It makes sense, if there’s a segment of code you use a lot, to define it as a plug-in and then just drop it in wherever you need it. One of the necessities of this is that the code is nonspecific, with as few ID and class names as possible so that the code can easily be used in other instances.

To define a jQuery plug-in, you’ll need to wrap it in a function that looks like this:

(function($) {

})(jQuery);

Within that we’re going to define the main plug-in function which looks like this:

$.fn.tabbed = function() {

};

‘tabbed’ being my chosen name for this plug-in.

Step 4: Functionality

Within the main function, defined above, we can add the functionality that is going to perform the intended task. In this case, handling the tab clicks and then transitioning across tab content.

The code for this is as follows:

//assign 'this' to a variable for scope
var elem = this;
$(elem).children('ul').children('li').children('a').click(function() {
	//show which tab is now selected
	$('.link_tab').removeAttr('id');
	$(this).attr('id','selected');
    $(elem).children('div').fadeOut(400).filter(this.hash).fadeIn(400);
	//return false so the link is not followed
	return false;
});
$(elem).children('div').css('position','absolute').not(':first').hide();

This code just assigns a click event to the tab links and then performs a fadout animation on the current tab content, followed by a fadein animation on the tab content to be shown. The tab link that was clicked on is filtered to get the hash value. This is a value that can safely be added to the end of any link as it only has relevance to the client-side. The final line is predominantly for accessibility, if a user has JavaScript disabled then each tabs contents will still be displayed.

Step 5: Invoking

This is the final step and it just involves attaching the plug-in to the tab wrapper. In this case, the tab wrapper has an ID of ‘tabs’ and the plug-in is called ‘tabbed’ so the code looks like this.

$(document).ready(function() {
	$('#tabs').tabbed();
});

Conclusion

I hope this has given you an idea of how to create jQuery plug-ins and the advantages of abstracting code. Or if your interest was simply in creating a tabbed interface then I hope this was sufficiently explanatory. Thanks for reading.