Flexible jQuery Tabbed Interface Plugin - SmartTab

Flexible jQuery Tabbed Interface Plugin - SmartTab
File Size: 56.7 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

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">
<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>
<div id="tabs-1">
<h2>Tab 1 Content</h2>
<div id="tabs-2">
<h2>Tab 2 Content</h2>
<div id="tabs-3">
<h2>Tab 3 Content</h2>
<div id="tabs-4">
<h2>Tab 4 Content</h2>

4. Call the plugin with options

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

5. All the default options.

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

// Remembers tab selection 

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

// Cache Ajax content

// Enable/Disable keyboard navigation(left and right keys are used if enabled)

// Auto navigate tabs on interval

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

// Stop auto navigation on focus and resume on outfocus

// Effect on navigation, none/hslide/vslide/slide/fade

// Transion animation speed

// Transition animation easing

// Automatically adjust content height

// triggers when leaving a tab
onLeaveTab: null, 

// triggers when showing a tab
onShowTab: null  

More Examples:

Change log:


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