Home

Awesome

ion.tabs

English description | <a href="readme.ru.md">Описание на русском</a>

jQuery tabs plugin. Easy and well done tabs with many options and skin support

Description

Dependencies

Usage

Import this libraries:

Add the following stylesheets to the page:

Plus, a skin for the tabs. Two skins are included:

Initialisation

Create this HTML structure:

<div class="ionTabs" id="tabs_1" data-name="Tabs_Group_name">
    <ul class="ionTabs__head">
        <li class="ionTabs__tab" data-target="Tab_1_name">Tab 1 name</li>
        <li class="ionTabs__tab" data-target="Tab_2_name">Tab 2 name</li>
        <li class="ionTabs__tab" data-target="Tab_3_name">Tab 3 name</li>
    </ul>
    <div class="ionTabs__body">
        <div class="ionTabs__item" data-name="Tab_1_name">
            Tab 1 content
        </div>
        <div class="ionTabs__item" data-name="Tab_2_name">
            Tab 2 content
        </div>
        <div class="ionTabs__item" data-name="Tab_3_name">
            Tab 3 content
        </div>

        <div class="ionTabs__preloader"></div>
    </div>
</div>

To initialise tabs, call $.ionTabs("selector"):

$.ionTabs("#tabs_1");                       // one tabs group
$.ionTabs("#tabs_1, #tabs_2, #tabs_3");     // if you have many tabs groups on the page

Settings

<table class="options"> <thead> <tr> <th>Property</th> <th>Default</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td>type</td> <td><code>hash</code></td> <td> Optional property, choose position saving type:<br/> <code>hash</code> — save tabs position to the site url, using hash (see the example in the address bar). Allows to send tabs position via links.<br/> <code>storage</code> — save tabs position to the Local Storage. Tabs position is remembered only at one computer.<br/> <code>none</code> — don't save tabs position. Each time page reloads, the first tab of each group will be open.<br/> </td> </tr> </tbody> </table>

Callback and events

<table class="options"> <thead> <tr> <th>Property</th> <th>Default</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td>onChange</td> <td>-</td> <td>Calls each time you switch tabs, returns object with group name, active tab name and active tab ID.</td> </tr> <tr> <td>window.event <code>ionTabsChange</code></td> <td>-</td> <td>Or you can subscribe on <code>ionTabsChange</code> event.<br/>The event gets the same object as <code>onChange</code> callback.</td> </tr> </tbody> </table>

An example of a tabs initialisation:

$.ionTabs("#tabs_1, #tabs_2", {
    type: "storage",                    // hash, storage or none
    onChange: function(obj){            // callback
        console.log(obj);
    }
});

To subscribe on tabs change event you can do this:

$(window).on("ionTabsChange", function(e, obj){
    console.log(obj.group);
    console.log(obj.tab);
    console.log(obj.tabId);
});

Public methods

Switching tabs from outside: <code>$.ionTabs.setTab(group, tab);</code>:

$(".myButton").on("click", function(){
    $.ionTabs.setTab("Tabs_Group_name", "Tab_1_name");
});

<a href="history.md">Update history</a>

Support Ion-series plugins development: