开始之前,先来看看 Switchable 能做什么:demo

该模块由 Switchable 基础类、插件和 Widget 类组成。Switchable 基础类抽象了切换的基本操作,通过插件机制实现了自动播放、循环、切换效果、延迟加载、倒计时动画等扩展功能,最后封装成各个 Widget 类,让用户能简明快速地调用。

Properties

container - String | HTMLElement

容器

config - Object

Switchable 的配置信息。具体配置项请参考 源码

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

Tabs - 标签页 Tabs( selector, config )

Slide - 卡盘 Slide( selector, config )

Carousel - 旋转木马 Carousel( selector, config )

Accordion - 手风琴 Accordion( selector, config )

以上 Widget 类的调用方法请参考:demo
还可以通过 class hook 和 data-ks-switchable 实现自动实例化:autorender demo

看了上面的文档,是否觉得平淡无奇?但请你一定相信,Switchable 能做的事情远比上面丰富。一定程度上,只要组件的核心是可切换的,Switchable 就能帮你实现。请静心等待更详细的 Getting Started 系列,精彩才刚上映。