Flexible jQuery Tabbed Interface Plugin - SmartTab

SmartTab is a powerful and highly customizable jQuery plugin for creating tabbed interface with cool animation effects. It supports ajax contents, Keyboard Navigation and is compatible with all major browsers.

Basic Usage (Vertical Layout):

1.  Include jQuery library and SmartTab.js in your head

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery.smartTab.js"></script>

2. Include Vertical Layout CSS

<link href="styles/smart_tab_vertical.css" rel="stylesheet" type="text/css">

3. Markup

<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab 1<br />
<small>This is tab's description</small> </a></li>
<li><a href="#tabs-2">Tab 2<br />
<small>This is tab's description</small> </a></li>
<li><a href="#tabs-3">Tab 3<br />
<small>This is tab's description</small> </a></li>
<li><a href="#tabs-4">Tab 4<br />
<small>This is tab's description</small> </a></li>
</ul>
<div id="tabs-1">
<h2>Tab 1 Content</h2>
...
</div>
<div id="tabs-2">
<h2>Tab 2 Content</h2>
...
</div>
<div id="tabs-3">
<h2>Tab 3 Content</h2>
...
</div>
<div id="tabs-4">
<h2>Tab 4 Content</h2>
...
</div>
</div>

4. Call the plugin with options

<script type="text/javascript">
    $(document).ready(function(){
  	$('#tabs').smartTab({
  	    autoProgress: false, // option for automatic navigation of tabs
  	    stopOnFocus:true, // Event
  	    transitionEffect:'vSlide' // Cool transition effects (hslide/vslide/slide/fade )on tab transition.
  	});
    });
</script>

5. All the default options.

// Selected Tab, 0 = first tab
selected: 0,  

// Remembers tab selection 
saveState:true, 

// content url, Enables Ajax content loading. ex: 'service.php'   
contentURL:null, 

// Cache Ajax content
contentCache:true, 

// Enable/Disable keyboard navigation(left and right keys are used if enabled)
keyNavigation:true, 

// Auto navigate tabs on interval
autoProgress:false, 

// Auto navigate Interval (used only if "autoProgress" is set to true)
progressInterval: 3500, 

// Stop auto navigation on focus and resume on outfocus
stopOnFocus:false, 

// Effect on navigation, none/hslide/vslide/slide/fade
transitionEffect:'none', 

// Transion animation speed
transitionSpeed:'400', 

// Transition animation easing
transitionEasing:'easeInOutExpo', 

// Automatically adjust content height
autoHeight:true,

// triggers when leaving a tab
onLeaveTab: null, 

// triggers when showing a tab
onShowTab: null  

More Examples:

• Normal
• Bottom
• Multiple
• Vertical

Change log:

2015-02-02

• update.

---

This awesome jQuery plugin is developed by techlab. For more Advanced Usages, please check the demo page or visit the official website.