LinkedIn Style Themes for the AjaxControlToolkit Tab Container ControlMatt Berseth
Here are a couple more themes for the AjaxControlToolkit's Tab control based on the tabs found on LinkedIn.com. Below the screen shots are a few bullet points discussing how I created them. If tab theming is new for you - it might be helpful to check out these other samples as well ...- Five AjaxControlToolkit Tab Themes created from DynamicDrive.com
- Dev.Opera.com Style TabContainer Theme
- JQuery TabContainer Theme with Tab Transition Animations
- Using CSS Image Sprites with the XP Themed TabContainer
- More Sample AjaxControlToolkit TabContainer Themes ...
- Creating a YUI TabView Style Theme for the AjaxControlToolkit's TabContainer Control
Tab Header Images
Different images are used all three tab states: {Default, Hover, Active}. Each tab is made up of 2 images, the left edge and the tab body plus the right edge. Because a the three states are rolled into 2 images, no flicker occurs during a roll-over because the hover state images have already been loaded. Here are the 2 images used for the blue themed tab.
Shifting the Tab Header to the Right
The Toolkit's demo page for the Tab control has the tab header left aligned. If you would rather have the header strip shifted slightly to the right (like I have done for this sample), it can easily be done with a stylesheet. Just specify a left margin for the .ajax__tab_header class like I have done below.
Can I Apply Different Background Images to Different Headers?
The LinkedIn page has different header images applied to different tabs within the same container. I was curious if something like this could be done with the Toolkit's Tabs control. I wanted it to look something like this ...
I was hoping the CssClass attribute on the TabPanel class could be used to accomplish this (highlighted in the screen shot below), but it looks like this attribute is never rendered. So I guess the answer is No, not at this time (Someone please let me know if I am wrong).
Ok, The Tab Headers Look Nice, What About the Tab Body?
I was thinking the same thing, having just a box around the content area of the tab doesn't always look so great. So for this sample, I included some rounded corners to see if that helped spruce up the content area. I think it does. That's it. Enjoy!no comments yet.
Sharpen a Fore PlaneWoodworking Magazine »« Phoenix DIY 5 - this Thursday!MAKE Magazine
