利用JScript/CSS 編程技術類比實現TABView控制項

標題     利用JScript/CSS 編程技術類比實現TABView控制項    zosatapo（原作）
    
關鍵字     JScript CSS TABView 控制項 網頁設計
    
利用JScript/CSS 編程技術類比實現TABView控制項
[key word] JScript CSS TABView 控制項 網頁設計
[abstract]本文介紹JSCript/CSS編程來類比實現TABView控制項。
[Author] zosatapo(CSDN會員)
[Email]    dertyang@263.net
[本文]
熟悉可視化介面編程的朋友一定很熟悉各種控制項。在所有的控制項中有一個控制項在資料庫應用編程中
經常用到，這個控制項就是TabView控制項，當然也可以叫屬性頁面(PropertyPage)。本文將利用JScipt結合CSS
技術在網頁中類比實現這個控制項。
現在先介紹一下介面的主要組成部分。根據對TabView控制項的分析理解，我把介面分成兩個部分。一是
Tab部分(或者叫頁面控制部分)，一是頁面部分（或者叫內容部分）。同時為了本文描述簡單，TAB控制部分
的每個TAB只有兩種狀態（啟用或者非啟用）,每個TAB控制一個單獨的頁面。同時為了使用的靈活性原因，
頁面設計這個任務應該由使用者自己來完成設計，但是要符合一定的格式要求。
現在正式開始解釋這個控制項的實現要素和實現過程。
//////////////////////////////////////////////////////
////////            實現要素部分        //////
//////////////////////////////////////////////////////
[要素一]控制項使用的主要樣式列表
.TabActive {
color: #ffff00;
font-family:宋體;font-size:9pt;
font-weight: bold;
background-color: #6699CC;
cursor: default;
border-top: 2px outset #99ccff;
border-right: 2px outset #336699;
    }
//上面是Tab處於啟用狀態時使用的樣式
.TabInactive {
color: #FFFFFF;
font-family:宋體;font-size:9pt;
font-weight: normal;
background-color: #003366;
cursor: hand;
border-right: 1px solid #99ccff;
border-bottom: 1px solid #99ccff;