开始之前,先来看看 Switchable 能做什么:demo
该模块由 Switchable 基础类、插件和 Widget 类组成。Switchable 基础类抽象了切换的基本操作,通过插件机制实现了自动播放、循环、切换效果、延迟加载、倒计时动画等扩展功能,最后封装成各个 Widget 类,让用户能简明快速地调用。
Properties
container - String | HTMLElement
容器
triggers - Array
触点集合
panels - Array
面板集合
content - HTMLElement
存放面板的容器
length - Number
触点的个数
activeIndex - Number
被激活的触点序号
Events
beforeSwitch
切换前事件
switch
切换事件
KISSY.ready(function(S) {
var tabs = new S.Tabs('#demo1');
tabs.on('switch', function(ev) {
if (ev.toIndex === 0) {
alert('下一张是第一张');
}
});
});
Widgets
以上 Widget 类的调用方法请参考:demo
还可以通过 class hook 和 data-ks-switchable 实现自动实例化:autorender demo
看了上面的文档,是否觉得平淡无奇?但请你一定相信,Switchable 能做的事情远比上面丰富。一定程度上,只要组件的核心是可切换的,Switchable 就能帮你实现。请静心等待更详细的 Getting Started 系列,精彩才刚上映。
home › switchable :