Site icon StartFunction

Multiple instances of jQuery Tabs

Back in April 3rd, 2009, I wrote a small script to create tabs with jQuery. Many readers liked its simplicity and asked for some more features, like the ability to automatically rotate between each tab and those were into the second incarnation of the tabs. Many more asked through the comments or by email about the posibility to include multiple instances of the rotating tabs and that’s what this release is about. At first I thought about creating a plugin but issuing several calls for each of your tabs made little sense. So it’s built in a way that you only have to issue on call to a tabs() function to activate several tab blocks. For example, the demo initialize the tabs with the following snippet

[js]

jQuery(document).ready(function(){
tabs({
block  : "#block&2000",
block2 : "#block2"
});
});

[/js]

So you only have to call tabs() passing an object as an argument, with properties for each tab block that you want to initialize. The string is the important part. The script will split it using the & character and store two values in an array. The first one will be the block id and the second will be the rotation speed for this tab block in miliseconds. If this parameter is absent the tabs are defined as static. In the example, one of the tabs will rotate and the other will be static.

Check the example for the multiple instance jQuery Tabs.

Markup

The script requires you to enclose the tabs within a div (or a span or a p, since we’re only reading the id attribute). The structure is the following:

[html]
<div id="block">
<h1>Tab Block Title</h1>
<!– titles for each tab –>
<ul>
<li>
<h2><a id="designt" href="#design">Graphic design</a></h2>
</li>
<li>
<h2><a id="developmentt" href="#development">Development</a></h2>
</li>
<li>
<h2><a id="freebiest" href="#freebies">Freebies</a></h2>
</li>
</ul>
<!– tab panels –>
<div>
<div id="design">
<ul>
<li><a href="http://">Typography</a></li&gt;
<li><a href="http://">Typefaces</a></li&gt;
<li><a href="http://">Painting</a></li&gt;
<li><a href="http://">Grid systems</a></li>
<li><a href="http://">Optical balance</a></li>
</ul>
</div>
<div id="development">
<ul>
<li><span>1</span><a href="http://">jQuery rollovers</a></li>
<li><span>2</span><a href="http://">WordPress plugins</a></li>
<li><span>3</span><a href="http://">jQuery slide menu</a></li>
<li><span>4</span><a href="http://">Web development</a></li>
<li><span>5</span><a href="http://">CMS</a></li&gt;
</ul>
</div>
<div id="freebies">
<ul>
<li><span>a</span><a href="http://">Icons</a></li&gt;
<li><span>b</span><a href="http://">Free font giveaway</a></li>
<li><span>c</span><a href="http://">Daxion, Tessa, Merlin</a></li>
<li><span>d</span><a href="http://">DOWNLOAD ME</a></li>
<li><span>e</span><a href="http://">ILC Thickbox</a></li>
</ul>
</div>
</div>
</div>
[/html]

The jQuery code

The code is now larger than previous version but everything is commented for easy understanding.

[js]
//arrays of objects to collect previous and current tab
var previous = [];
var current = [];
//array to store IDs of our tabs
//store setInterval reference
var tablist = [];

//change tab and highlight current tab title
function change(block){
//don’t do anything if it’s the same tab
if(current[block].reference == previous[block].reference) return;
//show proper tab, catch IE6 bug
if (jQuery.browser.msie && jQuery.browser.version.substr(0,3) == "6.0")
jQuery(block + ‘ .tab#’ + current[block].reference).show();
else
jQuery(block + ‘ .tab#’ + current[block].reference).fadeIn();

//clear highlight from previous tab title
jQuery(block + ‘ .htabs a[href=#’ + previous[block].reference + ‘]’).removeClass(‘select’);

//highlight currenttab title
jQuery(block + ‘ .htabs a[href=#’ + current[block].reference + ‘]’).addClass(‘select’);

//hide the other tabs
jQuery("#" + previous[block].reference).hide();
//stores a reference to the current tab in advance for the next iteration or click
previous[block].reference = current[block].reference;
}
function Tab(blockid){
var z = 0;
//stores self ID internally
this.block = blockid;
//function to rotate internal tabs
this.next = function (){
//store references to current and next tab
previous[this.block].reference = jQuery(this.block + ‘ .htabs a’).get()[z].href.split(‘#’)[1];
if(z >= jQuery(this.block + ‘ .htabs a’).get().length-1) z = 0; else z++;
current[this.block].reference  = jQuery(this.block + ‘ .htabs a’).get()[z].href.split(‘#’)[1];
//advance to next tab
change(this.block);
};
}

function Reference(reference){ this.reference = reference; }
function tabs(tobj){

for (key in tobj) {

var params = tobj[key].split(‘&’);
var block = params[0];

//initialize tabs, display the current tab
jQuery(block + " .tab:not(:first)").hide();
jQuery(block + " .tab:first").show();

//highlight the current tab title
jQuery(block + ‘ .htabs a:first’).addClass(‘select’);

//stores reference to first tab when function starts, tab 1 from left to right
previous[block] = new Reference(jQuery(block + " .htabs a:first").attr("href").split(‘#’)[1]);

//stores reference to second tab when the function starts, tab 2 from left to right
current[block]  = new Reference(jQuery(block + ‘ .htabs a’).get()[1].href.split(‘#’)[1]);

//create new Tab object to store values for rotation and setInterval id
tablist[block] = new Tab(block);

//skip if no speed is defined
if (params[1] != undefined) {
//set interval to repeat – next line commented
interid = setInterval("tablist[‘" + block + "’].next()", params[1]);
//store in – next line commented
tablist[block].intervalid = interid;
}

//handler for tab clicking
jQuery(block + " .htabs a").click(function(event){
//store reference to clicked tab
target = "#"+event.target.getAttribute("href").split(‘#’)[1];
tblock = "#"+jQuery(target).parent().parent().attr("id");

current[tblock].reference = jQuery(this).attr("href").split(‘#’)[1];

//display referenced tab
change(tblock);

//if tab is clicked, stop rotating
clearInterval(tablist[tblock].intervalid);

return false;
});
}
}

[/js]

The idea behind is that we create objects for each tab and they operate separately using their internal variables and only accessing a generic change() function to execute the tab rotation, whether it is from the function triggered internally from each object or a user click. The get() function of jQuery was particularly useful. This function makes the matched selectors available as an array, so for instance

[js]jQuery(‘#block a’).get()[/js]

would return all the anchor elements within #block as an array and

[js]jQuery(‘#block a’).get()[1][/js]

would return the second anchor element from that array. Download the file, inspect it closely, play with it, have fun.

Exit mobile version