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 div ’s 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. Any complaints, or compliments —I take ‘em all. Also, if you found this useful, please subscribe to my posts , as more like this are bound to come soon.
It is a pity that either built with Mootools, but the approach is interesting.
Make it with jQuery !
Cheers
PS : Nice website design ;)
@Seb:
Glad you liked it. I could rebuild this is jQuery, though I doubt jQuery is short of tabs plugins. I personally feel Mootools >>>> jQuery, which is why I develop with it.
Hello from a NorCal Sean :-)
Love the script, much easier to use than a jQuery equivalent and helps keep my framework on a single library (was mixing jQuery and mootools for a minute, no fun).
One thing that\'d be great is if it could degrade a little more gracefully, i.e. not require some sort of absolute positioning. Let\'s say a user doesn\'t use JS, they\'ll only see one tab element. If it could dynamically apply position:absolute when the script fires that\'d be awesome - then if JS is not being used it would just show all tab elements one after another.
Hey Sean,
I wanted auto-height tabs as well.
- First adjust the CSS and set the heights to auto and the .feature position to relative
- Then open up the mgfxtabs.js file and do a search for the term \'opacity\' and change the following:
.setStyle(\"opacity\",0)
[changes to]
.setStyle(\"display\",\"none\")
opacity:1
[changes to]
display:\'block\'
opacity:0
[changes to]
display:\'none\'
hope that helps!
Is there a way that the rotating can stop when you hover over the content?
I\'ve added an uncompressed source version of the Javascript, so that it\'s easier to learn from and to try to modify for your own needs.
@Amber:
I added one more option for the initialization: hover. Set hover to true when you make a new MGFX.Tabs(). For this to work, I just setup a mouseenter event listener to fire MGFX.Tabs.stop(), which will clear the autoplay interval.