利用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;
}
//上面是tab处于非激活状态时使用的样式
.pagent {
background-color:#f5f0e6;
width:100%;height:508px;
padding-left:0px;padding-top:2px;
}
//上面是tab控制的页面使用的样式
[要素二]动态生成tab控制部分代码
这个部分功能主要由多个tab控件控制说明数组和一个函数组成。
数组采用下面的形式：
//tab部分tabid tab部分的初始运行类类型 tab部分对应的页面pageid
var folder1=new array("tab1","tabactive","page1");
//这里请注意：程序把第一把tab部分的初始运行类类型定义为tabactive的项目选择为
//默认的选择项，其对应页面也作为默认显示页面。
********************重要提示**************************
//但是为了简单，实际上也符合逻辑，应该所有定义中只有一个控制初始化
//运行类类型定义为tabactive
//下面这个函数根据数组生成tabview的控制部分。
function createfolder()
{
...
};
[具体请参阅文后源代码]
[要素三]tabview控件的功能模拟
正如上面所讲的那样，本文尽可能把代码写的简单，把实现说的更容易理解一点。
所以这个模拟控件没有实现mouseover以及mouseout时间响应，同时我也没有使用
更新的htc组件技术。我下篇文章会写一个组件的例子。
本文在tabview控件的tab控制部分生成以后只是简单为其提供一个click事件处理器。
这样就可以模拟了真正tabview控件的换页功能。页面部分用户根据下面的规则按照
自己对页面内容的需要自己添加。下文我会在实现过程部分对此有详细的说明。
//////////////////////////////////////////////////////
//////// 实现过程部分 //////
//////////////////////////////////////////////////////
[步骤一]建立tabview控件的控制数组定义
var folder1=new array("tab1","tabactive","page1");
var folder2=new array("tab2","tabinactive","page2");
...
[步骤二]动态生成tabview控件的控制部分
调用函数createfolder()读取数组定义按照格式生成tabview控件的控制部分。
[步骤三]用户生成自己的页面（可以静态也可以是动态。本文示例为静态）
//下面是页面要求的格式
<div id="case detail" class="pagent" style="display:none">
//页面格式中有两个是必须的。一个是id必须是[]
//这里用户可以自由的添加自己需要的内容
</div>
[步骤四]为tabview控件的控制部分中的每一个tab安装事件处理器
tab.attachevent("onclick",new function("tab_onclick(this)"));
到这里利用jscript/css模拟实现简单tabview控件的工作就全部结束了。
现在可以在ie浏览自己的控件了，感觉不错吧。
//////////////////////////////////////////////////////
//////// 结束语 //////
//////////////////////////////////////////////////////
本文只是简单模拟一下tabview控件，要真正在web下面实现一个tabview要考虑
很多其他的因素，不如上面提供的tab控制部分onmouseover,onmouseout等事件
的响应问题。同时随着xml技术的发展，我们可以更好的利用数据库结合服务器
端软件动态生成tabview的控制页面。同时如果我们采用htc组件技术的话，我们
也可以写出可重用性更高的代码。
//////////////////////////////////////////////////////
//////// 本文使用全部源代码 //////
//////////////////////////////////////////////////////
为了方面我把所有的文件都放在了一个文档中了。你根据需要可以
把javascript/jscript以及css,htm文件各自独立出来。
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title> new document </title>
<meta name="generator" content="editplus">
<meta name="author" content="">
<meta name="keywords" content="">
