TabContainer 背景色的设置-技术开发专区

TabContainer 背景色的设置

作者：ITPUB论坛编辑： nancy 2008-06-24 00:00

【IT168技术文档】

虽然TabPanel 有BackColor 的属性，但设置后无济于事，通过TabContainer 的CssClass 设置，必须制定所有的像什么ajax__tab_header、ajax__tab_outer、ajax__tab_inner、 ajax__tab_tab、ajax__tab_hover等外观，但我又想保留xp 按钮的外观，于是从AjaxControlToolkit 源码中找出所有图片和Tabs.css，重新指定所有图片的路径，更改ajax__tab_body 的background-color 为自己想要颜色"#eeeeee"。

/* xp theme */
.ajax__tab_wf .ajax__tab_header
{
font-family: verdana,tahoma,helvetica;
font-size: 11px;
background: url(../images/Tabs/tab-line.gif) repeat-x bottom;
}
.ajax__tab_wf .ajax__tab_outer
{
padding-right: 4px;
background: url(../images/Tabs/tab-right.gif) no-repeat right 50%;
height: 21px;
}
.ajax__tab_wf .ajax__tab_inner
{
padding-left: 3px;
background: url(../images/Tabs/tab-left.gif) no-repeat;
}
.ajax__tab_wf .ajax__tab_tab
{
height: 13px;
padding: 4px;
margin: 0;
background: url(../images/Tabs/tab.gif) repeat-x;
}
.ajax__tab_wf .ajax__tab_hover .ajax__tab_outer
{
background: url(../images/Tabs/tab-hover-right.gif) no-repeat right;
}
.ajax__tab_wf .ajax__tab_hover .ajax__tab_inner
{
background: url(../images/Tabs/tab-hover-left.gif) no-repeat;
}
.ajax__tab_wf .ajax__tab_hover .ajax__tab_tab
{
background: url(../images/Tabs/tab-hover.gif) repeat-x;
}
.ajax__tab_wf .ajax__tab_active .ajax__tab_outer
{
background: url(../images/Tabs/tab-active-right.gif) no-repeat right;
}
.ajax__tab_wf .ajax__tab_active .ajax__tab_inner
{
background: url(../images/Tabs/tab-active-left.gif) no-repeat;
}
.ajax__tab_wf .ajax__tab_active .ajax__tab_tab
{
background: url(../images/Tabs/tab-active.gif) repeat-x;
}
.ajax__tab_wf .ajax__tab_body
{
font-family: verdana,tahoma,helvetica;
font-size: 10pt;
border: 1px solid #999999;
border-top: 0;
padding: 8px;
background-color: #eeeeee;
}

关注我们