Smart Tab: Documentation

flexible jQuery Tab Control plug-in

Getting Started

Basic Usage:
  $('#tabs').smartTab();
Using with option 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
});  


Installing Smart Tab

Step 1: Include Files

Include the javascript and css files to your page
Files are:
  1. jQuery Library file (Don't include if already have it on your page)
  2. CSS(Style Sheet) file for Smart Tab
  3. Javascript plugin file for Smart Tab

To include the files copy and paste the below lines inside the <head> tag of your page.
Make sure the path to the files are correct with your working enviorment.
  <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> 
  <script type="text/javascript" src="js/jquery.smartTab.min.js"></script> 
  <link href="styles/smart_tab.css" rel="stylesheet" type="text/css">

Step 2: The JavaScript

Inititialize the Smart Tab, copy and paste the below lines inside the <head> tag of your page
  <script type="text/javascript">
     $(document).ready(function(){
        $('#tabs').smartTab();
     });
  </script>

Step 3: The HTML

Finally the html, below shows the HTML markup for the Smart Tab, You can customize it by including your on contents for each tab.
Copy and paste the below html inside the <body> tag of your page.
<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>

Load Ajax Contents

  <script type="text/javascript">
     $(document).ready(function(){
        $('#tabs').smartTab({contentURL: 'service.php',contentCache:false});
     });
  </script>

Using Events

  <script type="text/javascript">
     $(document).ready(function(){
        $('#tabs').smartTab({onLeaveTab: function(){alert("Tab is leaving")},
                                onShowTab: function(){alert("Tab is shown")}});
     });
  </script>

Using External Anchors

  <script type="text/javascript">
    $(document).ready(function(){
    	// Smart Tab
  	$('#tabs').smartTab({autoProgress: false,stopOnFocus:true,transitionEffect:'vSlide'});
    });
    
    function showST(tab_index){
      $('#tabs').smartTab('showTab',tab_index);
    } 
  </script>
  <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>

Programmer in PHP and C# with added interest in jQuery, Bootstrap, HTML and CSS. Believes that the code should be as beautiful as the design.

Comments