AJAX TabContainer 样式设置

属性页（TabContainer）
TabContainer可以实现多选项卡的属性页界面。
它里面包含TabPanel元素，每一对TabPanel元素代表一个选项卡。
语法：
<ajaxToolkit:TabContainer ID="t1" runat="server" CssClass="tabstrip">
<ajaxToolkit:TabPanel runat=server> －－属性页
<HeaderTemplate></HeaderTemplate> －－页眉
<ContentTemplate></ContentTemplate> －－内容
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel runat=server>
......
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>

 

通过设置TabContainer控件的CssClass属性来改变属性页的外观效果

下面是样式表的示例：
位于 TabContainer 上方，用来显示所有索引标签的标题
.tabstrip .ajax__tab_header
{
font-size: 11px;
background: url(Images/line.gif) repeat-x bottom;
}

索引标签左侧背景图
.tabstrip .ajax__tab_inner
{
padding-left: 3px;
background: url(Images/left.gif) no-repeat;
}

索引标签右侧背景图
.tabstrip .ajax__tab_outer
{
padding-right: 0px;
background: url(Images/right.gif) no-repeat right;
height: 21px;
}

索引标签标题背景图
.tabstrip .ajax__tab_tab
{
height: 13px;
padding: 4px;
margin: 0;
background: url(Images/bg.gif) repeat-x;
}

TabPanel 样式
.tabstrip .ajax__tab_body
{
border: 1px solid #999999;
border-top: 0;
padding: 8px;
background-color: #ffffff;
}

鼠标移过时
.tabstrip .ajax__tab_hover .ajax__tab_outer
{
background: url(Images/overright.gif) no-repeat right;
}

.tabstrip .ajax__tab_hover .ajax__tab_inner
{
background: url(Images/overleft.gif) no-repeat;
}

.tabstrip .ajax__tab_hover .ajax__tab_tab
{
background: url(Images/over.gif) repeat-x;
}

目前被选取的索引标签
.tabstrip .ajax__tab_active .ajax__tab_outer
{
background: url(Images/acitveright.gif) no-repeat right;
}

.tabstrip .ajax__tab_active .ajax__tab_inner
{
background: url(Images/activeleft.gif) no-repeat;
}

.tabstrip .ajax__tab_active .ajax__tab_tab
{
background: url(Images/active.gif) repeat-x;
}