Mootools Tabs Classes You Should Know About

Posted by teejay on November 18, 2009

I've been playing around with Mootools again and was looking into working with some tabbed content. A little research comes a long way as I discovered new Mootools-based tabs.

MGFX Tabs

Usage


<ul id="tabs">
    <li><a class="tab" href="#" id="one">One</a></li>
    <li><a class="tab" href="#" id="two">Two</a></li>
    <li><a class="tab" href="#" id="three">Three</a></li>
</ul>
<div id="home">
    <div class="feature">
        <img src="img/mgfxtabs1.jpg" alt="" />
    </div>
    <div class="feature"">
        <img src="img/mgfxtabs2.jpg" alt="" />
    </div>
    <div class="feature">
        <img src="img/mgfxtabs3.jpg" alt="" />
    </div>
</div>

// Javascript
var tabs = new MGFX.Tabs('#tabs li a', '#tabs div');

SimpleTabs

Usage

// Wait for the content ...
window.addEvent('domready', {
 
    var container = $('my-tabs')
 
    new SimpleTabs(container, {
        selector: '.header' // every element with class .header is removed and added as tab
    });
 
});

Accessible Ajax Tabs

This one is much more complex to configure so I am leaving you to play around with it here.

That's it!? Yep. There have been a lot of Mootools Tabs Classes in the past like Mootabs. And although it's easy build your own tabs classes, it's sad that most of them have stopped development.

Call for Tabs?

If you know any Mootools-based tabs, I'll be happy to add them up here.

Categories: Cool Links

Tags: javascript, mootools

No Comments

PinoyTech.org