TabContainer CSS Design

觀看範例檔呢可以去這

http://www.asp.net/ajax/control-toolkit/live/

各種面板原始檔下載，可至AJAX的網站

http://www.codeplex.com/AtlasControlToolkit/Release/ProjectReleases.aspx?ReleaseId=4923

下載AjaxControlToolkit.zip 這個檔案。

解壓縮後，在AjaxControlToolkit → Tabs 資料夾中，就是TabContainer 切換面板的CSS與圖檔。

以下ㄋ，我就畫圖解析各別css所代表的含意與圖片位置

不過呢? 當你要轉換設計時呢，要將原本css中的 .ajax__tab_xp .....換成你自己取的名稱，例如

.ajax_tab_my .ajax__tab_header......

再放入自己設計的css文件中，套用即可。

記得要注意，在頁面拉入TabContainer時，因該說拉入任何ajax的元件，

一定要現在頁面拉入ScriptManager，執行才不會錯誤

那麼，知道各位置時，當然要了解，各項目的細節中要注意甚麼呢?

例如寬高要設定在哪裡? 文字大小勒?文字與圖片的上下左右距離，每個都設的話太麻煩，要設哪裡就可呢?等等

當然預設的css還包含內容中的拉霸，那以後再介紹囉!

/* 內容的拉霸scrolling */
.ajax__scroll_horiz {overflow-x:scroll;}
.ajax__scroll_vert {overflow-y:scroll;}
.ajax__scroll_both {overflow:scroll}
.ajax__scroll_auto {overflow:auto}

以下就是css中細節的說明(細節是用原本ajax設定的來做解析):





/* AJAX - TabContainer */

.ajax_tab_my .ajax__tab_header /*整體按鈕底*/{
font-family:verdana,tahoma,helvetica; /*設定文字*/
font-size:11px; /*文字大小*/
background:url("tab-line.gif") repeat-x bottom; /*背景圖片，水平重複，靠下對齊*/}

.ajax_tab_my .ajax__tab_body /*資料區*/{
font-family:verdana,tahoma,helvetica;/*設定文字*/
font-size:10pt;/*文字大小*/
border:1px solid #999999;/*邊框*/
border-top:0;/*邊框上頭寬度為0 → 就等於沒有上邊框囉*/
padding:8px; /*文字與邊框間隔*/
background-color:#ffffff;/*背景顏色*/}


.ajax_tab_my .ajax__tab_outer /*預設-右邊*/{
background:url("tab-right.gif") no-repeat right; /*背景圖片，不重複，靠右邊對齊*/
padding-right:4px; /*右邊距離→為此圖片的寬度，才能顯示圖片喔*/
height:21px; /*圖片高度*/}


.ajax_tab_my .ajax__tab_inner /*預設-左邊*/{
padding-left:3px;/*左邊距離→為此圖片的寬度*/
background:url("tab-left.gif") no-repeat;/*背景圖片，不重複*/}


.ajax_tab_my .ajax__tab_tab /*預設-中間*/{
background:url("tab.gif") repeat-x; /*背景圖片，水平重複*/
height:13px;/*圖片高度*/
padding:4px; /*文字與圖片邊間隔*/
margin:0;/*邊界為0*/}


.ajax_tab_my .ajax__tab_hover .ajax__tab_outer /*滑鼠經過-右*/{background:url("tab-hover-right.gif") no-repeat right; /*背景圖片，不重複，靠右對齊*/}


.ajax_tab_my .ajax__tab_hover .ajax__tab_inner /*滑鼠經過-左*/{background:url("tab-hover-left.gif") no-repeat; /*背景圖片，不重複*/}


.ajax_tab_my .ajax__tab_hover .ajax__tab_tab /*滑鼠經過-中*/{background:url("tab-hover.gif") repeat-x; /*背景圖片，水平重複*/}

.ajax_tab_my .ajax__tab_active .ajax__tab_outer/*使用中-右*/{background:url("tab-active-right.gif") no-repeat right;/*背景圖片，不重複，靠右對齊*/}


.ajax_tab_my .ajax__tab_active .ajax__tab_inner /*使用中-左*/{background:url("tab-active-left.gif") no-repeat;/*背景圖片，不重複*/}


.ajax_tab_my .ajax__tab_active .ajax__tab_tab /*使用中-中*/{background:url("tab-active.gif") repeat-x;/*背景圖片，水平重複*/}