Ion.Tabs – stylish jQuery tabs plugin

Really nice jQuery tabs plugin with events and skins Support – try Ion.Tabs!

Easy and well done jQuery tabs plugin with useful features

Ion.Tabs is an easy to use, stylish and touch-friendly jQuery tabs plugin, that allows us to create customizable tabbed content with callback events and skins support.

Key features:

– supports many groups of tabs at one page

– handling events and callbacks

– skin support

– support many types of position saving, for each tabs group on the page

– very easy in set up and customisation

– public methods for outside control!

– cross-browser support: Google Chrome, Mozilla Firefox, Opera, Safari, IE(8.0+)

– touch-devices support (iPhone, iPad, etc.).

– multiple instances on one page

Ion.Tab plugin
Ion.Tab plugin

Dependencies: jQuery 1.7+

License: MIT

Usage

1. Add the following libraries and CSS files to the page:

– jQuery
– ion.tabs.min.js

– normalize.min.css
– ion.tabs.css

2. Two skins are included, you can pick up one of:

– ion.tabs.skinBordered.css

– ion.tabs.skinFlat.css

3. Create HTML structure for the content:

<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</li>
        <li class="ionTabs__tab" data-target="Tab_2_name">Tab 2</li>
        <li class="ionTabs__tab" data-target="Tab_3_name">Tab 3</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>

4. Init jQuery tabs plugin:

$.ionTabs("#tabs_1"); 

// or, if you have many tabs groups on the page:
// $.ionTabs("#tabs_1, #tabs_2, #tabs_3");

Ready!

The demo is available here.

Get the plugin from GitHub:

https://github.com/IonDen/ion.tabs

See also:

A great jQuery web UI library – w2ui

Enjoy!

Share:Share on Facebook0Share on Google+1Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest100