Tab

Minimalistic but extensible tab swapper. It can be used to create a tab swapper as well as a galerie slideshow. you can have effects like Moostack, the barack slideshow or jQuery nivoslider or whatever you want by providing an animation plugin. Demo

More demos

• Matrix
• Flip 3D
• Cube 3D
• Random
• Move
• Stack
• No animation

How to use

It is quite simple to use. what you need first is

HTML:

<div id="slide">
<div class="ctab"><img src="images/slide1.jpg" width="400" height="300" /></div>
    <div class="ctab hidden"><img src="images/slide2.jpg" width="400" height="300" /></div>
    <div class="ctab hidden"><img src="images/slide3.jpg" width="400" height="300" /></div>
    <div class="ctab hidden"><img src="images/slide4.jpg" width="400" height="300" /></div>
  </div>
  
//the tabs
 <div class="tabs"><a href="#0">1</a><a href="#1">2</a><a href="#2">3</a><a href="#3">4</a></div>

Javascript:

var swapper = new Tab({

	container: 'slide',
	tabs: 'div.tabs a',
	onChange: function () {
	
		//do something
	}
});

Options:

• container - (mixed) the element that contains the panels.
• selector - (string, optional) only container children that match the selector will be grabbed.
• animation - (string, optional) the transition plugin to use for swapping. default to None
• params - (object, optional) parameters specific to the transition plugin.
• fx - (object, optional) parameters for the animation. this can be any of the Fx parameters.
• current - (int, optional) index of the panel that is displayed first. default to 0
• tabs - (mixed, optional) when a tab is clicked, the corresponding panel is shown. anything you can pass to $$ is accepted.
• activeClass - (string, optional) style applied to the selected tab.
• inactiveClass - (string, optional) style applied to every unselected tab.
• link - (string) control the way concurrent changes are handled. accepted values are chain (default), ignore, cancel

Events:

create

Fired right after the tabs has been setup.

Signature:

onCreate(newPanel, index)

Arguments:

1. newPanel - (element) the active panel.
2. index - (int) the index of the active panel.

change

Fired when the active panel is changed.

Signature:

onChange(newPanel, curPanel, index, current)

Arguments:

1. newPanel - (element) the active panel.
2. oldPanel - (element) the previously selected panel.
3. index - (int) the index of the active panel.
4. current - (int) index of the previously selected panel.

Method: next

display the next panel.

Returns:

• (object) - This Tab instance.

Method: previous

display the previous panel.

Returns:

• (object) - This Tab instance.

Tab Method: add {#Tab:add}

add a new panel to the tab.

Arguments:

• panel - (mixed) the new panel.
• tab - (mixed, optional) tab associated to the new panel
• index - (int, optional) position where the new panel is injected, if not specified, the new panel will be inserted at the end

Returns:

• (object) - This Tab instance.

Tab Method: remove {#Tab:remove}

remove the panel at the given index.

Arguments:

• index - (int)

Returns:

• (object) - an object {panel: panel, tab: tab} containing the panel and the associated tab.

Tab Method: resize {#Tab:resize}

resize the container to fit the panel offset. this is useful if you change the panel content.

Arguments:

• index - (int, optional) index of the panel. if not specified, the current panel is used.

Returns:

• (object) - an object {panel: panel, tab: tab} containing the panel and the associated tab.

Method: getSelectedIndex

Returns:

• (int) - the index of the displayed panel

Method: setSelectedIndex

set the displayed panel.

Syntax:

swapper.setSelectedIndex(0);

Arguments:

• index - (int) index of the panel to display.
• direction - (int) indicate in which direction panels should be rotated. accepted values are -1 (right to left) and 1 (left to right).

Returns:

• (object) - This Tab instance.

Method: isSupported

return true if the given transition is supported by the browser.

Syntax:

swapper.isSupported('Flip');

Arguments:

• transition - (string) transition name.

Returns:

• (boolean)