利用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;