javascript之通用简单的table选项卡实现(二)

所属分类：网络编程 / JavaScript 阅读数： 2035

收藏 0赞 0分享

回归原始，当样式切换后，把控制权还给页面，即table.js仅控制切换样式和记录操作：

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>New Web Project</title> 
<style type="text/css"> 
.sidebar { 
width: 140px; 
background: #C9E4D6; 
min-height: 600px; 
float: left; 
border-left: solid 1px #C8C8C8; 
} 
.sidebar ul { 
list-style:none; 
text-align: left; 
padding: 20px 0px 0px 0px; 
} 
.sidebar ul li { 
border-bottom: 1px dotted #C8C8C8; 
font-size: 14px; 
height: 30px; 
line-height: 30px; 
padding-left: 15px; 
margin-left: 15px; 
cursor: pointer; 
} 
.sidebar .active { 
background: #fff; 
} 
.content{ 
height:600px; 
width:400px; 
border-right:1px solid #ccc; 
margin-left:140px; 
padding:20px; 
display:none; 
} 
</style> 
</head> 
<body> 
<div class="sidebar" id="sidebar"> 
<ul> 
<li point="table1"> 
选项一 
</li> 
<li point="table2"> 
选项二 
</li> 
<li point="table3"> 
选项三 
</li> 
<li point="table4"> 
选项四 
</li> 
<li point="table5"> 
选项五 
</li> 
</ul> 
</div> 
<div id="table1" class="content"> 
这是第一个选项卡的内容 
</div> 
<div id="table2" class="content"> 
这是第二个选项卡的内容 
</div> 
<div id="table3" class="content"> 
这是第三个选项卡的内容 
</div> 
<div id="table4" class="content"> 
这是第四个选项卡的内容 
</div> 
<div id="table5" class="content"> 
这是第五个选项卡的内容 
</div> 
</body> 
<script type="text/javascript" src="table.js"> </script> 
<script type="text/javascript"> 
//回调函数 可用参数：obj.lastIndex(上次选项索引) obj.index(当前选项索引) obj.arr(选项卡元素数组) 
var back=function(obj) 
{ 
var lastPoint=obj.arr[obj.lastIndex].getAttribute("point"); 
var curentPoint=obj.arr[obj.index].getAttribute("point"); 
document.getElementById(lastPoint).style.display="none"; 
document.getElementById(curentPoint).style.display="block"; 
} 
//参数分别为：选项块ID 选中的样式 回调函数 默认选择项（0开始） 
table("sidebar", "active",back,0); 
</script> 
</html> 

复制代码代码如下:

 
//回调函数 可用参数：obj.lastIndex(上次选项索引) obj.index(当前选项索引) obj.arr(选项卡元素数组) 
var back=function(obj) 
{ 
var lastPoint=obj.arr[obj.lastIndex].getAttribute("point"); 
var curentPoint=obj.arr[obj.index].getAttribute("point"); 
document.getElementById(lastPoint).style.display="none"; 
document.getElementById(curentPoint).style.display="block"; 
} 
//参数分别为：选项块ID 选中的样式 回调函数 默认选择项（0开始） 
table("sidebar", "active",back,0); 

table.js代码如下：

复制代码代码如下:

 
/** 
* @author Sky 
*/ 
var table=function(id,active,callBack,index) 
{ 
table[id]=new Table(id,active,callBack,index); 
table[id].bind(); 
} 
var Table=function(id,active,callBack,index) 
{ 
this.index=parseInt(index)||0;//当前索引 
this.lastIndex=this.index;//上次索引 
this.callBack=callBack||function(){}; 
this.active=active||"active"; 
this.id=id; 
this.arr=document.getElementById(id).getElementsByTagName("li"); 
} 
Table.prototype={ 
bind:function() 
{ 
//初始化选项样式 
this.setTable(this.index); 
//绑定事件 
var _self=this; 
for (var i = 0; i < this.arr.length; i++) 
{ 
this.arr[i].setAttribute("extatt", i);//钩子 
this.arr[i].onclick = function(e) 
{ 
var _e = window.event||e; 
var _target=_e.srcElement || _e.target; 
_self.setTable(parseInt(_target.getAttribute("extatt"))); 
} 
} 
}, 
setTable:function(index) 
{ 
this.lastIndex=this.index; 
this.index=index; 
//清除之前选项的样式 
this.arr[this.lastIndex].className=""; 
//激活当前选项的样式 
this.arr[this.index].className=this.active; 
//执行回调函数 
this.callBack(table[this.id]); 
} 
} 