IDC资讯中心
标题 利用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;
}
//上面是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="">
<meta name="description" content="">
<style type="text/css">
.titlebar {font-family:宋体; font-size:9pt;color:#003300;background-color:#99cc99}
body {font-family:宋体;font-size:9pt; background-color:#f5f0e6;}
.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;
}
.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;
}
.tabinactiveover {
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;
}
.tabinactiveempty {
color: #ffffff;
font-family:宋体;font-size:9pt;
font-weight: normal;
cursor: hand;
border-right: 1px solid #99ccff;
border-bottom: 1px solid #99ccff;
}
.tabbarnt {background-color:#eeeeee;
width:96%;height:21px;}
.pagent {
background-color:#f5f0e6;
width:100%;height:508px;
padding-left:0px;padding-top:2px;
}
</style>
<script language="javascript">
<!–
//辅助函数
function ltrim(str)
{
return str.replace(/^\s*/,"");
}
function rtrim(str)
{
return str.replace(/\s*$/,"");
}
function trim(str)
{
var strtmp;
strtmp=ltrim(str);
strtmp=rtrim(strtmp);
return strtmp;
}
//–>
</script>
<script language="javascript">
<!–
//定义数组
var folder1=new array("tab1","tabactive","page1");
var folder2=new array("tab2","tabinactive","page2");
var folder3=new array("tab3","tabinactive","page3");
//–>
</script>
<script language="javascript">
<!–
//得到tab控制部分的元素个数
function gettabpartcount()
{
var count=1;
while(eval("window.folder"+count)){count++;}
count–;
return count;
}
function createfolder()
{
document.write("<table bgcolor=#6699cc border=0 cellpadding=0 "+
"cellspacing=0 id=tabbar style=background-color:transparent; width=100%>");
document.write("<tr height=24 valign=center>");
tabnum=gettabpartcount();
i=1;
while(i<tabnum+1){
folder=eval("folder"+i);
document.write("<td class="+folder[1]+" id="+folder[0]+
" align=center>"+folder[2]+"</td>");
i++;
}
totalnum=tabnum+1;
document.write("<td class=tabinactive width=100%> </td>");
document.write("</tr><tr height=4><td colspan="+totalnum+" valign=top bgcolor=#6699cc> </td></tr>");
document.write("<tr><td bgcolor=#f5f0e6 colspan="+totalnum+" height=16 valign=top></td></tr></table>");
}
function gettabpartarray()
{
var objreturn=new array();
var obj=null;
var count=gettabpartcount();
var i=1;
while(i<=count)
{
obj=eval("window.folder"+i);
obj=document.all(obj[0]);
if(obj!=null)
{
objreturn[objreturn.length]=obj;
}
i++;
}
return objreturn;
}
function getcurrentactivetab()
{
var ttabarray=gettabpartarray();
for(var i=0;i<ttabarray.length;i++)
{
if(ttabarray[i].classname=="tabactive")
{
return ttabarray[i];
}
}
}
function getcurrentactivepage()
{
var obj=getcurrentactivetab();
var pageid=obj.innertext;
var page=getpagebyid(pageid);
return page;
}
function getpagebyid(pageid)
{
var obj=document.all(pageid);
return obj;
}
function gettabbyid(tabid)
{
var obj=document.all(tabid);
return obj;
}
function tab_onclick()
{
var curtab=getcurrentactivetab();
var curpage=getcurrentactivepage();
var objtab=gettdfrompoint();
var pageid=null;
var objpage=null;
if(objtab!=null)
{
pageid=objtab.innertext;
//alert(pageid);
objpage=getpagebyid(pageid);
if(curtab.id==objtab.id)
{
return;
}
else
{
objpage.style.display="block";
curpage.style.display="none";
objtab.classname="tabactive";
//alert(objtab.classname);
curtab.classname="tabinactive";
}
}
}
function gettdfrompoint()
{
var obj=event.srcelement;
if((obj.tagname=="td")&&((obj.classname=="tabinactive")||(obj.classname=="tabactive")))
{
return obj;
}
else
{
return null;
}
}
function fattachevent()
{
var objtabarray=gettabpartarray();
for(i=0;i<objtabarray.length;i++)
{
var tabid=objtabarray[i].id;
//alert(tabid);
objtabarray[i].attachevent("onclick",new function("tab_onclick()"));
}
}
//–>
</script>
<script language="javascript">
<!–
createfolder();
fattachevent();
//–>
</script>
</head>
<body bgcolor="#ffffff">
<input type="button" value="test" onclick="tab_onclick(document.all(tab2))">
<div id="page1" class="pagent" style="display:block">
<p align="center"><font size="4">this test page : page one</font></p>
<table align="center" border="1">
<tr>
<td>name</td>
<td>age</td>
</tr>
<tr>
<td>zosatapo</td>
<td>23</td>
</tr>
</table>
</div>
<div id="page2" class="pagent" style="display:none">
<p align="center"><font size="4">this test page : page two</font></p>
<table align="center" border="1">
<tr>
<td>name</td>
<td>age</td>
</tr>
<tr>
<td>zosatapo</td>
<td>23</td>
</tr>
</table>
</div>
<div id="page3" class="pagent" style="display:none">
<p align="center"><font size="4">this test page : page three</font></p>
<table align="center" border="1">
<tr>
<td>name</td>
<td>age</td>
</tr>
<tr>
<td>zosatapo</td>
<td>23</td>
</tr>
</table>
</div>
</body>
</html>
