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 dont 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! Im jealous.
Its pretty cool Matt.
Just one comment. Just like Yahoos new home page does, wouldnt 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 Ive 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. Im 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 doesnt 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
can u help me out to disable the tab in ajax tab control?
This is a very useful article.
Very informative thanks.
Hi siddharth,
Try this
write javascript function
take the client id and prefix with __tab_
function foo()
{
var clientId=TabPanel1.ClientID;
ctlId=__tab_+ctlId;
$get(ctlId).disabled=true;
}
call js in some client event like onclick="foo()"
if you want to do this on server side, tag the js function to RegisterStartupScript
I took this approach as TabPanels,Enable property is hiding the tab instead of disabling the tab.
I tried posting the exact code but I couldnt able to post with ampercent symobols.Hope you know the syntax to capture ClientID of TabPanel in js function :)
thanks a lot !! great menu.. awesome explanation
Thanks for this; I used it and modified it to scroll the header to the active tab when using the Navigiation button
http://malakablog.wordpress.com/2008/06/26/ajaxcontroltoolkits-tabcontainer-navigation-buttons-with-scroll-header/
AjaxControlToolkit:TabContainer doesn't appear in firefox
can anyone help
Have you tried using just the AJAX javascript libraries to create the Tab controls? If so how did you do this?
Thanks in advance.