The plugins site is currently in development.
We've been looking to provide a higher-quality, spam-free experience at the plugins site for some time, and a major error on our part forced us to shut down the current site before we could put the new one in place. We are developing a new site, and you can follow along with its development on GitHub. For more information about this transition, including steps you can take as a plugin author to prepare, please read our post about what's going on.
Semantic Tabs
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:'.mypanelclass', //-- Selector of individual panel body
head:'headelement', //-- Selector of element containing panel header, i.e. h3
active:':first' //-- Which 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:
$("#mytabset").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://beaufortgazette.com and at http://viewer.mars.asu.edu.
