[转帖]AjaxControlToolkit.TabContainer 自定义样式

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

搞了大半天，才搞大概。

我的CSS：

/*tab没有激活字体颜色，背景*/
2

.CustomTabStyle .ajax__tab_header
3

{
4

background: url(../images/b/che_service.gif) repeat-x bottom;
7

color:White;
9

}
11

/*可以设置tab背景图片——左；tab内容与tab的填充距离*/
12

.CustomTabStyle.ajax__tab_outer
13

{ padding-right:20px;
14

padding-left:20px;
15

}
17

/*可以设置tab背景图片——右；tab内容与tab的填充距离*/
19

.CustomTabStyle.ajax__tab_inner
21

{
22

}
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

margin-right:4px;
41

}
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

}

我的HTML

<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的边框也变成红色了，

本想让它不变。

附源码样式

/* 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

/* 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

/* 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

posted @ 2009-09-14 13:01 CIH 阅读(958) 评论(0) 收藏举报

刷新页面返回顶部

关注Web、数据库和XML数据交换技术

成功在于努力

[转帖]AjaxControlToolkit.TabContainer 自定义样式

公告