Tabs

A jQuery plugin that provides dynamic tab functionality to transition through panes of local content. Uses CSS transitions to perform the animation.

Comes with a markup API that allows running the plugin without writing a single line of JavaScript. This is Responsive's first class API and should be your first consideration when using a plugin.

Accessibility

Keyboard support comes as standard with triggers responding to both space and enter. It can be utilised also to navigate between panes by using the LEFT, and RIGHT keys.

Right-to-Left Language Support

Adding the attribute dir="rtl" to the html tag will reverse all directional input behaviour.

Examples

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

I am nested

Exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.

Markup

<div class="tabs" data-tabs="">
    <ul>
        <li class="tab-active"><a href="#">tab1</a></li>
        <li><a href="#">tab2</a></li>
    </ul>
    <section class="tab-pane-active">
        ....
    </section>
    <section>...</section>
</div>

Methods

The tabs plugin exposes the following method signatures.

.tabs(index): Initialises the plugin with an optional index parameter. A zero based indicator for which tab to show.

Events

The tabs plugin exposes the following events allowing the developer to tap into its behaviour.

show.r.tabs: This event is fired immediately when the plugins show instance method is invoked.
shown.r.tabs: This event is fired when the plugins shown instance method is invoked once the tab has completed the animation and the new pane is visible.

Data API

The tabs plugin's default behaviour is bound using a markup API that allows running the plugin without writing a single line of JavaScript. If you need to override this behaviour the following code will allow you to do so.

// Override the default behaviour
$(document).off("ready.r.tabs domchanged.r.tabs")
           .on("ready.r.tabs domchanged.r.tabs", function (event) {
    // Your custom behaviour...
}); 

// Bind to the show event.
$("YOUR_SELECTOR").on("show.r.tabs", function(event) {
    // Your custom behaviour...
});
                                               
// Bind to the shown event.
$("YOUR_SELECTOR").on("shown.r.tabs", function(event) {
    // Your custom behaviour...
});