快捷導(dǎo)航

javascript 通用簡(jiǎn)單的table選項(xiàng)卡實(shí)現(xiàn)

更新時(shí)間：2010年05月07日 17:21:55 作者：

鑒于UI妹妹每次交付過(guò)來(lái)的選項(xiàng)卡都夾帶了多多少少的js，而且每遇到選項(xiàng)卡就加一點(diǎn)js，造成垃圾低劣代碼逐漸堆積過(guò)多了，一直想做一個(gè)通用簡(jiǎn)潔的選項(xiàng)卡庫(kù)。

第一步：引用table.js

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

第二步：定義選中的樣式，比如“active”，應(yīng)用選項(xiàng)卡的塊的ID，比如“sidebar”，默認(rèn)被選中的序號(hào)，比如第一個(gè)“0”；
第三步：調(diào)用函數(shù)：

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

<script type="text/javascript"> 
//參數(shù)分別為：默認(rèn)選擇項(xiàng) 應(yīng)用塊的id 選中的樣式 
table(0, "sidebar", "active") 
</script> 

一切OK，選項(xiàng)卡響應(yīng)click事件，兼任IE和FF，等有時(shí)間了再優(yōu)化，效果如下：

HTML源代碼如下：

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

 
<!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> 
<script type="text/javascript" src="table.js"> </script> 
<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; 
} 
</style> 
</head> 
<body> 
<div class="sidebar" id="sidebar"> 
<ul> 
<li> 
選項(xiàng)一 
</li> 
<li> 
選項(xiàng)二 
</li> 
<li> 
選項(xiàng)三 
</li> 
<li> 
選項(xiàng)四 
</li> 
<li> 
選項(xiàng)五 
</li> 
</ul> 
</div> 
</body> 
<script type="text/javascript"> 
//參數(shù)分別為：默認(rèn)選擇項(xiàng) 應(yīng)用塊的id 選中的樣式 
table(0, "sidebar", "active") 
</script> 
</html> 

table.js

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

 
/** 
* @author Sky 
*/ 
var table=function(index,id,active) 
{ 
table=new Table(index,id,active); 
table.bind(); 
} 
var Table=function(index,id,active) 
{ 
this.index=parseInt(index); 
this.arr=document.getElementById(id).getElementsByTagName("li"); 
this.active=active; 
} 
Table.prototype={ 
bind:function() 
{ 
this.arr[this.index].className=this.active;//初始化 
var _self=this; 
for (var i = 0; i < this.arr.length; i++) 
{ 
this.arr[i].setAttribute("ext", i); 
this.arr[i].onclick = function(e) 
{ 
var _e = window.event||e; 
var _target=_e.srcElement || _e.target; 
_self.setClass(parseInt(_target.getAttribute("ext"))); 
} 
} 
}, 
setClass:function(index) 
{ 
this.arr[this.index].className=""; 
this.arr[index].className=this.active; 
this.index=index; 
} 
} 