This blog is outdated! Go to http://techlaboratory.net for latest updates

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

17 comments:

Tim April 22, 2010 at 1:25 AM  

Nice plugin, thank you!

if you write:
line 19: var tabs = $("ul:first > li > a", obj);
instead of
line 19: var tabs = $("ul > li > a", obj);

you can nest tabs :)

Tim April 22, 2010 at 2:55 AM  

line 19: var tabs = $("> ul > li > a", obj);

is even better, because you can define more "tab rows".

Fair May 14, 2010 at 3:14 AM  

if you write:
line 17: var obj = $(this);
instead of
line 17: obj = $(this);

you can use more than one tab element in the same page

Dipu R May 14, 2010 at 3:55 AM  

Hi Tim/Fair
Thanks a lot for your helpful suggestions,
and i will implement it on the next installment
of Smart Tab

Thank you once again...

李蓉仲 October 6, 2010 at 4:58 AM  

IS VERY GOOD..............................

Anonymous October 15, 2010 at 6:13 AM  

Thanks. I personally used this amazing script in my site.

Thank you and keep up the hard work ...

Ramon Rosa da Silva January 20, 2011 at 11:44 AM  

How I can change slide speed?

Thanks

Dipu R January 20, 2011 at 8:30 PM  

If you want to change the progress speed you can use


$('#tabs').smartTab({autoProgress: true, progressInterval: 2500);

Or if you want to change the slide animation speed you need to modify the plugin file (jquery.smartTab.js).

In the file you can search for 'slideDown' and 'slideUp' so the results will be like


$($(selTab, obj).attr("href"), obj).slideDown("slow");

$($(selTab, obj).attr("href"), obj).slideUp("slow",showTab);

in all these lines you can change the first parameter of slideDown and slideUp to change the animation speed. Currently its 'slow', but you can use 'slow', 'fast' or supply values in milliseconds like 200, 600 etc.

Anonymous February 19, 2011 at 9:48 AM  

Hello. Thank you for this plugin!

How can I switch to for example tab 1 using javascript, please?

Thank you.

Dipu R February 20, 2011 at 12:21 AM  

Do you mean external anchors for the tab navigation? then the current version does not
support that option. But you can modify the code to implement it.

Anonymous February 20, 2011 at 4:07 AM  

Found one way of doing it:

Modify jquery.smartTab.js after line 28, add:

$(obj).bind ("goto_tab", function (e, arg) {
var prevTabIdx = curTabIdx;
curTabIdx = arg;
hideTab(prevTabIdx);
});

Result should look like:

hideAllSteps(); // Hide all content on the first load

showTab();

$(obj).bind ("goto_tab", function (e, arg) {
var prevTabIdx = curTabIdx;
curTabIdx = arg;
hideTab(prevTabIdx);
});

....

After that on the page, you can call:

$('#tabs').trigger ("goto_tab", 0);
$('#tabs').trigger ("goto_tab", 1);

etc.

Anonymous March 4, 2011 at 1:12 PM  

Does the Smart Tab have any negative effects on SEO?

Anonymous April 18, 2011 at 5:41 AM  

Excellent control, but how can I centre the control if using a horizontal display? I have tried placing the control within a div with style="text-align:center" however the control keeps it self aligned to the left and I cannot force it into the middle of my page.

Thanks

Tom

Anonymous December 10, 2011 at 6:17 PM  

hi, this is very good plugin.
but how can I insert more div into div content(id="tabs-1")?

thank you!

Anonymous January 26, 2012 at 1:07 AM  

Uncaught TypeError: Object [object Object] has no method 'smartTab'

Aaron April 3, 2012 at 4:35 AM  

Hi

I am facing problem with smartTab jquery. Can you please tell me that how we can set one extra div above all the div and want to open that div by default.

So please help to doing this . Its urgent

Thanks

Anonymous April 29, 2012 at 8:24 PM  

how to implement pagination inside of tab? is that possible? help me

Post a Comment

Search This Blog

Loading...

Donate