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.

In this tutorial I will start from the beginning and give you a brief introduction to some of jQuery’s core concepts such as element selection, manipulation and events.

The first thing you’ll need to do is download the jQuery core library from jquery.com and add a reference to it in your html page.

Now we can start writing some code. As the majority of stuff you’re most likely to do with jQuery will involve the DOM in some way, we’ll need to start with the jQuery ready event. This is an event that gets triggered when the page has loaded and the DOM is ready to be accessed.

$(document).ready(function() {

});

From within this function we can select and manipulate DOM elements. If, for example, you wanted to select an element by it’s ID, or select a group of elements by their class name, you can do this by using CSS selectors. This is done like this:

$("#nav")
//this would select an element with the ID of nav
$(".title")
//this would select all elements with the class name title
$("p")
//this would select all paragraphs

Once you have selected an element, or a group of elements, you have a vast array of options when it comes to dealing with that selection. You could:

$("#nav").css({'width':'500px','height':'200px'});
//alter it's css properties
var cont = $("#nav").html();
//assign its contents to a variable
$("#nav").html("insert this text");
//assign content to it
$("#nav").hide();
//perform an animation on it

And much more, you can also apply events to the elements you have selected. Here are some examples:

$(".title").click(function() {
//this triggers on a mouse click
});

$("input").focus(function() {
//this triggers when an input field gets focus
});

$("input").blur(function() {
//this triggers when an input field loses focus
});

$("#nav").mouseenter(function() {
//this triggers when the mouse moves over the element
});

$("#nav").mouseleave(function() {
//this triggers when the mouse moves over the element
});

Now we can put this all togther and create a basic function that gets triggered when an element with the ID of ‘nav’ gets clicked on, which then causes the text colour of all the paragraphs on the page to be set to red and their content to be set to the text ‘This is a paragraph’:

$(document).ready(function() {
	$("#nav").click(function() {
	$("p").css({'color':'#ff0000'});
	$("p").html("This is a paragraph");
});
});

This has been a basic introduction to jQuery, showing you some of the core concepts and functionality. The amount you can do with jQuery is vast and to get a better idea of this, I suggest you have a read through the documentation on the jQuery site. It’s very thorough and informative with lots of great examples and demonstrations. Other useful jQuery sites include jQuery for Designers and jQuery Howto.