https://github.com/IonDen/ion.tabs
jQuery tabs plugin
https://github.com/IonDen/ion.tabs
Last synced: 22 days ago
JSON representation
jQuery tabs plugin
- Host: GitHub
- URL: https://github.com/IonDen/ion.tabs
- Owner: IonDen
- Archived: true
- Created: 2013-09-15T14:43:37.000Z (about 12 years ago)
- Default Branch: master
- Last Pushed: 2015-11-05T11:51:46.000Z (about 10 years ago)
- Last Synced: 2024-05-02T00:00:56.416Z (over 1 year ago)
- Language: JavaScript
- Homepage: http://ionden.com/a/plugins/ion.tabs/en.html
- Size: 219 KB
- Stars: 83
- Watchers: 9
- Forks: 29
- Open Issues: 11
-
Metadata Files:
- Readme: readme.md
- Changelog: history.md
Awesome Lists containing this project
- awesome-frontend - ion.tabs - jQuery tabs plugin
- awesome-frontend - ion.tabs - jQuery tabs plugin
- awesome-front-end - ion.tabs - jQuery tabs plugin
README
> 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:
```html
- Tab 1 name
- Tab 2 name
- Tab 3 name
Tab 1 content
Tab 2 content
Tab 3 content
```
To initialise tabs, call $.ionTabs("selector"):
```javascript
$.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:
```javascript
$.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:
```javascript
$(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);:
```javascript
$(".myButton").on("click", function(){
$.ionTabs.setTab("Tabs_Group_name", "Tab_1_name");
});
```
### Update history
***
#### Support Ion-series plugins development:
* Donate through Pledgie service: [](https://pledgie.com/campaigns/25694)
* Donate direct to my Paypal account: https://www.paypal.me/IonDen
* Donate direct to my Yandex.Money account: http://yasobe.ru/na/razrabotku