快捷導(dǎo)航

javascript之通用簡單的table選項卡實現(xiàn)(二)

更新時間：2010年05月09日 11:24:13 作者：

上篇中的選項卡存在這樣的問題：把邏輯封裝在table.js中，不夠靈活，也就是說如果某個選項卡是實現(xiàn)異步請求或者跳轉(zhuǎn)，而非div的顯隱切換，那么就得修過table.js來達(dá)到目的，顯然不是我所需要的。

回歸原始，當(dāng)樣式切換后，把控制權(quán)還給頁面，即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"> 
這是第一個選項卡的內(nèi)容 
</div> 
<div id="table2" class="content"> 
這是第二個選項卡的內(nèi)容 
</div> 
<div id="table3" class="content"> 
這是第三個選項卡的內(nèi)容 
</div> 
<div id="table4" class="content"> 
這是第四個選項卡的內(nèi)容 
</div> 
<div id="table5" class="content"> 
這是第五個選項卡的內(nèi)容 
</div> 
</body> 
<script type="text/javascript" src="table.js"> </script> 
<script type="text/javascript"> 
//回調(diào)函數(shù) 可用參數(shù)：obj.lastIndex(上次選項索引) obj.index(當(dāng)前選項索引) obj.arr(選項卡元素數(shù)組) 
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"; 
} 
//參數(shù)分別為：選項塊ID 選中的樣式 回調(diào)函數(shù) 默認(rèn)選擇項（0開始） 
table("sidebar", "active",back,0); 
</script> 
</html> 

復(fù)制代碼代碼如下:

 
//回調(diào)函數(shù) 可用參數(shù)：obj.lastIndex(上次選項索引) obj.index(當(dāng)前選項索引) obj.arr(選項卡元素數(shù)組) 
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"; 
} 
//參數(shù)分別為：選項塊ID 選中的樣式 回調(diào)函數(shù) 默認(rèn)選擇項（0開始） 
table("sidebar", "active",back,0); 

table.js代碼如下：

復(fù)制代碼代碼如下:

 
/** 
* @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;//當(dāng)前索引 
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=""; 
//激活當(dāng)前選項的樣式 
this.arr[this.index].className=this.active; 
//執(zhí)行回調(diào)函數(shù) 
this.callBack(table[this.id]); 
} 
} 