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 相关文章推荐
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
Jul 19 Javascript
JS分割字符串并放入数组的函数
Jul 04 Javascript
JS操作数据库的实例代码
Oct 17 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
Dec 14 Javascript
利用JS判断用户是否上网(连接网络)
Dec 23 Javascript
浅谈轻量级js模板引擎simplite
Feb 13 Javascript
详解javascript中的事件处理
Nov 06 Javascript
基于jQuery实现返回顶部实例代码
Jan 01 Javascript
基于Javascript实现返回顶部按钮
Feb 29 Javascript
JQuery 的跨域方法推荐_可跨任何网站
May 18 Javascript
JS中定位 position 的使用实例代码
Aug 06 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
Oct 24 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
php封装好的人民币数值转中文大写类
2015/12/20 PHP
Windows Server 2008 R2和2012中PHP连接MySQL过慢的解决方法
2016/07/02 PHP
laravel创建类似ThinPHP中functions.php的全局函数
2016/11/26 PHP
PHP中的函数声明与使用详解
2017/05/27 PHP
鼠标移动到图片名上,显示图片的简单实例
2013/07/14 Javascript
jquery实现的鼠标下拉滚动置顶效果
2014/07/24 Javascript
jQuery中removeClass()方法用法实例
2015/01/05 Javascript
jquery实现页面虚拟键盘特效
2015/08/08 Javascript
整理Javascript流程控制语句学习笔记
2015/11/29 Javascript
React.js入门学习第一篇
2016/03/30 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
2016/05/31 Javascript
jquery动态创建div与input的实例代码
2016/10/12 Javascript
vue拖拽排序插件vuedraggable使用方法详解
2020/08/21 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
2019/09/02 Javascript
layui实现tab的添加拒绝重复的方法
2019/09/04 Javascript
Python 使用with上下文实现计时功能
2018/03/09 Python
利用python画出折线图
2018/07/26 Python
详解Python字典小结
2018/10/20 Python
Django models.py应用实现过程详解
2019/07/29 Python
对python 树状嵌套结构的实现思路详解
2019/08/09 Python
python pycharm最新版本激活码(永久有效)附python安装教程
2020/09/18 Python
Python实现名片管理系统
2020/02/14 Python
pyspark 随机森林的实现
2020/04/24 Python
python设置中文界面实例方法
2020/10/27 Python
canvas之万花筒效果的简单实现(推荐)
2016/08/16 HTML / CSS
利用HTML5 Canvas API绘制矩形的超级攻略
2016/03/21 HTML / CSS
配置H5的滚动条样式的示例代码
2018/03/09 HTML / CSS
Dr.Jart+美国官网:韩国药妆品牌
2019/01/18 全球购物
舞蹈教师自荐信
2014/01/27 职场文书
读书演讲主持词
2014/03/18 职场文书
小学师德标兵先进事迹材料
2014/05/25 职场文书
电子商务专业应届生求职信
2014/05/28 职场文书
2014年社区矫正工作总结
2014/11/18 职场文书
通知函的格式
2015/04/27 职场文书
学子宴致辞大全
2015/07/27 职场文书
只用50行Python代码爬取网络美女高清图片
2021/06/02 Python