Smart Tab - a javascript jquery tab control plugin

Overview:

Smart Tab is a flexible jQuery(a JavaScript library) Tab Control plugin.

Current Version : 0.99

Screenshots:

Demo:

1. Basic Layout view demo
2. Vertical Layout view demo
2. Bottom Layout view demo

Download:

Version - 0.99(SmartTab - 0.99.zip) Download file from SourceForge

Features:

• Customizable tab anchors, can use images.
• AutoProgress:- option for automatic navigation of tabs.
• AutoProgress can be stopped when mouse hover on control and restarts when not.
• Keyboard Navigation:- Use left/right keyboard keys to navigate through tabs(try on demo).
• Transition Effects:- option for fade/slide effects on tab transition.
• Option for specifying the selected tab.
• Easly can impliment Top, Bottom and Vertical style layout(see the demo).
• Easy to implement, Minimal HTML required.

Getting Started:

Basic Usage:

$('#tabs').smartTab();

With option parametrs:

$('#tabs').smartTab({
      selected: 0,  // Selected Tab, 0 = first step   
      keyNavigation:true, // Enable/Disable key navigation
      autoProgress:false, // Auto navigate tabs on interval
      progressInterval: 3500, // Auto navigate Interval
      stopOnFocus:false, // Stops autoProgress on mouse hover and restarts when not
      transitionEffect:'none', // Effect on navigation, none/fade/slide
      tabContainerClass:'stContainer' // tab container css class name
});  
  

Installing Smart Tab:

Step 1: Get the latest version of jQuery(www.jquery.com)
Step 2: Download the Smart Tab (http://tech-laboratory.blogspot.com)
Step 3: Include following lines to head section of your html file (Make sure that the path to the files are correct).

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

Step 4: Copy the below lines to your head section

<script type="text/javascript">
   $(document).ready(function(){
      $('#tabs').smartTab();
   });
</script>

Step 5: Copy the below html to the body section.

<div id="tabs" class="stContainer">
    <ul>

      <li><a href="#tabs-1">
            <img class='logoImage2' border="0" width="50px" src="images/Step1.png">
            <h2>Tab 1<br />
            <small>Description</small></h2>

          </a></li>
      <li><a href="#tabs-2">
            <img class='logoImage2' border="0" width="50px" src="images/Step2.png">
            <h2>Tab 2<br />
            <small>Description</small></h2>

          </a></li>
      <li><a href="#tabs-3">
            <img class='logoImage2' border="0" width="50px" src="images/Step3.png">
            <h2>Tab 3<br />
            <small>Description</small></h2>

          </a></li>
      <li><a href="#tabs-4">
            <img class='logoImage2' border="0" width="50px" src="images/Step4.png">
            <h2>Tab 4<br />
            <small>Description</small></h2>

          </a></li>
    </ul>
    <div id="tabs-1">
        <h2>Tab 1 Title</h2> 
        <p>Tab 1 Content here</p>     
      </div>

    <div id="tabs-2">
        <h2>Tab 2 Title</h2> 
        <p>Tab 2 Content here</p>     
      </div>                      
    <div id="tabs-3">
        <h2>Tab 3 Title</h2> 
        <p>Tab 3 Content here</p>                        
      </div>

    <div id="tabs-4">
        <h2>Tab 4 Title</h2> 
        <p>Tab 4 Content here</p>
      </div>
</div>

Finished: That all, you are set to Go. I'm happy to hear comments and feedback from you. Happy Coding!!!