TabContainer 背景色的设置

Ajax自从引进了Tab，着实让我开心了一番。但是，在调整Tab的样式的时候，也着实让我吃了一惊。
于是，抱着没有困难也要制造困难的原则，开始了征途：
按照>Tab作者Ronald Buckton所说，Tab的CSS包含如下几个类：
(1).Ajax__tab_header: A container element that wraps all of the tabs at the top of the TabContainer.
(2).Ajax__tab_outer:An outer element of a tab,often used to set the left-side background image of the tab.
(3).Ajax__tab_inner:An inner element of a tab,often used to set the right-side image of the tab.
(4).Ajax__tab_tab:An element of a tab that contains the text content.
(5).Ajax__tab_body:A container element that wraps the area where a TabPanel is displayed.
(6).Ajax__tab_hover:This is applied to a tab when the mouse is hovering over.
(7).Ajax__tab_active:This is applied to a tab when it is the currently selected tab.

我画了个简图，当然，鼠标放上去(.Ajax__tab_hover)，和当前Tab(.Ajax__tab_active)的那个就没画上去。

<< 在虛擬機器下運行AD，遇到SID衝突的問題 | Home | 透過使用者互動才動態載入使用者控制項的問題 >>

自訂 AJAX Control Tookit 中的 TabContainer 其CSS樣式

Posted on 2008年6月5日 下午 01:03 我要推薦

AJAX Control Toolkit (Atlas) 提供了許多方便的AJAX控制項，關於其中Tab Container(標籤容器)： 針對預設CSS Style要修改的話，可以在開發頁面中，使用 IE Develop Tool 找出該控制項包含的CSS樣式；把預設的 ajax__tab_xp 改成自訂的名稱如 .sam__tab_xp，然後再控制項的CssClass屬性指定即可。

因為預設樣式的Tab大小(Height)只有21px，對於中文字及大多數的版面需求來說有點不夠，然而此控制項會運用到一些圖片來美化，我把它改成28px，有興趣的可以參考附件。修改時注意.ajax__tab_tab這個屬性，原始檔在官網上可以下載。

01 .sam__tab_xp .ajax__tab_body
02 {
03      BORDER-RIGHT: #999999 1px solid;
04      PADDING-RIGHT: 8px;
05      BORDER-TOP: #999999 0px solid;
06      PADDING-LEFT: 8px;
07      FONT-SIZE: 10pt;
08      PADDING-BOTTOM: 8px;
09      BORDER-LEFT: #999999 1px solid;
10      PADDING-TOP: 8px;
11      BORDER-BOTTOM: #999999 1px solid;
12      FONT-FAMILY: 微軟正黑體,verdana,tahoma,helvetica;
13      BACKGROUND-COLOR: #ffffff;
14 }
15  
16 .sam__tab_xp .ajax__tab_header  
17 {  
18      BACKGROUND:url(Image/AjaxTab/tab-line.gif) repeat-x bottom;  
19      FONT-SIZE: 16px;
20      FONT-FAMILY: 微軟正黑體,verdana,tahoma,helvetica;
21 }  
22  
23 .sam__tab_xp .ajax__tab_outer
24 {  
25      PADDING-RIGHT: 0px;
26      BACKGROUND:url(Image/AjaxTab/tab-right-h28.gif) no-repeat right;
27      HEIGHT: 28px;  
28 }  
29  
30 .sam__tab_xp .ajax__tab_inner
31 {
32      PADDING-LEFT: 3px;  
33      BACKGROUND:url(Image/AjaxTab/tab-left-h28.gif) no-repeat;  
34 }  
35  
36 .sam__tab_xp .ajax__tab_tab
37 {  
38     BACKGROUND:url(Image/AjaxTab/tab-h28.gif) repeat-x;
39     PADDING-RIGHT: 6px;
40     PADDING-LEFT: 6px;
41     PADDING-BOTTOM: 3px;
42     MARGIN: 0px;
43     PADDING-TOP: 5px;
44     HEIGHT: 20px;
45 }  
46  
47 .sam__tab_xp .ajax__tab_hover .ajax__tab_outer
48 {  
49     BACKGROUND:url(Image/AjaxTab/tab-hover-right-h28.gif) no-repeat right;  
50 }  
51  
52 .sam__tab_xp .ajax__tab_hover .ajax__tab_inner
53 {  
54     BACKGROUND:url(Image/AjaxTab/tab-hover-left-h28.gif) no-repeat;  
55 }  
56  
57 .sam__tab_xp .ajax__tab_hover .ajax__tab_tab
58 {  
59     BACKGROUND:url(Image/AjaxTab/tab-hover-h28.gif) repeat-x;  
60 }  
61  
62 .sam__tab_xp .ajax__tab_active .ajax__tab_outer
63 {  
64     BACKGROUND:url(Image/AjaxTab/tab-active-right-h28.gif) no-repeat right;  
65 }  
66  
67 .sam__tab_xp .ajax__tab_active .ajax__tab_inner
68 {  
69     BACKGROUND:url(Image/AjaxTab/tab-active-left-h28.gif) no-repeat;  
70 }  
71  
72 .sam__tab_xp .ajax__tab_active .ajax__tab_tab
73 {  
74     BACKGROUND:url(Image/AjaxTab/tab-active-h28.gif) repeat-x;