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.

Check out the demo, and grab the code here. It’s actively tested this in Safari 3, Opera 9, IE 7, and Firefox 2.

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. 

Events

onChange:

This event fires when the sliding tabs is about to change to another pane. It passes the event handler one argument, an object. Setting the cancel property on that object to true will stop the requested change from taking place. It also has a target property which contains the pane element suggested to be changed to. See the demo to see usage.

Updates

Version 1.8.1: Added a little nag. There is NO reason to upgrade to this version if you’re already using 1.8. I’m hoping to get a motorbike so I can go spend time with the horses I miss so so much, hopefully this will help there. I’ll remove it as soon as I have the bike, or if it doesn’t seem to really work. :)

Version 1.8: Added second parameter to changeTo method, which is an optional boolean indicating weather the change should be animated or not. Also added ability to give a number as the first parameter, like slidingtabs.changeTo(3); for the third pane.

Version 1.7: Added recalcWidths method for use in fluid layouts.

Version 1.6.1: Fixes issue when individual panes were styled with css `padding` and `animateHeight` was in use.

Version 1.6: Added rightOversized option by request of Bonfire Media. See it in action at a secondary demo.

Version 1.5.2: Fixed a typo in the code by request of a user, the bug isn’t serious, not necessary to upgrade past 1.5.1 if already using that.

Version 1.5.1: Added a new feature, which is on by default, the option `animateHeight` enables the animating of the container elements, so that if your panes are all different lengths, the whole widget will get shorter or longer to fit them now rather than always being as tall as the largest pane. Set this to false to keep the old behavior.

Version 1.4.3: Changed license to creative commons, fixed safari bug where using html elements inside of a pane element caused serious graphical glitches, but only on pages where the margin of said elements had been reset to 0 in the CSS styles. A recommended update, however please note that a donation of $20 Australian Dollars or greater is now mandatory for commercial use and using this or future updates without having donated is theft. Noncommercial use is still free.

Version 1.4.2: maintenance release, fixes a bug, now the `slideEffect` option should work again.

Version 1.4.1: Maintenance release, fixes a bug where script would not work if a `startingSlide` wasn’t provided in the options.

Version 1.4: Added `startingSlide` option to set which pane the sliding tabs should be on when the page first loads.

Version 1.3: Fixed a problem where the script would crash and stop working if the user clicked an element within the button rather than the direct button element itself.

Version 1.2: Added `change` event, with ability to cancel change requests, thus making sliding tabs suitable for building very responsive ‘wizards’ (for really long forms and other situations where the user needs to do things before going to the next section)

Version 1.1: Added `wrap` option and changed default behavior to wrap around when using `previous` and `next` methods.

Minimal Requirements

Mootools version 1.11 with these included:

• Class.Extras
• Fx.Scroll
• Fx.Style
• Native Element
• Element.Event

Finally

Sliding Tabs is a gift from Blueberry that took many hour’s to build up to where it’s at now. You should give her a gift back right? It’s time to make something for her! Maybe you could make a funky video about a pony whose creative, or maybe a song or an illustration or a poem! If you’re no good at any of that, maybe there’s something on her wishlist you could give her, or maybe boring old money. If you can’t give those either, at least send her an email, maybe you can give her your friendship. :)