Matt Tabs

A simple, unobtrusive jQuery plugin for creating tabbed interfaces.

View the demo.

Build

Usage

Matt Tabs tries to be as lightweight and unobtrusive as possible. As such, it doesn't require any additional HTML to be added into your markup to use for a tabs menu. Instead, when mtabs is applied to an element it will use pre-existing markup for the tab text and then will build and insert all the HTML it needs.

The element used for the tab text, amongst other things, can be adjusted as described below. A full list of customisable options is also below.

Basic

Basic usage is simple:

$('.container').mtabs();

Converts all the children of .container into tabs and inserts the tabs menu before them.

Adjusting the tab text element

If you need to you can change the element used to generate the tab text for the menu.

This is done by supplying a valid jQuery selector to the tab_text_el property when initialising Matt Tabs on an element.

$('.container').mtabs({
    tab_text_el: '.heading'
});

The plugin will then find the first .heading element within each child of .container and use that instead.

Also, you can supply multiple selectors separated by a comma if, for example, .heading wasn't available in each element. Something like this: .heading, .header.

Callbacks

onReady

$('.container').mtabs({
    onReady: function () {
        // Do something here...
    }
});

Called when .mtabs has been fully instantiated.

onTabSelect

$('.container').mtabs({
    onTabSelect: function (idx) {
        // Do something here...
    }
});

onTabSelect is fired every time a tab is selected. The function is passed the index of the selected tab as an argument.

Methods

.mtabs('show', index)

Show particular tab in a given tab set. Index is 0-based.

For example, this will show the third tab in a tab set:

$('.container').mtabs('show', 2);

.mtabs('destroy')

Destroys a current instance of .mtabs, removing all data and addional HTML added by the plugin.

$('.container').mtabs('destroy');

Options

• container_class: Specifies class name(s) applied to the overall wrapping element. Default is tabs.
• tabs_container_class: Specifies class name(s) applied to tabs content wrapping element. Default is tabs-content.
• active_tab_class: Specifies class name for currently active tab. Default is active-tab.
• tab_text_el: Specifies element to generate the text from for each tab name. Default is the first h1-6 element within each element.
• tabmenu_class: Specifies class name(s) applied to the tabs menu element. Default is tabs-menu.
• tabsmenu_el: Specifies element to use as a wrapper for tabs menu items. Default is a ul element.
• tmpl: Templates used for building HTML structures.
• onTabSelect: Optional callback function to be executed when tab switch occurs. Receives the index of the selected tab as an argument. Default is no callback.
• onReady: Optional callback function executed when Matt Tabs setup is complete.

Requires

• jQuery 1.7+

Browser Support

• Chrome
• Firefox 3.6+
• Safari 4+
• Opera 10+
• IE6+

Forecast

Here's a few of the features I had in mind for future releases of Matt Tabs:

• Show a tab based on URL parameters. This would allow linking to a URL and showing a specific possible with something like this: http://example.com/?mtabs-1=3. This would show tab number 3 in the first set of Matt Tabs on the page.
• Optional fade transitions for hiding and showing tab content.