Flexible Tabbed Interface jQuery Plugin – SmartTab

Flexible-jQuery-Tabbed-SmartTab
File Size:55.15 KB
Views Total:293
Last Update:February 14, 2018
Publish Date:February 14, 2018
Official Website:Go to website
License:MIT

SmartTab is a powerful and highly customizable jQuery plugin for creating tabbed interface with different-different cool animation effects. tabs open in slider efffect. It supports Basic Layout,Bottom Layout,Ajax Contents,Vertical Layout,Multiple Tab, Keyboard Navigationand is compatible with all  majorbrowsers.

More Examples:

  • Normal
  • Bottom
  • Multiple
  • Vertical

How to use :

1.  Add 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. Add Vertical layout CSS file :

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

3. Add Html  tab structure :

<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. Other plugins parameters  :

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

Done

Change Log

2015-02-02

  • updated.