jTab
This is “Displays content in tabs for jQuery framework” Check out the demo
Required
- jQuery framework >= 1.8
- [* JRE for build]
Features
- Light weight (min. 5KB code)
- Cross browser support (IE, Chrome, Firefox, Opera, Vivaldi)
- Load contents in tab using Ajax
- Wide API interfaces
- Easy to adapt skins, customize the way you like
- Supports custom animations
- Customize the way you like
How to Use
Install the tab in the footer
<script src="/javascript/jtab.jquery.min.js"></script> <script>$(function() {$('#tab').jtab()});</script>Markup is pretty straightforward, it looks something like this
<ul id="tab" class="jtab-ul"> <li><a href="#tab1">one</a></li> <li><a href="#tab2" data-content="content.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="tab2" class="jtab-content">...Rescue Content #tab2...</div> <div id="tab3" class="jtab-content">...Content #tab3...</div> <div id="tab4" class="jtab-content">...Content #tab4...</div> <div id="tab1" class="jtab-content">...Content #tab1...</div> </div>or add special class for your <ul> element <ul class="jtab-trigger jtab-ul">. Following the order (tab2, tab3... tab1) used to display the activity tabs even without javascript!
Options
| Option | Default | Description |
|---|---|---|
| start | 1 | [number] Start init tab |
| params | false | [boolean] or [object] Additional data to be ajax sent |
| trackingHash | true | [boolean] Tracking browser url - hash |
Callback
| Option | Default | Description |
|---|---|---|
| callback.init | $.noop | [function] Callback init tab |
| callback.trigger | $.noop | [function] Callback trigger callback function |
| callback.change | function (data) | [function] Callback change tab |
| callback.select | function (data, event) | [function] Callback select tab |
| callback.content | function (data) | [function] Callback loading content in tab |
| callback.hash | function (data) | [function] Callback change browser url - hash |
Animate
| Option | Default | Description |
|---|---|---|
| animate.open | false | [boolean] or [function] Animate effect open tab |
| animate.close | false | [boolean] or [function] Animate effect close tab |
Using Animations
$('#tab').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(); } } });Build
cd ~ && git clone https://github.com/demorfi/jtab.git jtab && cd jtab make && ls builds -lX # rebuild make clean && make && ls builds -lXor use ready files in directories.
Change Log
v1.0 - Mar 09, 2015
- Initialize version 1.0
License
This is licensed under the MIT License.
