🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

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.).

Plugins Tabs

Documentation

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:


You May Also Like