首页 > web前端 > js教程 > 正文

YUI的Tab切换实现代码_YUI.Ext相关

WBOY
发布: 2016-05-16 18:29:49
原创
1368 人浏览过

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

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

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

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

复制代码 代码如下:


  • t1

  • t2

  • t3



s1

s2

s3



对应的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自定义事件扩展,也可以在原代码基础上添加更多的自定义事件。
相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!