jQuery Plugin For Simple Nice Tab Slider - TabIt
File Size: | 7.02 KB |
---|---|
Views Total: | 8078 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

TabIt is a small, simple jQuery plugin for transforming selected elements into a nice tab slider which allows you to navigate between content slides with tabs.
How to use it:
1. Add jQuery library and the jQuery tabit plugin to your html page.
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <script src="plugin.tabit.js"></script>
2. Wrap your html content into the DIV elements. data-tab-title
attribute is used to specify the name of the tabs.
<div class="demo" data-tab-title="First Tab"> ... Content 1 ... </div> <div class="demo" data-tab-title="Second Tab"> ... Content 2 ... </div> <div class="demo" data-tab-title="Third Tab"> ... Content 3 ... </div> ...
3. Call the plugin with default settings.
$(".demo").tabIt();
4. Style the tab slider in the CSS.
.wrap-tabs, .wrap-tab-contents { width: 100%; float: left; } .tabs .tab { float: left; padding: 5px; margin: 0 10px 10px 0; border-bottom: 3px solid #eee; color: #aaa; } .tabs .tab:hover { cursor: pointer; border-bottom: 3px solid #aaa; color: #000; } .tabs .tab-active, .tabs .tab-active:hover { color: #000; border-bottom: 3px solid #6C9; } .tab-contents { position: relative; }
5. General settings.
$(".demo").tabIt({ // Default function to get the label for tab section get_tab_label : getTabLabel, // data attribute to get the tab label tab_label_attr : "data-tab-title", // fly, fade or none open_tab_animation : "fly", // animation duration in ms animation_duration : 300, // If tab to be opened is defined in the settings, open this tab // Otherwise open first tab auto_open_tab : null });
Change log:
2015-12-12
- ADD sliding actions to tabs when screen/wrapper is too small to fit all tabs
- FIX mobile browser issues
This awesome jQuery plugin is developed by julianburr. For more Advanced Usages, please check the demo page or visit the official website.