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

Posted by: srht on April 11, 2008 12:00 AM

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

Posted by: Joseph Ghassan on April 12, 2008 12:00 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!

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.

Posted by: Lee on April 30, 2008 12:00 AM

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?

Posted by: vijaymesa on May 5, 2008 12:00 AM

Hi,
How to achieve scrolling option for tabs in AjaxTabContainer

Thanks

Posted by: vitta on May 14, 2008 12:00 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: siddharth gaur on May 30, 2008 12:00 AM

can u help me out to disable the tab in ajax tab control?

Posted by: Tu Dang Tuan on May 30, 2008 12:00 AM

This is a very useful article.

Very informative thanks.

Posted by: vitta on June 10, 2008 12:00 AM

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 :)

Posted by: Keshav on June 12, 2008 12:00 AM

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/

Posted by: Aamir on September 24, 2008 03:59 AM

AjaxControlToolkit:TabContainer doesn't appear in firefox
can anyone help

Posted by: Abdul Majid on October 22, 2008 05:13 AM

Have you tried using just the AJAX javascript libraries to create the Tab controls? If so how did you do this?

Thanks in advance.

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.)

Consulting Services

Yep - I also offer consulting services. And heck, I'll do just about anything. If you enjoy my blog just drop me an email describing the work you need done.

Recent Comments

  • Abdul Majid wrote: Have you tried using just the AJAX javascript libraries to create the Tab controls? If so how did yo...
  • Aamir wrote: AjaxControlToolkit:TabContainer doesn't appear in firefox can anyone help ...
  • Mohd Malaka wrote: Thanks for this; I used it and modified it to scroll the header to the active tab when using the Nav...
  • Keshav wrote: thanks a lot !! great menu.. awesome explanation ...
  • vitta wrote: Hi siddharth, Try this write javascript function take the client id and prefix with __tab_ function...
  • siddharth gaur wrote: can u help me out to disable the tab in ajax tab control? ...
  • Tu Dang Tuan wrote: This is a very useful article. ...
  • Alquma wrote: Very informative thanks. ...