YUI自带了一个TabView,尽管很强大,但在实际使用中,常常无法满足多变的需求。Tab切换应该不依赖于js生成,也不要对HTML结构进行约束,能给设计人员和前端开发最大的灵活性,同时利于SEO。原理:一个tab对象分为控制部分(trigger),内容部分(sheet)。当trigger被触发时,显示对应的sheet。以前大树写过一个TabControl的代码,经过两年的使用依旧很靠谱,说明当初这个思路还是比较符合实际需求的。这里我改成了基于YUI的版本,看起来更清晰一些。先访问测试页面查看效果,完整js代码在这里。注意:改成实际代码时,请将Tab类放在某个命名空间下,不要直接暴露在全局空间中。1:使用
以下是常用的html结构,但不限于此。t1t2t3s1s2s3对应的javascript代码如下,四种初始化方法都是可以的。// 1
var tab = new Tab($D.get('t').getElementsByTagName('li'), $D.get('s').getElementsByTagName('div'));
// 2
var tab = new Tab(['t1','t2', 't3'],['s1','s2', 's3']);
// 3
var tab = new Tab(['t1','t2','t3'],['s1','s2','s3'],{ trigge
...
继续阅读
(7)