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:
  1. To use this theme, include a link to the CSS file and set the CssClass of the TabContainer control to 'ajax__tab_technorati-theme'.
  2. 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
  3. 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:
  1. To use this theme, include a link to the CSS file and set the CssClass of the TabContainer control to 'ajax__tab_msngallery-theme'.
  2. 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
  3. 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:
  1. To use this theme, include a link to the CSS file and set the CssClass of the TabContainer control to 'ajax__tab_yuitabview-theme'.
  2. 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
  3. 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:
  1. To use this theme, include a link to the CSS file and set the CssClass of the TabContainer control to 'ajax__tab_ie-theme'.
  2. 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
  3. 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!


TrackBack

TrackBack URL for this entry:
http://mattberseth.com/blog-mt/mt-tb.fcgi/70

Listed below are links to weblogs that reference More Sample AjaxControlToolkit TabContainer Themes ...:

» Tab container themes from Visual-Blast Media
A great Collection of Sample AjaxControlToolkit TabContainer Themes available for download. ... [Read More]

Comments


Posted by: carzel on September 27, 2007 12:00 AM

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

Posted by: Niall on October 9, 2007 12:00 AM

Thanks, these are very useful. I am pretty weak at css so this is a big help.

Posted by: jatish on October 29, 2007 12:00 AM

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

Posted by: Rune Brattas on December 1, 2007 12:00 AM

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

Posted by: sajan on December 17, 2007 12:00 AM

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

Posted by: dana on December 31, 2007 12:00 AM

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

Posted by: Mohsin Shahzad on January 2, 2008 12:00 AM

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

Posted by: Rocky on January 15, 2008 12:00 AM

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.

Posted by: Pawan Pillai on April 5, 2008 12:00 AM

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

Posted by: yarla on April 9, 2008 12:00 AM

Awesome ...

I wonder how you could find that time and patience.

Posted by: Narinder on April 16, 2008 12:00 AM

Awesome!!!

Your post was great help. Thanks to you my Tab Panels look awesome now. :)

Thanks very much.
Great work..

Posted by: Azad on May 7, 2008 12:00 AM

Thanks ,Its nice solution!

Thanks. Nice work..

thanks for sharing this,great tab menus.

Posted by: Leah on September 22, 2008 01:58 PM

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.

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

  • firma ekle wrote: thanks for sharing this,great tab menus....
  • Firmalar wrote: its not firing server side event...
  • Leah wrote: I was wondering if you could help me figure out how to get 2 rows of text for a tab header. I tried...
  • Toto web Hosting wrote: thanks for sharing this,great tab menus. ...
  • K?z Oyunlar? wrote: Thanks. Nice work.. ...
  • Azad wrote: Thanks ,Its nice solution! ...
  • ptcmaster wrote: Thanks very much. Great work.. ...
  • Narinder wrote: Awesome!!! Your post was great help. Thanks to you my Tab Panels look awesome now. :) ...