Pluggable Mootools Tabs
Update (2/18/10)
Theres a new version of MGFX.Tabs, that includes the ability to easily show a random tab.
Update (11/10/09)
I’ve released a new version of MGFX.Tabs, and wrote a new article explaining the new features, its new location, and so forth.
Last week, I released a pluggable Slideshow type Mootools class. I had written that class a while back, and since then had extended its functionality to allow me easily make tabs on any page. I wanted my tabs to have the ability to auto-switch if I wanted, so extending my Rotater class made perfect sense.
MGFX.Tabs
I also wanted this to be a solution that didn’t require going into the source and tweeking it to make it work. That’s the point of every class, really.
Also, people (even myself, on varying projects) use different mark-up to make tabs. The placement in the mark-up doesn’t matter—just know that it associates controller links with content based on order in the DOM. I often use a ul of controlling links, and then divs to hold the content; but sometimes I make the content an unordered list also. So this class tries not to restrict the xHTML, barring one: it does assume your controls are links inside list items (<li><a></a> </li> ).
This does require the Fx.Elements add-on on top of the regular Mootools framework, so be sure to grab the extra class from Mootools More .
The Constructor
The constructor is pretty simple, and since it extends Rotater, it includes the same transitionDuration and slideInterval options.
window.addEvent('domready',function(){ var tabs = new MGFX.Tabs('.tabs','.content',{ autoplay: true, transitionDuration:500, slideInterval:6000 }); });
The first parameter taken is the class name of ul that contains your controlling buttons/links. The second parameter is the class name of all the tabbed cotent. For both of these, simply make the proper elements have the same class name.
The third parameter is optional, as it is the class options. Every option can be ommited if you want, and it will just use the defaults I felt would be common.
Namespace: I’ve started prepending all of my classes with MGFX to prevent conflicts with any other code that might be in use.
There ya have it! Should be fairly straight foward. The demo is now in the download, so it will forever work, and won’t break when I alter my own Javascript.
