Stylish Ajax-enabled jQuery Tabs Plugin - jTab
File Size: | 22.8 KB |
---|---|
Views Total: | 3790 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

jTab is a lightweight jQuery tabs plugin used to create an animated & nice looking tabbed interface that has supports for AJAX content, hash tracking, custom animations and lots of APIs.
How to use it:
1. Load the latest version of jQuery JavaScript library in your webpage.
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
2. Load the jQuery jTab plugin's JS and CSS after jQuery library.
<link rel="stylesheet" href="stylesheets/jtab.min.css"> <script src="javascript/jtab.jquery.min.js"></script>
3. Create the tabbed navigation & panels. You can use data-content attribute to specify an external URL you wish to embed into the tab via AJAX request.
<ul class="jtab-trigger jtab-ul"> <li> <a href="#tab1">one</a> </li> <li> <a href="#tab2" data-content="ajax.html #content">two</a> </li> <li> <a href="#tab3">three</a> </li> <li> <a href="#tab4">four</a> </li> </ul> <div class="jtab-content-list"> <div id="tab1" class="jtab-content"> Content 1 </div> <div id="tab2" class="jtab-content"> Content 2 </div> <div id="tab3" class="jtab-content"> Content 3 </div> <div id="tab4" class="jtab-content"> Content 4 </div>
4. An anonymous call to the class .jtab-trigger.
$(function (){ $('.jtab-trigger').jtab(); });
5. Options and callbacks.
// Start init tab start: 1, // Additional data to be ajax sent // [boolean] or [object] params false, // Tracking browser url - hash trackingHash true, // Callback init tab callback.init: $.noop, // Callback trigger callback function callback.trigger $.noop, // Callback change tab callback.change function (data) {}, // Callback select tab callback.select function (data, event) {}, // Callback loading content in tab callback.content function (data) {}, // Callback change browser url - hash callback.hash function (data) {},
6. Custom animations.
$('SELECTOR').jtab({ animate: { open: function (obj){ $(obj).stop().css({'opacity': 0}).show().animate({'opacity': 1}, 800); }, close: function (obj){ $(obj).stop().animate({'opacity': 0}, 800).hide(); } } });
Change log:
2015-12-04
- Fixed bug of change hash
This awesome jQuery plugin is developed by demorfi. For more Advanced Usages, please check the demo page or visit the official website.