English description | Описание на русском

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

---

• Version: 1.0.2
• Project page and demos
• Download ZIP

Description

• Supports many groups of tabs at one page.
• Generate events and callbacks.
• Support many types of position saving, for each tabs group on the page.
• Very easy in set up and customisation. Has skin support.
• Has public methods for outside control.
• Cross-browser support: Google Chrome, Mozilla Firefox, Opera, Safari, IE(8.0+)
• Ion.Tabs supports touch-devices (iPhone, iPad, etc.).
• Ion.Tabs freely distributed under terms of MIT licence.

Dependencies

• jQuery 1.7+

Usage

Import this libraries:

• jQuery
• ion.tabs.min.js

Add the following stylesheets to the page:

• normalize.min.css (If not already present)
• ion.tabs.css

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

• ion.tabs.skinBordered.css
• ion.tabs.skinFlat.css

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

Property	Default	Description
type	hash	Optional property, choose position saving type: hash — save tabs position to the site url, using hash (see the example in the address bar). Allows to send tabs position via links. storage — save tabs position to the Local Storage. Tabs position is remembered only at one computer. none — don't save tabs position. Each time page reloads, the first tab of each group will be open.

Callback and events

Property	Default	Description
onChange	-	Calls each time you switch tabs, returns object with group name, active tab name and active tab ID.
window.event ionTabsChange	-	Or you can subscribe on ionTabsChange event. The event gets the same object as onChange callback.

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: $.ionTabs.setTab(group, tab);:

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

Update history

---

Support Ion-series plugins development:

• Donate through Pledgie service:

• Donate direct to my Paypal account: https://www.paypal.me/IonDen

• Donate direct to my Yandex.Money account: http://yasobe.ru/na/razrabotku