How to use

All you'll need to create a tab pane on your page is instantiate a new TabPane and supply it the container (or its id) in which your tabs and corresponding contents reside:

var myTabPane = new TabPane('tabs');

Default, it uses the selector '.tab' for a the tab headers and '.content' for the corresponding content sections and adds the css class 'active' to the selected tab header. These values are customizable in the constructor. Should you for example want to select all li elements as tab headers with p elements as the contents, your call to the constructor would look as such:

var myTabPane = new TabPane('tabs', {
    tabSelector: 'li',
    contentSelector: 'p'
});

Constructor

Syntax:

var myTabPane = new TabPane(container[, options[, showNow]]);

Arguments:

1. container - (string or element) The element that contains the tab components (tab headers and contents).
2. options - (object, optional) On options object, see below.
3. showNow - (number or function, optional) A number of function that returns a number, the index to focus initially.

Options:

• tabSelector - (string) CSS selector for the tab headers within the container.
• contentSelector - (string) CSS selector for the tab contents within the container.
• activeClass - (string) Class name for the active tab header.

Events:

• change - (function) Function executed when a tab is selected. The index of the selected tab is passed as the only argument.

Add Only Available When Tabpane Extra Is Loaded

Adds a tab header and corresponding content to the tab pane add the location specified (optional).

Syntax:

myTabPane.add(tab, content[, location[, showNow]]);

Arguments:

1. tab - (element) The element to be used as the new tab's header.
2. content - (element) The element to be used as the new tab's content.
3. location - (number, optional) Where to place the new tab (default: at the end).
4. showNow - (boolean, optional) Whether to focus the new tab (default: false;)

Events:

• add (function) Function exectuted when a tab is added. The index of the added tab is passed as the only argument.
• change (function) Fired if showNow was specified by focusing the new tab.

Close Only Available When Tabpane Extra Is Loaded

Allows closing of a certain tab and its corresponding content element from the container.

Syntax:

myTabPane.close(what);

Arguments:

1. what - (number or element) The index of the tab or either a tab header or content element to remove.

Events:

• close - (function) Function executed when a tab is removed. The index of the removed tab is passed as the only argument.
• change - (function) Fired inadvertedly by changing the tab (see the demo and source for this).

Changelog

0.5.2

• update to MooTools 1.5 (functional code unchanged)

0.5.1

• REMOVE showTab and closeTab in favor of show and close

0.5

• DEPRECATE showTab and closeTab in favor of show and close (old ones will be removed in next version)
• add function add
• move add and close to TabPane.Extra

0.4

• add optional third parameter showNow to select tab on init

0.3

• update to MooTools 1.4 (functional code unchanged)

0.2

• add closeTab based on index

0.1

• initial release

Credits

Credits where credits are due:

• @shakaran for suggesting the optional showNow parameter in the constructor

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.