Tabs in JQuery are quite simple to implement, and they add some neat functionality that users will appreciate.
Tabs are a nice way to separate content logically. Without using tabs one often ends up with a single huge form that contains too many fields for a user to process properly.
In some cases users dislike the idea of tabs but it’s really just a matter of preference and getting used to them. And I’m sure that given the choice between a huge single form and a series of logically separated tabs, most users would agree that the tabs option is easiest wo work with.
Basic Set-up:
The basic structure of a tabbed user interface using JQuery UI sets up the tabs horizontally across the top of the Web page going left to right. The tabs are provided to JQuery within an unordered list that is encapsulated within a ‘tabs’ div that the programmer specifies.
Although this may sound somewhat convoluted, its really quite simple. For starters, let’s say we are going to name our main <div tag ‘tabs’.
So How is it Done?
Once we have the basic structure of a standard HTML document in place, we can add the ‘tabs’ div anywhere we like within the <body> section of the Web page. This would look something like this:
<html> <head></head> <body> <div id="tabs"> </div> </body></html>
Once the basic structure of the HTML Web page is in place, we can add the list of tabs that we want to appear on our page. This is done using an unordered list within our new <div. An example with four tabs would appear something like this:
<html> <head> </head> <body> <div id="tabs"> <ul> <li><a href="#tabs-1">test tab 1</a></li> <li><a href="#tabs-2">test tab 2</a></li> <li><a href="#tabs-3">test tab 3</a></li> <li><a href="#tabs-4">test tab 4</a></li> </ul> </div> </body></html>
The above code will tell the JQuery UI that there are four tabs that should appear on the Web form. However, we have not yet added the content section for each tab, which JQuery needs in order to properly render the tabs page.
Adding the Content for Each Tab
In order to add the content for each tab we need to add a special <div tag with an Id similar to the tab href specified in the unordered list of tabs.
So for example, to associate the first tab with a content div, we have set the href of the first tab as #tabs-1 in the unordered list above. To hook up this tab with a content div, we must now add a <div with an id of “tabs-1” (Notice that the pound sign (#) is not in the text for the content area div).
At this point our example page containing four tabs and four associated content areas will look something like the following code:
<html> <head></head> <body> <div id="tabs"> <ul> <li><a href="#tabs-1">test tab 1</a></li> <li><a href="#tabs-2">test tab 2</a></li> <li><a href="#tabs-3">test tab 3</a></li> <li><a href="#tabs-4">test tab 4</a></li> </ul> <div id="tabs-1"> <p>This is a test tab #1. </p> </div> <div id="tabs-2"> <p>This is a test tab #2</p> </div> <div id="tabs-3"> <p>This is a test tab #3.</p> </div> <div id="tabs-4"> <p>This is a test tab #4.</p> </div> </div> </body></html>
Adding the JQuery to Enable the Tabs
This is all quite straightforward, but what needs to happen to make the JQuery UI properly render the tabs? Luckily the JQuery portion is also quite simple to put in place.
For starters, we need to import the usual JQuery and JQuery-UI JavaScript libraries along with the JQuery-UI stylesheet of our choice. Once this is done, we can register the div that will handle the tabbing using the .tabs() JQuery function with the id of the main <div that needs to handle the tabbing.
Once completed, the JQuery/HTML markup our simple example page will look like the following code:
<html>
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<script>
$(function() {
$('#tabs').tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">test tab 1</a></li>
<li><a href="#tabs-2">test tab 2</a></li>
<li><a href="#tabs-3">test tab 3</a></li>
<li><a href="#tabs-4">test tab 4</a></li>
</ul>
<div id="tabs-1">
<p>This is a test tab #1.
</p>
</div>
<div id="tabs-2">
<p>This is a test tab #2</p>
</div>
<div id="tabs-3">
<p>This is a test tab #3.</p>
</div>
<div id="tabs-4">
<p>This is a test tab #4.</p>
</div>
</div>
</body></html>
So all in all, this is really quite simple to put together, and the new functionality is sure to be useful to who wants to see information separated into logical sections.
How to use JQuery to Get the Index of the Currently Selected Tab
The syntax to reference tabs on a tabbed form may not be immediately intuitive, but is quite useful when working with your new tabbed form. JQuery considers the tabs on your form to be zero-based ranging from the leftmost tab to the rightmost tab. You can find the index of the tab that is currently selected using the following syntax:
var index = $('#tabs').data('tabs').options.selected;
How to use JQuery to Set the Active Tab
Setting the active tab is also done using the zero-based array of tabs ranging from the leftmost tab to the rightmost tab. So for example if we wish to have the third tab become active at some point we can do so using the following:
$('#tabs').tabs('select', 2);
How to change the Active Tab on Mouse-clicking of Text
To put this code into theory, let’s say we want to add some click-able text to the content of our first tab. When the user clicks this text, the third tab should automatically become the active tab. To do so, we can wrap our active text within a <div element that we hook a JQuery event to.
A caveat in setting up our click event, is to add your JQuery event after the HTML element that it should govern to make sure the element has rendered when the JQuery event is told to hook itself to that element.
The code in our example will look like the following. I have highlighted the newly added click-able text and the JQuery event hook-up in blue:
<html>
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<script>
$(function() {
$('#tabs').tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">test tab 1</a></li>
<li><a href="#tabs-2">test tab 2</a></li>
<li><a href="#tabs-3">test tab 3</a></li>
<li><a href="#tabs-4">test tab 4</a></li>
</ul>
<div id="tabs-1">
<p>This is a test tab #1.
<br>
<div id="linkToTab4" name="linkToTab3" style="text-decoration:underline;">Click to go to tab #3</div>
</p>
</div>
<div id="tabs-2">
<p>This is a test tab #2</p>
</div>
<div id="tabs-3">
<p>This is a test tab #3.</p>
</div>
<div id="tabs-4">
<p>This is a test tab #4.</p>
</div>
</div>
<script> $('#linkToTab3').click(function() {
// To get the index of the currently selected Tab ;
// var index = $('#tabs').data('tabs').options.selected; ;
// alert('selected tab = ' + index); ;
// To set the index of the tab to be selected ;
$('#tabs').tabs('select', 2); }); </script>
</body></html>
Conclusion
As you can see, setting up tabs in JQuery is straightforward and effective, and managing the tab selections in JQuerycan be easily and quickly done using a set of simple commands.
Justin Cooney 
Reblogged this on Zeeshan Akhter and commented:
its great ….
Reblogged this on CodeSlayer2010 : Slaying Code 24/7! and commented:
Nice article on how to make Tabs with jQuery.