More Sample AjaxControlToolkit TabContainer Themes ...
After working on a YUI TabView theme for the AjaxControlToolkit's TabContainer control, I thought it might be fun to create a few more TabContainer themes for some of the other tab-style controls that I have seen floating around the web. I was especially curious in seeing what it would take to include images in each of the tab panel header's.
Below are the controls I was targeting, where on the Internet I found them, and a short description of what it took to create the corresponding theme. If you are not familiar with how theming the TabContainer works, I recommend reading the documentation for the TabContainer control.
Download | Live Demo | View Stylesheet
Technorati Tab Theme
I like Technorati's tab control because it simple, yet in my opinion it still has a nicer presentation than the default xp style TabContainer theme. Here is a link to the page where I found this control.
Notes:
- To use this theme, include a link to the CSS file and set the CssClass of the TabContainer control to 'ajax__tab_technorati-theme'.
- Make sure you copy the images to your machine and update the path's in the stylesheet if you change the path. The images for this theme can be found in the download in the img/technorati directory
- I tested in both IE7 and FF and did not encounter any issues
Windows Live Gallery Tab Theme
I do not particularly care for the Windows Live Gallery style tab, but I thought it might make for an interesting example because the tab headers all contain images. I thought this might be a difficult scenario to support, but because the TabContainer allows for defining a template to use for the tab headers, it was no problem at all.
Here is the sample markup for the 'Sidebar gadget' tab panel. Notice, the HeaderTemplate provides us with the flexibility of defining the image and header text that should be used for the 'Sidebar gadgets' tab.
<ajaxToolkit:TabPanel runat="server"> <HeaderTemplate> <div> <img src="img/msngallery/sidebar.png"/> <div>Sidebar gadgets</div> </div> </HeaderTemplate> <ContentTemplate> </ContentTemplate> </ajaxToolkit:TabPanel>
Notes:
- To use this theme, include a link to the CSS file and set the CssClass of the TabContainer control to 'ajax__tab_msngallery-theme'.
- Make sure you copy the images to your machine and update the path's in the stylesheet if you change the path. The images for this theme can be found in the download in the img/msngallery directory
- I tested in both IE7 and FF and did not encounter any issues
YUI Tab Theme
I blogged about the YUI theme before, but incase you missed it I figured I would mention it again here.
Notes:
- To use this theme, include a link to the CSS file and set the CssClass of the TabContainer control to 'ajax__tab_yuitabview-theme'.
- Make sure you copy the images to your machine and update the path's in the stylesheet if you change the path. The images for this theme can be found in the download in the img/yui directory
- I tested in both IE7, IE6 and FF and did not encounter any issues.
Windows Internet Explorer Tab Theme
The last theme I created is based on the tab control that can be found on the Windows Internet Explorer home page.
Notes:
- To use this theme, include a link to the CSS file and set the CssClass of the TabContainer control to 'ajax__tab_ie-theme'.
- Make sure you copy the images to your machine and update the path's in the stylesheet if you change the path. The images for this theme can be found in the download in the img/ie directory
- I tested in both IE7 and FF. There appears to be a small issue with the alignment of the first tab in FF. I am working on resolving this.
That's it. Enjoy!
Comments
when I try to change the cssclass property in may tabcontainer visual studio generate an error in tables inside panel like
Matt,
Fantastic - thanks for putting this together!
May I make a request?
One thing that would dramatically improve the "believability" of the tabs is a slight shift upwards in the text itself.
If you check that MS tabs page again, youll see the text shifts up when you click a tab.
I hacked together a quick demo of the Lottery Post tabs (which I wrote as an ASP.NET AJAX control).
http://www.lotterypost.com/tabtest.asp
In my tabs, I go a slight step further by making the selected tab grow 1px left and right, which fills the gaps between the tabs.
Also, youll see the images on some tabs, other are plain.
For anyone writing a tab control, another good touch is pre-loading the images for hover, so the tab doesnt blank out while the image loads.
-Todd
@Todd -
Nicely done.
Matt.
Thanks Matt. Im not sure if my test page was working properly. Just in case it wasnt, I wanted to let you know that its working now.
-Todd
Thanks, these are very useful. I am pretty weak at css so this is a big help.
i want to execute server side code when tab strip change. its not firing server side event. can u tell me what may be the reason
thanks a lot, it’s nice to only need one framework and I happened to need moo tools.
Thanks! I had spent a few hours working on my own custom CSS, but I just couldnt get it exactly how I wanted, and one of your themes sparked my interest, so thanks for sharing!
Any talk of a Facebook tab theme for all those .net facebook devlopers out there? :)
Your ajax themes are awesome, and so easy to implement, no more boring stuff with default Microsoft ajax tabs themes, good one
Hi Matt,
Thank you very much for your Tab information. How is the CSS connected with the AjaxControlToolKit? And can you do the tabs at http://www.yahoo.com/?
Thank you,
Rune
Hi,
i am using YUI without ajax ...i got the coding form yahoo..its working fine in FireBox..not working in IE..another think is when i am
specify the Html file in tab its working fine Both browser(IE and FireBox)..but i am specify the .net file (.aspx) in tab is working file in FireBox not in IE..
please Help me..
Thanks and Regards,
S.Sajan
Hello,
Your article was a great help. I used the MSN theme (without the pictures) and a little changes.
BUT - it looks great on IE6 and not on IE7.
Any idea what could be the reason?
Thanks,
Dana
Hi Matt!
Nice work, can you please guide me that how can i call external pages in my Ajax Tab Container?
I want the same look n feel but want to call different pages.
Hi Matt,
A big thank you for the excellent post.
I studied your samples to learn how its done and it helped me a great deal when designing the tabs on my website.www.gowheelchair.com
Tabs are on the product pages:Threshold Wheelchair Ramp
Hi Matt,
thanks that was a really great help.
thanks. good job!
Dear All
Inspired by this post, I made some more colorful templates, please have a look here.
http://digdotnet.blogspot.com/2008/03/aspnet-ajax-tab-control-colorful-themes.html
prasad.
Great Work.
I appreciate the usefulness of this great tab collection.
Waiting for more (if it is coming), like some more rounded corner tabs etc.
Thanks
Awesome ...
I wonder how you could find that time and patience.
Awesome!!!
Your post was great help. Thanks to you my Tab Panels look awesome now. :)
Thanks very much.
Great work..
Thanks ,Its nice solution!
Thanks. Nice work..
thanks for sharing this,great tab menus.
I was wondering if you could help me figure out how to get 2 rows of text for a tab header. I tried doing it with two div tags between the header template of the tab panel.
Like how it is done with the images, but it didnt work. I can only see the first row of text and then you can see that the second row has text but that the header is not high enough to see both rows.
Can you help me please!!!!!
its not firing server side event
thanks for sharing this,great tab menus.