javascript之通用简单的table选项卡实现(二)
更新时间：2010年05月09日 11:24:13 作者：
上篇中的选项卡存在这样的问题：把逻辑封装在table.js中，不够灵活，也就是说如果某个选项卡是实现异步请求或者跳转，而非div的显隐切换，那么就得修过table.js来达到目的，显然不是我所需要的。
回归原始，当样式切换后，把控制权还给页面，即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]);
}
}
复制代码 代码如下:
<!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]);
}
}
相关文章
在浏览器中使用JavaScript获取本机IP地址是不可行的,因为浏览器的安全策略禁止JavaScript访问这样的信息,这篇文章主要给大家介绍了关于JavaScript获取本机IP地址的三种常用方式,需要的朋友可以参考下2023-12-12
本文给大家浅析javascript调试方法和技巧，涉及到javascript调试方法和技巧方面的知识，本文介绍的非常详细，非常具有参考借鉴介绍，感兴趣的朋友一起看看吧2015-10-10
这篇文章主要介绍了Postman动态获取返回值过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-06-06
不同浏览器或者版本之间对于console对象的支持不尽相同，而console方法在开发调试过程中都是不错的工具。难道要在上线前把所有console.xxxx去掉以保证某些浏览器不报错么。其实可以变通解决2013-10-10
这篇文章主要介绍了帝国cms首页列表页实现点赞功能的相关资料,需要的朋友可以参考下2017-10-10
本文主要介绍了JavaScript判断当前时间是在某个时间点之前/之后，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
这篇文章主要介绍了javascript 闭包详解及应用的相关资料,需要的朋友可以参考下2016-12-12
javascript中定时器setTimeout无法调用局部变量，只需要将setTimeout的第一个参数改成函数对象，而不是字符串，就可以了2013-11-11
本文主要对节点的创建及常见功能的实现方法进行介绍，希望会对大家学习javascript有所帮助，下面就跟小编一起来看下吧2016-12-12
这篇文章主要介绍了JavaScript中的方法调用详细介绍,JavaScript中,如果function属于一个对象,那么通过对象来访问该function的行为称之为“方法调用”,需要的朋友可以参考下2014-12-12
最新评论