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 |
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)
- JS update.
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.