Styling an AJAX Tab Container
One of the cooler controls the Microsoft included with their implementation of AJAX is the TabContainer. The TabContainer easily allows you to create (not surprisingly) a tabbed container. While it's easy to setup, it's pretty plain out of the box. Thankfully with just a little CSS, we can change this.
Let's start first by creating the CSS you will need to style your container. Below is a brief description of what each element in the CSS for the TabContainer does.
- .ajax__tab_header: The heading section of your tabs and also the font that appears in your tabs.
- .ajax__tab_outer: The outside edges of any non-selected tabs.
- .ajax__tab_inner: The inside of the non-selected tabs.
- .ajax__tab_hover: What the tab (either selected or not) look like when the most is over them.
- .ajax__tab_active .ajax__tab_outer: The outside edges of the selected tab.
- .ajax__tab_active .ajax__tab_inner: The inside of the selected tab.
Below is the CSS I'm going to use to style these a bit. While you can go crazy and use images, I'm just going to go for a simple, clean look by using some different coloring and font styles.
.NewsTab .ajax__tab_header
{
color: #aa976b;
font-size: 13px;
font-weight: bold;
background-color: White;
margin-left: 10px;
}
.NewsTab .ajax__tab_outer
{
background-color: White;
}
.NewsTab .ajax__tab_inner
{
padding: 6px;
margin-right: 1px;
margin-left: 1px;
margin-top: 1px;
margin-bottom: 1px;
background-color: #f8f6ea;
}
.NewsTab .ajax__tab_hover .ajax__tab_outer
{
background-color: Orange;
}
.NewsTab .ajax__tab_hover .ajax__tab_inner
{
background-color: #FFFFE1;
}
.NewsTab .ajax__tab_active .ajax__tab_outer
{
background-color: White;
}
.NewsTab .ajax__tab_active .ajax__tab_inner
{
background-color: #fefdf7;
}
If you want to see this in action, visit Smthop.com and look at the TabContainer on the top of the right side bar. You can also see a variation of this used for this site(with slightly different coloring) on the right side bar of this page.
After you get your CSS created, you just need to associate it with your TabContainer, which is done simply by added a CssClass property pointing to this CSS class in your TabContainer.
<ajaxToolkit:TabContainer ID="myTabContainer" runat="server" Width="100%" CssClass="NewsTab" >
</ajaxToolkit:TabContainer>
This article has been view 29641 times.
|