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:
- get a reference to each of the tab panels
- attach an event handler to the tab header's mouseover event
- 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.
#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 ...
And this is how you can bind it to a Next and Previous buttons ...
#3: How to Center the Tab Headers Horizontally
Last tip - you want to center the tab headers like so ...
Just set the text-align of the .ajax__tab_header class to center.
That's it. Enjoy!
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.
Posted by: Josh Stodola | April 10, 2008 06:06 PM
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.
Posted by: Rachit | April 11, 2008 06:02 AM
anyone try to invisible one of the tab page ? Header Text is still there in spite of invisible ?!?!?
Posted by: srht | April 11, 2008 08:27 AM
@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!
Posted by: Joseph Ghassan | April 12, 2008 09:05 AM
Another tip: you can override the javascript with custom script by placing your function with the proper name ie:
after the script manager. I'm using this in my project to make my tabs load pages.
Posted by: Matt G | April 17, 2008 10:28 PM
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?
Posted by: Lee | April 30, 2008 10:28 AM
Hi,
How to achieve scrolling option for tabs in AjaxTabContainer
Thanks
Posted by: vijaymesa | May 5, 2008 07:25 AM
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
Posted by: vitta | May 14, 2008 05:46 PM