The Standard Tab widget provides standard features for a tab widget. (related blog post)
Features:

* Uses event delegation
* Url Fragment aware – if a url ends with a named fragment, then any matching tab with a link or id that matches will be automatically activated on page load. This link will load this page in a new window with the “Tab C” tab already selected.
* Text Size Independent
* Implements the Module Tabs pattern and Spotlight design patterns.

Markup

The html markup for standard tabs looks like this:

<div id="mTab" class="mTab" >
<ul class="tab">
<li class="on"><a href="tabA.html" class="tab">Tab A</a>
<div class="pane paneShow">
<p>Lorem ipsum</p>
</div>
</li>
<li><a href="tabB.html" class="tab">Tab B</a>
<div class="pane paneHide">
<p>Lorem ipsum</p>
</div>
</li>
<li><a href="#tabC" class="tab">Tab C</a>
<div class="pane paneHide">
<p>Lorem ipsum</p>
</div>
</li>
</ul>
</div>   

Configuration

The initiating javascript looks like this:

  //Config object literal
var mTabConfig = {
bDoHilite : true,
oHiliteArgs : {
from:"00be00",
to:"9eff9e",
duration:1,
bTransparent:true,
fEase:(YAHOO.util.Easing) ? YAHOO.util.Easing.easeOut : null
}
};
//instantiate object
mTab = new YAHOO.NT.TabsModule('mTab',mTabConfig);
//add listeners (optional)
mTab.addListener('TabAdded',exampleHandler);
mTab.addListener('TabRemoved',exampleHandler);
mTab.addListener('TabActivated',exampleHandler);
mTab.addListener('TabDeactivated',exampleHandler); 

Demo:
Download:
Source:

Related Listings:

1. AJAX Tab Module – Closeable Implementation The Closeable Tab widget allows tabs to be removed. (related...
2. Sliding Tabs using Mootools Sliding Tabs is a mootools 1.11 plugin which adds a...
3. Sliding Tabs using Moo Tools Plugin The script relies on width and height of tabs and...
4. Zapatec Ajax Tabs * This demo uses the Zapatec AJAX Transport layer to...
5. Control.Tabs Script Control.Tabs attaches creates a tabbed interface from an unordered list...

Do you like this post?

Email: