Lightweight jQuery Tabs Plugin With Animation and Rotation - Tabslet

File Size: 92.6 KB
Views Total: 11878
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Lightweight jQuery Tabs Plugin With Animation and Rotation - Tabslet

Tabslet is a lightweight (~2kb minified) jQuery plugin that allows you to create tabbed content with support for animation effect, tabs rotation and trigger events. Licensed under the Apache License, Version 2.0 (the "License")

Basic Usage:

1. Create the html for the tabbed interface

<div class="tabs tabs_rotate">
<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">
<h3>Tab #1</h3>
<p> Content #1 </p>
</div>
<div id="tab-2">
<h3>Tab #2</h3>
<p> Content #2 </p>
</div>
<div id="tab-3">
<h3>Tab #3</h3>
<p> Content #3 </p>
</div>
</div>

2. Load the jQuery library and jQuery tabslet plugin at the appropriate point in your page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="javascripts/vendor/jquery.tabslet.js"></script> 

3. Initialization with options

$(document).ready(function() {
$('.tabs_rotate').tabslet({
autorotate: true,
delay: 6000
});
});

4. All the options

// Select tab on click or on hover
mouseevent:   'click',

/ Use href or alt attribute to select tabs
attribute:    'href',

// Enables javascript animation effect on tabs change
animation:    false,

// Enables automatic rotation of the tabs
autorotate:   false,

// Stops autorotation as long as the mouse is over the tabs
pauseonhover: true,

deeplinking:  false,

// Sets the delay on automatic rotation
delay:        2000,

// Select which tab will be visible at the beginning
active:       1,

container:    false,

// Set previous and next element
controls:     {
  prev: '.prev',
  next: '.next'
}

5. Style and customize your tabs via CSS depending on your preferences

Change logs:

v1.7.3 (2016-11-22)

  • bugfix

v1.7.2 (2016-06-27)

  • bugfix

v1.7.2 (2016-02-10)

v1.7.1 (2016-01-07)

  • Fix minor sysntax error in strict mode

v1.7.0 (2015-09-27)

  • update.

This awesome jQuery plugin is developed by vdw. For more Advanced Usages, please check the demo page or visit the official website.