The Closeable Tab widget allows tabs to be removed. (related blog post)
Features

* Implements the Fadeout pattern

An Example :

Click on the close icon to remove a tab. Note: At the moment, it is possible to close all tabs, which results in a module with no tabs. A possible solution for this is to remove the module once all tabs have been closed.

This example is also draggable, using the draggable specific initialisation properties.

Markup

The html markup for closeable tabs is exactly the same as standard tabs and 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
},
bCloseable:true, //denotes tabs are to be closeable
sCloseIconClass:YAHOO.NT.TabsModule.CSS_CLOSE_ICON,
bDoFadeOut:false
};
//instantiate object
mTab = new YAHOO.NT.TabsModule('mTab-closeable',mTabConfig);
//add listeners (optional)
mTab.addListener('TabAdded',exampleHandler);
mTab.addListener('TabRemoved',exampleHandler);
mTab.addListener('TabActivated',exampleHandler);
mTab.addListener('TabDeactivated',exampleHandler);  

Demo: http://www.nodetraveller.com/sandbox/moduleTabs/closeable.php
Source: http://www.nodetraveller.com/sandbox/moduleTabs/closeable.php

Related Listings:

1. Ajax Standard Tabs Module The Standard Tab widget provides standard features for a tab...
2. Sliding Tabs using Mootools Sliding Tabs is a mootools 1.11 plugin which adds a...
3. Ajax Dynamic Tab Panes The latest two versions of Tab Panes by DHTMLGoodies, with...
4. DHTML goodies Tab Control Files in package * tab-view.html = Main html file *...
5. YUI – Dialog Alert Widget This widget is designed to be a dropin replacement for...

Do you like this post?

Email: