The Draggable Tab widget allows great look of quick draggable tabs to be dragged with dropped between one or more modules.

Features:

• Uses standard features
• Tabs can be dragged on top of each other to allow reordering within the same module as well as other modules
• A graphic (specified by CSS) is shown to indicate the new position of the tab
• Implements the Drop Invitation pattern

Markup

The html markup for draggable 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
},
sGroup:'m2drag', //drag group to belong to
bDraggable:true //denotes tabs should be draggable
};
//instantiate object
mTab = new YAHOO.NT.TabsModule('mTab-draggable',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/draggable.php

Source: http://www.nodetraveller.com/sandbox/moduleTabs/draggable.php

Related Listings:

1. Ajax Standard Tabs Module The Standard Tab widget provides standard features for a tab...
2. AJAX Tab Module – Closeable Implementation The Closeable Tab widget allows tabs to be removed. (related...
3. Sliding Tabs using Mootools Sliding Tabs is a mootools 1.11 plugin which adds a...
4. Sliding Tabs using Moo Tools Plugin The script relies on width and height of tabs and...
5. Zapatec Ajax Tabs * This demo uses the Zapatec AJAX Transport layer to...

Do you like this post?

Email: