This plugin creates tabbed panels from semantic markup. What does this mean?
Many (most?) javascript tab solutions tend to take the following approach: In the markup, create a list of elements to use as the tabs themselves, then create a list of elements to use as the tab panels, like so:
<ul> <li>Tab1</li> <li>Tab2</li> <li>Tab3</li> </ul> <div> Panel 1 </div> <div> Panel 2 </div> <div> Panel 3 </div>
This works OK for most users, but with javascript disabled, or using a limited platform (like a cell phone) or to a search engine spider, the headers are disconnected from the content they label.
This script allows you to structure your markup like so:
<div id="mytabset"> <div class="panel"> <h3>Tab1</h3> Panel stuff 1 </div> <div class="panel"> <h3>Tab2</h3> Panel stuff 2 </div> <div class="panel"> <h3>Tab3</h3> Panel stuff 3 </div> </div>
So that to a spider or device with limited rendering capability, the markup is semantically correct.
To turn the above markup into a tab set, just apply the following:
$("#mytabset").semantictabs({ panel:'panel', //-- Selector of individual panel body head:'h3', //-- Selector of element containing panel head active:':first' //-- Selector of panel to activate by default });
This will 'tabify' the 'mytabset' div, turning the text contained in the H3 elements into the tabs. Styling these is a an exercise for the reader, but generally the following works pretty well:
/*semantic tabs*/ ul.semtabs { margin:0 auto; clear:both; border-bottom: 4px solid #4c77b3; height:25px; list-style:none !important; } ul.semtabs li { float:left; height:30px; display:block; margin:0 !important; background-image:none; } ul.semtabs li a { /* height:15px;*/ line-height:15px; display:block; padding: 5px 5em; text-decoration:none; font-weight:bold; background-color:#e6eeee; } ul.semtabs li.active a { background-color: #4c77b3; color: #fff; } /*end semantic tabs*/
You can also activate a tab programmatically, like so:
$("#appcontainer").semantictabs({activate:2});
Where 2 is the index of the tab you which to activate (starting from zero, of course).
See it in action at http://viewer.mars.asu.edu.
Download from the jQuery Plugins page.
Code now managed through GitHub. Download from there!
Comments
Cédric (not verified)
Tue, 12/02/2008 - 5:43pm
Permalink
Hello, Sorry but my english
Hello,
Sorry but my english is very poor...
With your example :
this does not work :
(.panelcontainer is not a descendant element)
this work :
Thank you for your plugin
Christian
Tue, 12/02/2008 - 11:16pm
Permalink
Yes, you're absolutely
Yes, you're absolutely correct. My demo code is incorrect as the plugin is written at this time, but I've updated the plugin so that it's referring to the
container.parent()
instead ofcontainer
, as this is a cleaner way of doing it, without requiring an additional container around the set of divs. I hadn't realized that all the production code I'm using has an extra container!I've updated the code on the jQuery plugins site.
Thanks!
-chris
Dave (not verified)
Wed, 02/11/2009 - 12:04pm
Permalink
$("#mytabset").semantictabs({
$("#mytabset").semantictabs({
container:'panelcontainer', //-- Selector of element containing all panels
panel:'panel', //-- Selector of individual panel body
head:'h3', //-- Selector of element containing panel head
active:':first', //-- Selector of panel to activate by default
});
should be
$("#mytabset").semantictabs({
container:'panelcontainer', //-- Selector of element containing all panels
panel:'panel', //-- Selector of individual panel body
head:'h3', //-- Selector of element containing panel head
active:':first' //-- Selector of panel to activate by default
});
took out the comma
Dave (not verified)
Wed, 02/11/2009 - 12:34pm
Permalink
Have not gotten this to work
Have not gotten this to work and believe I've followed your example precisely.
Christian
Wed, 02/11/2009 - 1:31pm
Permalink
Dave, thanks for the heads
Dave, thanks for the heads up. I always forget that IE will error out if it encounters a trailing comma like that. Also, I've revised the code somewhat to get rid of the redundancy in the 'panelscontainer' option. Code posted here and (shortly) on jquery.com should be correct.
Greg Varga (not verified)
Sun, 03/28/2010 - 9:48pm
Permalink
Hey, I've been using this
Hey,
I've been using this plugin and thing it's great!!!
I ran into a slight bug, because I add additional tag's into the li's that get created.
So I changed this area:
This is the line:
To:
This makes sure that the link name is used, and no other information.
Andrea (not verified)
Mon, 05/17/2010 - 3:47am
Permalink
Hi Chris. I would like to
Hi Chris. I would like to hide the head element (e.g. h3) that is repeated in the panel content, how can I do it?
Thanks a lot
Span (not verified)
Tue, 03/22/2011 - 12:54pm
Permalink
Hi, this looks exactly what I
Hi, this looks exactly what I am after but unfortunately I cannot get this to work. I have downloaded your plugin and have copy and pasted your css and markup. Can you confirm where you place the js code to turn the divs into tabs? Can you also confirm where you place the code if you wanted to do this programatically? Sorry for the numpty questions!
Christian
Tue, 03/22/2011 - 11:39pm
Permalink
Span, I've added a demo.html
Span, I've added a demo.html file to the project on GitHub which illustrates how to use the plugin.
Christian
Tue, 03/22/2011 - 11:40pm
Permalink
Andrea, you can simply hide
Andrea, you can simply hide it with CSS:
Span (not verified)
Wed, 03/23/2011 - 5:27am
Permalink
Thank you - I had the
Thank you - I had the javascript in the wrong place. I was calling it from the head and not after the div. Many thanks!
Christian
Wed, 03/23/2011 - 7:33am
Permalink
Span - techinically it
Span - techinically it shouldn't matter.
$(document).ready();
waits until the DOM is completely loaded and should work the same regardless of where you put it.