MooTools

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

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

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

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)

Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.