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 -lX

or use ready files in directories.

Change Log

v1.0 - Mar 09, 2015

• Initialize version 1.0

License

This is licensed under the MIT License.