3 Tips for Working with the AjaxControlToolkit's TabContainer Control

Here are three quick tips you might find useful when using the Toolkit's Tab control.  I included demo's for all three tips so you can get a feel for how it looks and behaves.

Live Demo (IE6, IE7, FF, Opera) | Download

 

#1: How To Change the Selected Tab When the Tab Header is MousedOver

By default the tab control will switch the selected tab when a different tabs' header is clicked.  Depending upon the content you are displaying, you might find it useful to change the selected tab as the user mouses over a different tab.  I saw an example of this on designflavr.com.  This site has a tab control that displays the categories and tags and some other miscellaneous links.  These items are collected into a tab control that has been placed in the right hand sidebar. 

You can get this mouseover style navigation by adding only a few lines of JavaScript to your page.  And the logic is very simple:

  1. get a reference to each of the tab panels
  2. attach an event handler to the tab header's mouseover event
  3. when the mouseover event fires, set it as the selected tab

Here is the chunk of JavaScript you can use to implement this.  I put it in the pageLoad so it runs when the page spins up.

image

 

#2: How To Change the Selected Tab Using Navigation Buttons

And for other scenarios, you might want to use an input element like a button or something to control the tabs navigation - something like next and previous buttons for cycling through the tabs.  To handle this scenario, you can use the bit of JavaScript below.  If you wire this to the input elements click event, it will take care of advancing the selected.  I even included wrap around logic for handling the scenario where the last tab is selected and the user clicks the next button.  Again, nothing too fancy here, just some simple math for calculating the index of the next page and a few calls to the TabContainer's JavaScript components.   

Here is the JavaScript function that handles this scenario ...

image

And this is how you can bind it to a Next and Previous buttons ...

image

#3: How to Center the Tab Headers Horizontally

Last tip - you want to center the tab headers like so ...

image

Just set the text-align of the .ajax__tab_header class to center. 

 image

That's it.  Enjoy!

TrackBack

TrackBack URL for this entry:
http://mattberseth.com/blog-mt/mt-tb.fcgi/116

Comments

FYI: In Javascript you don't need to use the curly braces if the body of the statement is a mere one line...

if(currentTabIndex + 1 == totalNumOfTabs)
newTabIndex = 0;
else
newTabIndex = currentTabIndex + 1;

This can actually be shortened further using the ?: operator, but that comes at the expense of readability.

Have a good time at the Masters! I'm jealous.

It's pretty cool Matt.

Just one comment. Just like Yahoo's new home page does, wouldn't it be cool when you mouseover a tab, it loads the content of that tab at that time instead of preloading them when the page is loading first time?

Do you have any example to do this? I hope I've explained it right.

anyone try to invisible one of the tab page ? Header Text is still there in spite of invisible ?!?!?

@Josh Stodola,

One line or more it is a good practice to follow a standard in coding.

Always try to keep the curly braces on so your code can be more stylish!

Another tip: you can override the javascript with custom script by placing your function with the proper name ie:


function AjaxControlToolkit.TabContainer.prototype.set_activeTabIndex(value)
{ ... }


after the script manager. I'm using this in my project to make my tabs load pages.

In example #2 the buttons can navigate the tabs. So if I want to navigate using ONLY the buttons, how can I disable the click event of the tabs so that clicking on a tab doesn't do anything?

Hi,
How to achieve scrolling option for tabs in AjaxTabContainer

Thanks

Hi Matt..

I have the smillar requirement on navigating tabs on previous and next buttons.
But I am hiding many tabs based on the role .
but if I use the above code on click of next I can able to view the tabs I was hiding at serverside :-( which is major security break.

how do add condition to navigate on only on visible tabs?

Thanks

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)

This Blog

  • Email Me
  • RSS
  • Atom
  • Entries - 102
  • Comments - 1276
  • Recent Comments

    • vitta wrote: Hi Matt.. I have the smillar requirement on navigating tabs on previous and next buttons. But I am...
    • vijaymesa wrote: Hi, How to achieve scrolling option for tabs in AjaxTabContainer Thanks...
    • Lee wrote: In example #2 the buttons can navigate the tabs. So if I want to navigate using ONLY the buttons, h...
    • Matt G wrote: Another tip: you can override the javascript with custom script by placing your function with the p...
    • Joseph Ghassan wrote: @Josh Stodola, One line or more it is a good practice to follow a standard in coding. Always try t...
    • srht wrote: anyone try to invisible one of the tab page ? Header Text is still there in spite of invisible ?!?!?...
    • Rachit wrote: It's pretty cool Matt. Just one comment. Just like Yahoo's new home page does, wouldn't it be cool ...
    • Josh Stodola wrote: FYI: In Javascript you don't need to use the curly braces if the body of the statement is a mere one...