Tuesday, June 22, 2010

Changing the Tab Container

Are you seeking a way to customize the tabcontainer which comes with AJAX toolkit? AJAX tab container has several Cascade Style Sheet (CSS) properties which you can use to change the look of the tab container. But you need to make sure that you are not changing the keywords used in the CSS (ajax__tab_header, ajax__tab_outer, etc…).

You can change the look of the tabs by two methods. Tab container is using few images to give the 3D look it is having in its default view. so the first method is by changing the images and associating the new images to the tab container using a style sheet, second method is to change the tabs using the CSS without images, by using the CSS you can change the colors, sizes etc of the tabs.

Following are the default images that are shipped with the toolkit.

tab tab
tab-active tab-active
tab-active-left tab-active-left
tab-active-right tab-active-right
tab-hover tab-hover
tab-hover-left tab-hover-left
tab-hover-right tab-hover-right
tab-left tab-left
tab-right tab-right
tab-line tab-line

 

In the following code I am changing the tabcontainer look by using CSS and then placing the updated images to the relevant (Images/Controls) folder.





  1. .tabCont .ajax__tab_header
  2. {
  3.     font-family: verdana,tahoma,helvetica;
  4.     font-size: 11px;
  5.     background: url(../Images/Controls/tab-line.gif) repeat-x bottom;
  6. }
  7. .tabCont .ajax__tab_outer
  8. {
  9.     padding-right: 4px;
  10.     background: url(../Images/Controls/tab-right.gif) no-repeat right;
  11.     height: 21px;
  12. }
  13. .tabCont .ajax__tab_inner
  14. {
  15.     padding-left: 3px;
  16.     background: url(../Images/Controls/tab-left.gif) no-repeat;
  17. }
  18. .tabCont .ajax__tab_tab
  19. {
  20.     height: 13px;
  21.     padding: 4px;
  22.     margin: 0px;
  23.     background: url(../Images/Controls/tab.gif) repeat-x;
  24. }
  25. .tabCont .ajax__tab_hover .ajax__tab_outer
  26. {
  27.     cursor: pointer;
  28.     background: url(../Images/Controls/tab-hover-right.gif) no-repeat right;
  29. }
  30. .tabCont .ajax__tab_hover .ajax__tab_inner
  31. {
  32.     cursor: pointer;
  33.     background: url(../Images/Controls/tab-hover-left.gif) no-repeat;
  34. }
  35. .tabCont .ajax__tab_hover .ajax__tab_tab
  36. {
  37.     cursor: pointer;
  38.     background: url(../Images/Controls/tab-hover.gif) repeat-x;
  39. }
  40. .tabCont .ajax__tab_active .ajax__tab_outer
  41. {
  42.     background: url(../Images/Controls/tab-active-right.gif) no-repeat right;
  43. }
  44. .tabCont .ajax__tab_active .ajax__tab_inner
  45. {
  46.     background: url(../Images/Controls/tab-active-left.gif) no-repeat;
  47. }
  48. .tabCont .ajax__tab_active .ajax__tab_tab
  49. {
  50.     background: url(../Images/Controls/tab-active.png) repeat-x;
  51. }
  52. .tabCont .ajax__tab_disabled
  53. {
  54.     color: #A0A0A0;
  55. }
  56. .tabCont .ajax__tab_body
  57. {
  58.     font-family: verdana,tahoma,helvetica;
  59.     font-size: 10pt;
  60.     border: 0px solid #999999;
  61.     border-top: 0;
  62.     padding: 8px;
  63.     background-color: #f1f1f1;
  64.     margin: 12px;
  65. }




 

To apply the style to the tab container you can use the following code.

<asp:TabContainer ID="tcnManageUsers" runat="server" ActiveTabIndex="0" CssClass="tabCont">

Following is the full code of my tab container.





  1. <asp:TabContainer ID="tcnManageUsers" runat="server" ActiveTabIndex="0" CssClass="tabCont">
  2.      <asp:TabPanel runat="server" HeaderText="Add" ID="tplAdd" >
  3.          <ContentTemplate>
  4.              <uc1:CreateUser ID="AddCreateUser" runat="server" />
  5.          </ContentTemplate>  
  6.      </asp:TabPanel>
  7.      <asp:TabPanel ID="tplEdit" runat="server" HeaderText="Edit" >
  8.          <ContentTemplate >
  9.             <asp:Button ID="btnSelectUser" runat="server" Text="Select User" OnClick="btnSelectUser_Click"/>
  10.             <uc1:CreateUser ID="EditCreateUser" runat="server" />
  11.          </ContentTemplate>
  12.      </asp:TabPanel>
  13.  </asp:TabContainer>




4 comments:

Anonymous said...

I would like to exchange links with your site www.blogger.com
Is this possible?

Arjuna said...

What you asked is to put my link in your site and put your page link in my site right?
If it is, I am ok with that if the content is relavant. Please send me your site link, then I can have a look and let you know.

Polo said...

Hi Arjuna, very helpful post. Is it possible to style every tab in a diferent way? What I need is to use diferent images for each tab. Hope u can help me.
Regards

Anonymous said...

Hello I am so grateful I found your web site, I really found you by mistake, while I was searching on Yahoo for something else, Nonetheless
I am here now and would just like to say many thanks for a
incredible post and a all round thrilling blog (I also love the theme/design), I don’t have time to browse it all at the minute but I have book-marked it and also added your RSS feeds,
so when I have time I will be back to read much more, Please
do keep up the excellent work. Check out my website to get
more info about car insurance in California, if you like.
Check out my web-site car insurance quote