Alternatives and detailed information of ion.tabs

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

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

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

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

IonDen / ion.tabs

Programming Languages