Ion.Tabs 1.0.2. jQuery tabs plugin.
Easy and well done tabs with many options and skin support
Feedback and support
If you find some bugs or missing functional in plugins, use Issues page on GitHub
Adv
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.).
- GitHub page.
- Ion.Tabs freely distributed under terms of MIT licence.
Demos
- Information
- Description
- Useful things
Color is more than just a hue. It expresses a feeling. Makes a statement. Declares an allegiance. Color reveals your personality. iPhone 5c, in five anything-but-shy colors, does just that. It’s not just for lovers of color. It’s for the colorful.
A6 chip. 8MP iSight camera. 4-inch Retina display. Ultrafast LTE wireless. iPhone 5c has the things that made iPhone 5 an amazing phone — and more, including iOS 7. All in a completely new design that feels great in your hand.
Every feature we add to iPhone must answer yes to one question: Will it make the experience better? So the colors of iPhone 5c received the same intense consideration we apply to everything we make. We even designed the Home screen and wallpaper colors to complement the exterior. As a result, using iPhone is that much more engaging and delightful.
- History
- Mission
- Progress
- Gallery
- Contacts
With an all-new design, this is iPhone as you’ve never seen it — or held it. iPhone 5c is beautifully, unapologetically plastic, the better to bring its five decidedly uncommon colors to life. Beneath the smooth surface of the seamless outer shell, a steel-reinforced frame provides structural integrity. So iPhone 5c feels reassuringly solid in your hand.
Oh, how quickly things change. Add one of the six Apple‑designed cases to your iPhone 5c and it instantly goes from colorfully cool to impossible to ignore. The case design allows the color underneath to show through, creating 30 fun possibilities. So the iPhone 5c Case does more than just protect your phone — it helps it stand out. And it helps you make it yours.
Launch your favorite apps. Load your favorite blog. Download and watch the jaw-dropping video that just showed up in your inbox. Power through games with console-level graphics. Do all the things you love doing on iPhone — at the speeds you’ve come to expect.
iPhone 5c has up to 13 LTE bands. That’s more than any other single model of smartphone. Which means even more iPhone users can experience fast download and upload speeds in more places around the world. Meanwhile, the number of LTE carriers supported by iPhone worldwide continues to grow. So when you’re traveling, you can take advantage of ultrafast LTE networks in more places.
The 8MP iSight camera delivers startlingly sharp photo quality thanks to features like a sophisticated five‑element lens. And panorama, which lets you get stunning high‑resolution shots of things like packed soccer stadiums. The San Francisco waterfront. Or the high school marching band your friend hired to play “Happy Birthday” outside your window.
window.event "ionTabsChange"
Result 1
callback "onChange"
Result 2
Dependencies
Usage
Add the following libraries to the page:
- 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"); or $.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
- November 01, 2013 - Fixed bug with setTab method
- October 19, 2013 - Fixed some minor bugs, many code optimisations, fixed some bugs in plugin description
- September 15, 2013 - Plugin release
