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![](/Images/OutliningIndicators/None.gif)
18
/*可以设置tab背景图片——右;tab内容与tab的填充距离*/
19![](/Images/OutliningIndicators/None.gif)
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
}
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
2
![](/Images/OutliningIndicators/None.gif)
3
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
4
![](/Images/OutliningIndicators/InBlock.gif)
5
![](/Images/OutliningIndicators/InBlock.gif)
6
![](/Images/OutliningIndicators/InBlock.gif)
7
![](/Images/OutliningIndicators/InBlock.gif)
8
![](/Images/OutliningIndicators/InBlock.gif)
9
![](/Images/OutliningIndicators/InBlock.gif)
10
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
11
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
12
![](/Images/OutliningIndicators/None.gif)
13
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
14
![](/Images/OutliningIndicators/InBlock.gif)
15
![](/Images/OutliningIndicators/InBlock.gif)
16
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
17
![](/Images/OutliningIndicators/None.gif)
18
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
19
![](/Images/OutliningIndicators/None.gif)
20
![](/Images/OutliningIndicators/None.gif)
21
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
22
![](/Images/OutliningIndicators/InBlock.gif)
23
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
24
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
25
![](/Images/OutliningIndicators/None.gif)
26
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
27
![](/Images/OutliningIndicators/InBlock.gif)
28
![](/Images/OutliningIndicators/InBlock.gif)
29
![](/Images/OutliningIndicators/InBlock.gif)
30
![](/Images/OutliningIndicators/InBlock.gif)
31
![](/Images/OutliningIndicators/InBlock.gif)
32
![](/Images/OutliningIndicators/InBlock.gif)
33
![](/Images/OutliningIndicators/InBlock.gif)
34
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
35
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
36
![](/Images/OutliningIndicators/None.gif)
37
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
38
![](/Images/OutliningIndicators/InBlock.gif)
39
![](/Images/OutliningIndicators/InBlock.gif)
40
![](/Images/OutliningIndicators/InBlock.gif)
41
![](/Images/OutliningIndicators/InBlock.gif)
42
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
43
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
44
![](/Images/OutliningIndicators/None.gif)
45
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
46
![](/Images/OutliningIndicators/InBlock.gif)
47
![](/Images/OutliningIndicators/InBlock.gif)
48
![](/Images/OutliningIndicators/InBlock.gif)
49
![](/Images/OutliningIndicators/InBlock.gif)
50
![](/Images/OutliningIndicators/InBlock.gif)
51
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
我的HTML
![](/Images/OutliningIndicators/ContractedBlock.gif)
我的效果图:
![](/images/cnblogs_com/htht66/tabDemo.jpg)
主要是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的边框也变成红色了,
本想让它不变。附源码样式
![](/Images/OutliningIndicators/ContractedBlock.gif)