Tabslet : A jQuery plugin for Tabs

Feb 25, 2014 in Tabs 5464 views

Download

Overview
Documents

User Rating: 4.3/5 ( 1 votes)

Your Rating:

Features

Beyond the standard tabs functionality:

Change tabs on mouse over
Use animation effect for tabs' changing
Ability to use either href or alt attribute to target tab
Rotation
Controls
Custom events

Compatibility

Compatible with IE7+, Chrome, Firefox, Safari and jQuery 1.8.1+.

Setup instructions

Include jQuery at your document's footer

<script type="text/javascript" src="jquery-2.0.2.min.js">

Include Tabslet

<script type="text/javascript" src="jquery.tabslet.min.js">

Create the following html structure

<div class='tabs'>
    <ul class='horizontal'>
        <li><a href="#tab-1">Tab 1</a></li>
        <li><a href="#tab-2">Tab 2</a></li>
        <li><a href="#tab-3">Tab 3</a></li>
    </ul>
    <div id='tab-1'></div>
    <div id='tab-2'></div>
    <div id='tab-3'></div>
</div>

Initialize Tabslet using the following two ways

Default way

$(document).ready(function() {
    $('.tabs').tabslet();
});

Using a data attribute

<div class='tabs' data-toggle="tabslet">

Options

Default Options

$('.tabs').tabslet({
    mouseevent:   'click',
    attribute:    'href',
    animation:    false,
    autorotate:   false,
    pauseonhover: true,
    delay:        2000,
    active:       1,
    controls:     {
        prev: '.prev',
        next: '.next'
    }
});

"mouseevent" option

Select tab on click or on hover
options: click, hover

$('.tabs').tabslet({
    mouseevent: 'hover'
});

"attribute" option

Use href or alt attribute to select tabs
options: href, alt

$('.tabs').tabslet({
    attribute: 'alt'
});

"animation" option

Enables javascript animation effect on tabs change
options: false, true

$('.tabs').tabslet({
    animation: true
});

"autorotate" option

Enables automatic rotation of the tabs
options: false, true

$('.tabs').tabslet({
    autorotate: true
});

"pauseonhover" option

Stops autorotation as long as the mouse is over the tabs
options: false, true

$('.tabs').tabslet({
    autorotate: true,
    pauseonhover: true
});

"delay" option

Sets the delay on automatic rotation
options: number in ms

$('.tabs').tabslet({
        autorotate: true,
    delay: 6000
});

"controls" options

Set previous and next element
options: element class

$('.tabs').tabslet({
    controls: {
        prev: '.prev',
        next: '.next'
    }
});

"active" option

Select which tab will be visible at the beginning
options: number

$('.tabs').tabslet({
        active: 1
});

JS Tutorial