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 相关文章推荐
让FireFox支持innerText的实现代码
Dec 01 Javascript
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
Dec 02 Javascript
js仿百度有啊通栏展示效果实现代码
May 28 Javascript
JS小游戏之宇宙战机源码详解
Sep 25 Javascript
javasript实现密码的隐藏与显示
May 08 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
Dec 24 Javascript
微信小程序实现图片预览功能
Jan 31 Javascript
纯JS实现可用于页码更换的飞页特效示例
May 21 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
May 22 Javascript
vue项目中使用百度地图的方法
Jun 08 Javascript
JS Array.from()将伪数组转换成数组的方法示例
Mar 23 Javascript
vue项目proxyTable配置和部署服务器
Apr 14 Vue.js
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与已存在的Java应用程序集成
2006/10/09 PHP
php的字符串用法小结
2010/06/08 PHP
微信利用PHP创建自定义菜单的方法
2016/08/01 PHP
PHP利用超级全局变量$_POST来接收表单数据的实例
2016/11/05 PHP
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
2017/07/03 PHP
定义JavaScript二维数组采用定义数组的数组来实现
2012/12/09 Javascript
jquery弹出框的用法示例(一)
2013/08/26 Javascript
js加入收藏以及使用Jquery更改透明度
2014/01/26 Javascript
js自定义鼠标右键的实现原理及源码
2014/06/23 Javascript
jQuery中parents()方法用法实例
2015/01/07 Javascript
js实现字符串转日期格式的方法
2015/05/20 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
2016/05/28 Javascript
Jq通过td获取同行其它列td的方法
2016/10/05 Javascript
详解jQuery的Cookie插件
2016/11/23 Javascript
JavaScript无缝滚动效果的实例代码
2017/03/27 Javascript
Bootstrap实现的标签页内容切换显示效果示例
2017/05/25 Javascript
在vue项目中优雅的使用SVG的方法实例详解
2018/12/03 Javascript
js数组去重的方法总结
2019/01/18 Javascript
Vue项目history模式下微信分享爬坑总结
2019/03/29 Javascript
JavaScript变量作用域及内存问题实例分析
2019/06/10 Javascript
Python中实现两个字典(dict)合并的方法
2014/09/23 Python
简单介绍Python中的filter和lambda函数的使用
2015/04/07 Python
Python正则简单实例分析
2017/03/21 Python
对python mayavi三维绘图的实现详解
2019/01/08 Python
Python中请不要再用re.compile了
2019/06/30 Python
Pytest框架之fixture的详细使用教程
2020/04/07 Python
详解如何使用Pytest进行自动化测试
2021/01/14 Python
CSS3近阶段篇之酷炫的3D旋转透视
2016/04/28 HTML / CSS
深入理解css中vertical-align属性
2017/04/18 HTML / CSS
老公给老婆的道歉信
2014/01/10 职场文书
大学生感恩父母演讲稿
2014/08/28 职场文书
庆祝新中国成立65周年“向国旗敬礼”网上签名寄语
2014/09/27 职场文书
红色革命电影观后感
2015/06/18 职场文书
2015年学校医务室工作总结
2015/07/20 职场文书
不要在HTML中滥用div
2021/05/08 HTML / CSS
Tomcat用户管理的优化配置详解
2022/03/31 Servers