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
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
6 Dec 8, 2022
1 Feb 23, 2022
83 Nov 27, 2022
537 Dec 8, 2022
554 Dec 4, 2022
7 Dec 20, 2022
8 Nov 19, 2021
208 Jan 8, 2023
74 Dec 31, 2022
5 May 7, 2022