JavaScript CSS
Latest commit 922c96d Nov 5, 2015 @IonDen Update readme
Permalink
Failed to load latest commit information.
_tmp Logo added Sep 19, 2015
css Plugin release Sep 15, 2013
img Plugin release Sep 15, 2013
js Update to 1.0.2 Nov 1, 2013
history.md Readme update Sep 19, 2015
ion-tabs.jquery.json Update to 1.0.2 Nov 1, 2013
readme.md Update readme Nov 5, 2015
readme.ru.md Update readme Nov 5, 2015

readme.md

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

Usage

Import this libraries:

  • jQuery
  • ion.tabs.min.js

Add the following stylesheets to the page:

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: