AjaxControlToolkit——TabContainer

 http://www.asp.net/AJAX/AjaxControlToolkit/Samples/Tabs/Tabs.aspx

TabContainer是个集合、容器，里面可以包含多个TabPanel。系统提供的样式很不理想需要override。

搞了大半天，才搞大概。

我的CSS：

 1/*tab没有激活字体颜色，背景*/
 2.CustomTabStyle .ajax__tab_header
 3{
 4    
 5     
 6     background: url(../images/b/che_service.gif) repeat-x bottom;
 7     
 8     color:White;
 9    
10}
11/*可以设置tab背景图片——左；tab内容与tab的填充距离*/
12.CustomTabStyle.ajax__tab_outer
13{  padding-right:20px;
14    padding-left:20px; 
15    
16}
17
18/*可以设置tab背景图片——右；tab内容与tab的填充距离*/
19
20.CustomTabStyle.ajax__tab_inner
21{   
22    
23}
24/*激活tab的样式——背景，字体颜色*/
25.CustomTabStyle.ajax__tab_active
26{
27    font-family: verdana,tahoma,helvetica;
28    font-size: 11px;
29    background: url(../images/b/che_serviced.gif) repeat-x bottom;
30    height: 29px;
31    line-height: 29px;
32    color:#185445;
33    font-weight:bold;
34}
35/*可以设置tab背景图片——中*/
36.CustomTabStyle.ajax__tab_tab 
37{
38    font-size:14px;
39    
40    margin-right:4px;
41    
42}
43/*tab主体样式——上边无边框*/
44.CustomTabStyle.ajax__tab_body
45{
46   border-bottom :solid 1px green;
47   border-left:solid 1px green;
48   border-right:solid 1px green;
49   border-top:0;
50   
51}

 

我的HTML

我的HTML


 我的效果图：

 


 

主要是ajax__tab_header、ajax__tab_active和ajax__tab_body三个样式起了重要作用。

系统提供的那个示例，“Contrls”后面是一条线，其实是背景图片。源码样式：

.ajax__tab_xp .ajax__tab_header {font-family:verdana,tahoma,helvetica;font-size:11px;background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-line.gif")%>) repeat-x bottom;}

一是背景图片要1*1的大小，二是：background中的bottom

 

最后,还右两个问题不知道怎么解决。

一．设置每个tab之间的间距。

二．同一个页面多个TabContainer只能用一个样式。我写了个样式

.CustomTabStyle2.ajax__tab_body

{

   border-bottom :solid 1px red;

   border-left:solid 1px red;

   border-right:solid 1px red;

   border-top:0;

  

}

“家政服务”那个TabContainer调用后，原来的第一个TabContainer的边框也变成红色了，

本想让它不变。

附源码样式
源码样式
posted @ 2008-03-14 00:18  yellowwood  阅读(4717)  评论(1)  编辑  收藏  举报
Never Give UP