Archive: jQuery Smart Tab v2

jQuery Smart Tab is a jQuery plugin for tabbed interface. It is flexible and very easy to implement. It has a lot of features that you will love and it is completely open source. It can load ajax contents, have a verity of themes, cool animation effects, event supports, easy to customize.

Demo

• Basic Layout
• Bottom Layout
• Vertical Layout
• Multiple Tab

Downloads

Download jQuery Smart Tab v2.0.0

Features

• Ajax Contents: It can load ajax contents
• Browser Support: Support all modern browsers
• Auto Height: Automatically adjust the content height
• Save State: Automatically saves the current tab position and regain on page load
• Auto Progress: option for automatic navigation of tabs.
• Keyboard Navigation: Use left/right keyboard keys to navigate through tabs
• Transition Effects:- Cool transition effects (hslide/vslide/slide/fade )on tab transition.
• Easy to implement, Minimal HTML required.
• Customizable Easily customisable theme and tab anchors
• Event Support: OnLeaveTab and OnShowTab events
• External anchors: External anchors can be used for tab navigation

Documentation

Requirements

1. jQuery

Include Smart Tab JavaScript & CSS files

<script type="text/javascript" src="js/jquery.smartTab.min.js"></script>
<link href="styles/smart_tab.css" rel="stylesheet" type="text/css">

Initialize Smart Tab

$(document).ready(function(){
  $('#tabs').smartTab();
});

The HTML 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>

That is it!

More Options

With Parameters

$('#tabs').smartTab({
  selected: 0,  // Selected Tab, 0 = first tab
  saveState:true, // Remembers tab selection
  contentURL:null, // content url, Enables Ajax content loading. ex: 'service.php'
  contentCache:true, // Cache Ajax content
  keyNavigation:true, // Enable/Disable keyboard navigation(left and right keys are used if enabled)
  autoProgress:false, // Auto navigate tabs on interval
  progressInterval: 3500, // Auto navigate Interval (used only if "autoProgress" is set to true)
  stopOnFocus:false, // Stop auto navigation on focus and resume on outfocus
  transitionEffect:'none', // Effect on navigation, none/hslide/vslide/slide/fade
  transitionSpeed:'400', // Transition animation speed
  transitionEasing:'easeInOutExpo', // Transition animation easing
  autoHeight:true, // Automatically adjust content height
  onLeaveTab: null, // triggers when leaving a tab
  onShowTab: null  // triggers when showing a tab
});

Ajax Contents

$('#tabs').smartTab({
  contentURL: 'service.php',
  contentCache: false
});

Events

$('#tabs').smartTab({
  onLeaveTab: function(){ alert("Tab is leaving") },
  onShowTab: function(){ alert("Tab is shown") }
});

Using External Anchors

// Smart Tab
$('#tabs').smartTab({
  autoProgress: false,
  stopOnFocus:true,
  transitionEffect:'vSlide'
});

function showST(tab_index) {
  $('#tabs').smartTab('showTab', tab_index);
}

<a class="stLinks" onclick="showST(0);" href="#">Show Tab 1</a>
<a class="stLinks" onclick="showST(1);" href="#">Show Tab 2</a>
<a class="stLinks" onclick="showST(2);" href="#">Show Tab 3</a>
<a class="stLinks" onclick="showST(3);" href="#">Show Tab 4</a>

License

Released under the terms of the MIT License (more). You are free to use on both personal and commercial environment as long as the copyright header is left intact.