YUI的Tab切换实现代码


Posted in Javascript onApril 11, 2010

Tab切换应该不依赖于HTML结构,能给设计人员和前端开发最大的灵活性。原理:一个tab对象分为控制部分(trigger),内容部分(sheet)。当trigger被触发时,显示对应的sheet。

以前大树写过一个TabControl的代码,经过两年的使用依旧很考谱,说明当初这个思路还是比较符合实际需求的。我改成了基于YUI的版本,可能看起来更清晰一些。先访问测试页面查看效果,完整javascript代码在这里。

注意:改成实际代码时,请将Tab类放在某个命名空间下,不要直接暴露在全局空间中。

1:使用
以下是常用的html结构,但不限于此。

<ul id="t"> 
<li id="t1">t1</li> 
<li id="t2">t2</li> 
<li id="t3">t3</li> 
</ul> 
<div id="s"> 
<div id="s1">s1</div> 
<div id="s2">s2</div> 
<div id="s3">s3</div> 
</div>

对应的javascript代码如下,四种初始化方法都是可以的。
var tab = new Tab($D.get('t').getElementsByTagName('li'), $D.get('s').getElementsByTagName('div'));//1 
var tab = new Tab(['t1','t2', 't3'],['s1','s2', 's3']);//2 
var tab = new Tab(['t1','t2','t3'],['s1','s2','s3'],{ triggerEvent:'mouseover',slideEnabled:true});//3 
var tab = new Tab();//4 
tab.add('t1', 's1'); 
tab.add('t2', 's2'); 
tab.add('t3', 's3'); 
tab.config['triggerEvent'] = 'mouseover'; 
tab.config['slideEnabled'] = true; 
tab.onShow.subscribe(function(t, a){ ... }); 
tab.init();

2:扩展
已经实现自动切换功能(默认关闭),另外可以通过onShow自定义事件扩展,也可以在原代码基础上添加更多的自定义事件。
Javascript 相关文章推荐
ExtJS4 动态生成的grid导出为excel示例
May 02 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
Apr 26 Javascript
jQuery实现带渐显效果的人物多级关系图代码
Oct 16 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
Nov 16 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
Dec 01 Javascript
Bootstrap每天必学之按钮(Button)插件
Apr 25 Javascript
详解自动生成博客目录案例
Dec 09 Javascript
JS实现隔行换色的表格排序
Mar 27 Javascript
ionic选择多张图片上传的示例代码
Oct 10 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
Nov 09 Javascript
关于jquery layui弹出层的使用方法
Apr 21 jQuery
javascript中call()、apply()的区别
Mar 21 Javascript
利用JS重写Cognos右键菜单的实现代码
Apr 11 #Javascript
可以将word转成html的js代码
Apr 11 #Javascript
jquery 表格分页等操作实现代码(pagedown,pageup)
Apr 11 #Javascript
jquery 模拟雅虎首页的点击对话框效果
Apr 11 #Javascript
url 编码 js url传参中文乱码解决方案
Apr 11 #Javascript
jquery学习笔记二 实现可编辑的表格
Apr 09 #Javascript
jquery 图片截取工具jquery.imagecropper.js
Apr 09 #Javascript
You might like
如何跨站抓取别的站点的页面的补充
2006/10/09 PHP
PHP COOKIE设置为浏览器进程
2009/06/21 PHP
php 变量未定义等错误的解决方法
2011/01/12 PHP
PHP常用技巧总结(附函数代码)
2012/02/04 PHP
php获取从html表单传递数组的方法
2015/03/20 PHP
php提取身份证号码中的生日日期以及验证是否为成年人的函数
2015/09/29 PHP
PHP精确到毫秒秒杀倒计时实例详解
2019/03/14 PHP
从ThinkPHP3.2.3过渡到ThinkPHP5.0学习笔记图文详解
2019/04/03 PHP
jquery 问答知识整理
2010/02/11 Javascript
使用javascript获取flash加载的百分比的实现代码
2011/05/25 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
2011/07/15 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
2012/05/23 Javascript
Extjs显示从数据库取出时间转换JSON后的出现问题
2012/11/20 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
2014/01/10 Javascript
简述Jquery与DOM对象
2015/07/10 Javascript
javascript将DOM节点添加到文档的方法实例分析
2015/08/04 Javascript
Jquery常用的方法汇总
2015/09/01 Javascript
uploadify多文件上传参数设置技巧
2015/11/16 Javascript
JavaScript事件学习小结(一)事件流
2016/06/09 Javascript
Javascript中call,apply,bind方法的详解与总结
2016/12/12 Javascript
ES6中Math对象新增的方法实例详解
2017/04/25 Javascript
利用Vue.js实现求职在线之职位查询功能
2017/07/03 Javascript
vuejs 制作背景淡入淡出切换动画的实例
2018/09/01 Javascript
JSX在render函数中的应用详解
2019/09/04 Javascript
[01:00:59]VP VS VG Supermajor小组赛胜者组第二轮 BO3第二场 6.2
2018/06/03 DOTA
python中set常用操作汇总
2016/06/30 Python
利用python实现在微信群刷屏的方法
2019/02/21 Python
python实现飞机大战游戏
2020/10/26 Python
java中的控制结构(if,循环)详解
2019/06/26 Python
CSS3制作缩略图的详细过程
2016/07/08 HTML / CSS
英国领先的男装设计师服装独立零售商:Repertoire Fashion
2020/10/19 全球购物
校友会欢迎辞
2014/01/13 职场文书
幼儿教师寄语集锦
2014/04/03 职场文书
创先争优一句话承诺
2014/05/29 职场文书
社团活动总结报告
2014/06/27 职场文书
企业百日安全活动总结
2015/05/07 职场文书