tabSlider

Example 1 (defaults)

Example 2

tabSlider lets you create multiple instances of ajax based navigation bars, where the content will be loaded inside a predefined container. The installation is quick and simple and the options lets you create an unique tabSlider with a own look & feel.

• Download Mootools core and the needed parts of Mootools more.
• Download the tabSlider javascript file.
• Include both files inside your website document.
• Create a new instance for your tabSlider by adding the following code to your javascript header:

  var tabSlider = new tabSlider('.buttonclass');

• Customize tabSlider to your own wishes and language.

• slideContainer (slide-container): The ID of the element where the content will be loaded in.
• evalScripts (false): Allow javascript execution inside the requested page.
• duration (500): Duration of the transition.
• transition (Fx.Transitions.Quad.easeOut): Transition effects, equal to Mootools transitions.
• display (none): Start with an opened tab, using the transition on load.
• show (none): Start with an opened tab without transition.
• failure (<strong class="error">Error while loading file.</strong>): HTML which will be displayed when an error occured while loading the content.
• active (active): Class that will be assigned to active buttons.

• Mootools 1.2: the first version of tabSlider is created with Mootools 1.2. So you'll need this version or later.
• Mootools More: the script uses some parts of the Mootools More libraby.

Mootools 1.2.1 Core YUI compressed, only with needed components!

Mootools 1.2 More YUI compressed, with needed component

tabSlider v1.1 YUI compressed

tabSlider v1.1 no compression, for developers use

• 28 december 2008, version 1.1: Added the option to display/show a tab on load and the possibility to close tabs. Als new is the error which will appear if a file doesn't exist and the option to add an active class to the buttons. The problem of fast clicking a button without any interaction is history and the script will check if a container exist.
• 31 july 2008, version 1.0: First release.