Sliding Tabs is a mootools 1.11 plugin which adds a pretty neat effect. It’s a clone of something seen on Panic Software’s Coda site, which in turn was very similar to a widget used in the iTunes Music Store.

Documentation

Firstly, the ‘constructor’:

var slidingtabs = new SlidingTabs(buttons, panes, options);

So here the first parameter is buttons, for this you want to give an element whose children are to become buttons. This element should have as many children as you plan to have panes.

Then we have the panes parameter. For this you’ll need to provide a div, containing another div, which then in turn contains your panes. Check out the demo to see what I mean. You’ll want to give the outer div a width using css. Style it however you like. Please do not style the inner div, it is used by the script.

Then we have options. You can skip this parameter if you like, you only need the first two, but if you do want to customize things a bit you’ll use a javscript hash to set things here. A javascript hash looks like this { option1: “setting”, nextOption: 123 } etc. So here are the options you can set:–

• startingSlide: the pane which is displayed when the page first loads, either an id, or the element itself
• activeButtonClass: the class you’d like to see applied to your buttons when they are the currently selected one. It defaults to ‘active’.
• activationEvent: this is the event on a button which will trigger the panes to change. It defaults to ‘click’, but you could use ‘mouseover’ or something similar.
• wrap: When using the previous and next methods and this is set to true, the next method goes back to the first pane when it gets to the end and vice-versa. Defaults to true.
• slideEffect: This can be set as another hash, it sends extra options like duration and transition in to Fx.Slide. Take a look at the mootools docs for more info on this.
• animateHeight: Should the height of the whole widget grow shorter and longer to fit the panes? By default this is on (true), when set to false the widget will always be as tall as the tallest pane. If you don’t need this on, it might make things more responsive on older systems to avoid the extra animation functions by turning it off.
• rightOversized: Takes a number of pixels (defaults to zero) of the immediate next pane to show to the right of the currently selected pane. It effectively makes all the panes less wide, while leaving the viewable area at the size you’ve given through CSS. Demo.

Once you’ve created the plugin object, you can also call a few methods on it. These are changeTo, next, previous, and recalcWidths. Next and previous are pretty straight forward, you could hook up buttons to run these if you’d like. changeTo takes one parameter, which is the pane you want to switch to. If you like you can give your panes id’s, then you can do slidingTabs.changeTo(‘id-of-pane’); to do stuff like link from one pane to another and surely many more fun things. The pane can be specified as an Element object, a one based Number, or an ID string. An optional second parameter controls if the change is animated or not with a boolean value. recalcWidths takes no parameters, and as shown in the demo, can be connected with window’s ‘resize’ event to get sliding tabs to work in fluid layouts where its width changes when the page is resized.

Demo: http://creativepony.com/demos/sliding-tabs/
Download: http://creativepony.com/mint/pepper/orderedlist/downloads/download.php?file=http%3A//creativepony.com/scripts/sliding-tabs.js
Source: http://creativepony.com/journal/scripts/sliding-tabs/

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...

Do you like this post?

Email: