ajaxToolkit:TabContainer 背景色的设置

虽然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;

}
看结果：



请仔细看HeaderText 的右侧部分，有一个约1毫米的空隙。如果放在母板（master）中测试，一切正常，估计又是一个bug。

但回头又想想，我只是想改变背景色而已，用得着那么费劲吗？运行后看编译后的代码

<div id="Tabs" style="width:100%;visibility:hidden;">

<div id="Tabs_header">

<span id="__tab_Tabs_Panel1">基础信息</span><span id="__tab_Tabs_Panel2">明细表</span>

</div>

<div id="Tabs_body" style="height:400px;">

<div id="Tabs_Panel1">

</div>

<div id="Tabs_Panel2" style="display:none;visibility:hidden;">

</div>

</div>

</div>
看到Tabs_body 了吗，只要设置它的背景色就行了，为何不用js指定呢？

<script language="javascript">

var Tabs_body=document.getElementById('<%=Tabs.ClientID %>' + '_body');

Tabs_body.style.backgroundColor='#eeeeee';

</script>
看截图：



大功告成！