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


Posted in Javascript onMay 09, 2010

回归原始,当样式切换后,把控制权还给页面,即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]); 
} 
}
Javascript 相关文章推荐
ie支持function.bind()方法实现代码
Dec 27 Javascript
js遍历、动态的添加数据的小例子
Jun 22 Javascript
JavaScript原生对象之String对象的属性和方法详解
Mar 13 Javascript
Javascript实现鼠标框选操作  不是点击选取
Apr 14 Javascript
用jquery获取自定义的标签属性的值简单实例
Sep 17 Javascript
JavaScript中创建对象的7种模式详解
Feb 21 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
Jul 13 Javascript
bootstrap table服务端实现分页效果
Aug 10 Javascript
微信小程序传值以及获取值方法的详解
Apr 29 Javascript
详解Vscode中使用Eslint终极配置大全
Nov 08 Javascript
原生js滑动轮播封装
Jul 31 Javascript
Vue基于localStorage存储信息代码实例
Nov 16 Javascript
javascript动态添加表格数据行(ASP后台数据库保存例子)
May 08 #Javascript
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
May 07 #Javascript
javascript 通用简单的table选项卡实现
May 07 #Javascript
jQuery 创建Dom元素
May 07 #Javascript
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
May 06 #Javascript
jQuery Selector选择器小结
May 06 #Javascript
Jquery 动态添加按钮实现代码
May 06 #Javascript
You might like
PHP中对于浮点型的数据需要用不同的方法解决
2014/03/11 PHP
yii实现model添加默认值的方法(2种方法)
2016/01/06 PHP
PHP实现多图上传(结合uploadify插件)思路分析
2016/11/30 PHP
基于php(Thinkphp)+jquery 实现ajax多选反选不选删除数据功能
2017/02/24 PHP
ThinkPHP框架实现导出excel数据的方法示例【基于PHPExcel】
2018/05/12 PHP
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
2011/08/09 Javascript
jquery 构造函数在表单提交过程中修改数据
2015/05/25 Javascript
JavaScrip调试技巧之断点调试
2015/10/22 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
2017/02/14 Javascript
angular.js指令中的controller、compile与link函数的不同之处
2017/05/10 Javascript
详解angularjs中如何实现控制器和指令之间交互
2017/05/31 Javascript
JavaScript闭包和回调详解
2017/08/09 Javascript
Node.js使用Koa搭建 基础项目
2018/01/08 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
2018/10/01 Javascript
JS中实现一个下载进度条及播放进度条的代码
2019/06/10 Javascript
jquery ajax 请求小技巧实例分析
2019/11/11 jQuery
[03:13]DOTA2-DPC中国联赛1月25日Recap集锦
2021/03/11 DOTA
使用python实现rsa算法代码
2016/02/17 Python
Python信息抽取之乱码解决办法
2017/06/29 Python
Python字符串拼接六种方法介绍
2017/12/18 Python
Python实现随机生成手机号及正则验证手机号的方法
2018/04/25 Python
对Tensorflow中的变量初始化函数详解
2018/07/27 Python
Flask之请求钩子的实现
2018/12/23 Python
在python中利用最小二乘拟合二次抛物线函数的方法
2018/12/29 Python
如何Tkinter模块编写Python图形界面
2020/10/14 Python
css3 矩阵的使用详解
2018/03/20 HTML / CSS
企业行政文员岗位职责
2013/12/03 职场文书
《圆明园的毁灭》教学反思
2014/02/28 职场文书
新春联欢会主持词
2014/03/24 职场文书
希特勒的演讲稿
2014/05/23 职场文书
售后客服个人自我评价
2014/09/14 职场文书
政协委员个人总结
2015/03/03 职场文书
2015建军节87周年演讲稿
2015/03/19 职场文书
道歉信范文
2015/05/12 职场文书
2016年习主席讲话学习心得体会
2016/01/20 职场文书
初三语文教学反思
2016/03/03 职场文书