http://www.asp.net/AJAX/AjaxControlToolkit/Samples/Tabs/Tabs.aspx
TabContainer是个集合、容器,里面可以包含多个TabPanel。系统提供的样式很不理想需要override。
搞了大半天,才搞大概。
我的CSS:
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
1<table width="950" border="0" cellspacing="0" cellpadding="0">
2 <tr style="height: 300px;" valign="top">
3 <td width="350" align="left">
4 <ajaxToolkit:TabContainer ID="TabContainer1" runat="server" CssClass="CustomTabStyle"
5 Width="100%" Height="300">
6 <ajaxToolkit:TabPanel ID="tabChe" runat="server" HeaderText="车辆服务">
7 <ContentTemplate>
8 车辆服务
9 </ContentTemplate>
10 </ajaxToolkit:TabPanel>
11 <ajaxToolkit:TabPanel ID="tabFang" runat="server" HeaderText="房产服务">
12 <ContentTemplate>
13 房产服务
14 </ContentTemplate>
15 </ajaxToolkit:TabPanel>
16 <ajaxToolkit:TabPanel ID="tabPost" runat="server" HeaderText="论坛热帖">
17 <ContentTemplate>
18 论坛热帖
19 </ContentTemplate>
20 </ajaxToolkit:TabPanel>
21 </ajaxToolkit:TabContainer>
22 </td>
23 <td width="350">
24 <div style="margin-left: 8px;">
25 <ajaxToolkit:TabContainer ID="TabContainer2" runat="server" CssClass="CustomTabStyle"
26 Width="348" Height="300">
27 <ajaxToolkit:TabPanel ID="TabPanel1" runat="server" HeaderText="家政服务">
28 <ContentTemplate>
29 家政服务
30 </ContentTemplate>
31 </ajaxToolkit:TabPanel>
32 <ajaxToolkit:TabPanel ID="TabPanel2" runat="server" HeaderText="理财服务">
33 <ContentTemplate>
34 理财服务
35 </ContentTemplate>
36 </ajaxToolkit:TabPanel>
37 <ajaxToolkit:TabPanel ID="TabPanel3" runat="server" HeaderText="论坛热帖">
38 <ContentTemplate>
39 论坛热帖
40 </ContentTemplate>
41 </ajaxToolkit:TabPanel>
42 </ajaxToolkit:TabContainer>
43 </div>
44 </td>
45 <td>
46 <table cellpadding="0" cellspacing="0" style="width: 242px; margin-left: 8px;">
47 <tr style="height: 30px;">
48 <td style="width: 9px; height: 30px; background: url(../images/b/hot_left.gif) no-repeat;">
49 </td>
50 <td style="width: 223px; background: url(../images/b/hot_center.gif) repeat-x;">
51 <img src="../images/b/hot.gif" alt="hot" /></td>
52 <td style="width: 9px; height: 30px; background: url(../images/b/hot_right.gif) no-repeat">
53 </td>
54 </tr>
55 <tr>
56 <td colspan="3">
57 <table cellpadding="0" cellspacing="0">
58 <tr>
59 <td class="hotbody">
60 ss</td>
61 </tr>
62 </table>
63 </td>
64 </tr>
65 </table>
66 </td>
67 </tr>
68 </table>
我的效果图:
主要是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的边框也变成红色了,
本想让它不变。附源码样式
1/**//* default layout */
2.ajax__tab_default .ajax__tab_header {}{white-space:nowrap;}
3.ajax__tab_default .ajax__tab_outer {}{display:-moz-inline-box;display:inline-block}
4.ajax__tab_default .ajax__tab_inner {}{display:-moz-inline-box;display:inline-block}
5.ajax__tab_default .ajax__tab_tab {}{margin-right:4px;overflow:hidden;text-align:center;cursor:pointer;display:-moz-inline-box;display:inline-block}
6
7/**//* xp theme */
8.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;}
9.ajax__tab_xp .ajax__tab_outer {}{padding-right:4px;background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-right.gif")%>) no-repeat right;height:21px;}
10.ajax__tab_xp .ajax__tab_inner {}{padding-left:3px;background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-left.gif")%>) no-repeat;}
11.ajax__tab_xp .ajax__tab_tab {}{height:13px;padding:4px;margin:0;background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab.gif")%>) repeat-x;}
12.ajax__tab_xp .ajax__tab_hover .ajax__tab_outer {}{background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-hover-right.gif")%>) no-repeat right;}
13.ajax__tab_xp .ajax__tab_hover .ajax__tab_inner {}{background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-hover-left.gif")%>) no-repeat;}
14.ajax__tab_xp .ajax__tab_hover .ajax__tab_tab {}{background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-hover.gif")%>) repeat-x;}
15.ajax__tab_xp .ajax__tab_active .ajax__tab_outer {}{background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-active-right.gif")%>) no-repeat right;}
16.ajax__tab_xp .ajax__tab_active .ajax__tab_inner {}{background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-active-left.gif")%>) no-repeat;}
17.ajax__tab_xp .ajax__tab_active .ajax__tab_tab {}{background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-active.gif")%>) repeat-x;}
18.ajax__tab_xp .ajax__tab_body {}{font-family:verdana,tahoma,helvetica;font-size:10pt;border:1px solid #999999;border-top:0;padding:8px;background-color:#ffffff;}
19
20/**//* scrolling */
21.ajax__scroll_horiz {}{overflow-x:scroll;}
22.ajax__scroll_vert {}{overflow-y:scroll;}
23.ajax__scroll_both {}{overflow:scroll}
24.ajax__scroll_auto {}{overflow:auto}
25