YUI实现的Tab切换

Pan — Sat, 14 Feb 2009 16:19:20 +0000

YUI自带了一个TabView，虽然很简洁也很强大，但是常常不是想要的那种。Tab切换应该不依赖于HTML结构，能给设计人员和前端开发最大的灵活性。原理：一个tab对象分为控制部分(trigger)，内容部分(sheet)。当trigger被触发时，显示对应的sheet。

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

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

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

对应的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自定义事件扩展，也可以在原代码基础上添加更多的自定义事件。

基于YUI的封装开发

Pan — Tue, 03 Feb 2009 15:32:47 +0000

这是去年我在一次公司内部讨论会上的交流主题，相关ppt和样例代码在这里下载。

YUI是Yahoo的前端开发框架，它的优点是代码清晰（尽管代码量不小），面向对象和组件，便于协同开发。另外，Yahoo对web开发社区的贡献一直都很积极。

在YUI上扩展开发，一般会采用两种方式，基于对象（object）和基于原型（prototype）。

1. 基于对象（object）
形如singleton单件模式，保证命名空间整洁，方便管理代码。

实例

2. 基于原型（prototype）
灵活度高，适合编写通用组件。

实例