Switchable

Switchable 提供了切换的基本操作，并通过参数配置实现了自动播放，循环，切换等操作，并提供不同的特点封装成了 Slide, Carousel 模块。用户可以根据自己的需求引用不同的模块。

Switchable 继承了 Widget，可使用其中包括 Base、Class、Events、Attrs、Aspect 的属性和方法。

配置说明

triggers element|String|Array

触发器列表, 支持直接传入选择器，也可以是元素数组。

panels element|String|Array

面板列表，支持直接传入选择器，也可以是元素数组。

注意: 如果页面上有多个 Switchable 组件, triggers 和 panels 的 selector 最好写的更加精确些, 比如 triggers: '#banner .ui-switchable-nav li', 而不是 triggers: '.ui-switchable-nav li', 这样能避免多个组件引用 triggers/panels 的冲突.

classPrefix String

样式前缀。

hasTriggers boolean

是否包含 triggers，用于没有传入 triggers 时，是否自动生成的判断标准。

autoHideTriggers boolean

在只有一个 trigger 时是否自动隐藏。

triggerType String

触发类型，默认hover.还可以选择click

delay Number

默认为100， 触发器延迟时间，单位为毫秒。

activeTriggerClass String

触发器被选中时的class,默认ui-switchable-active。

activeIndex Number

初始化时，自动切换到指定面板，默认为0，也就是第一个。

step Number

步长，表示每次切换时需要间隔多少个panels, 默认为1。

size Number

可视窗口有多少个显示面板, 默认为1。

viewSize Array

可见视图区域的大小. 如果 css 中不设置 panel 的高宽或初始没有 panel , 则需要这里手工指定大小, 默认为 [].

当 panel 的高宽 css 中不指定时，需要设置 viewSize 为单个 panel 的高宽.

autoplay Boolean

是否自动切换，默认为false, 开启后，不需要触发触发器，可以实现自动播放。

interval Number

自动播放间隔时间, 以毫秒为单位, 默认为 5000。

circular Boolean

是否循环切换, 默认为 true, 是否循环播放, 当切换到最初/最后一个时, 是否切换到最后/最初一个。

effect String

动画效果函数, 默认没有特效, 可取 scrollx, scrolly, fade.

duration Number

默认为 500, 以毫秒为单位， 动画的时长.

easing String|Function

动画效果，目前支持,easeNode默认, easeIn, easeOut, easeBoth, easeInStrong, easeOutStrong, easeBothStrong, elasticIn, elasticOut, elasticBoth, backIn, backOut, backBoth, bounceIn, bounceOut, bounceBoth。

DATA API 配置属性

目前项目支持data-api的形式配置相关属性，并以role的形式配置到项目中，主要有下面6个role. 前面4个是所有组件均有效，后面2个，只在 Carousel 组件中生效.

  • panel 单个面板

  • content 面板列表元素

  • trigger 触发器

  • nav 触发器容器

  • prev 上一页 (仅在Carousel组件生效)

  • next 下一页 (仅在Carousle组件中生效)

<!-- 容器元素 -->
<div id="J_Slide">
    <span data-role="prev">上一页</span>
    <ul class="ui-switchable-nav" data-role="nav">
        <li data-role="trigger">标题 A</li>
        <li data-role="trigger">标题 B</li>
        <li data-role="trigger">标题 C</li>
        <li data-role="trigger">标题 D</li>
        <li data-role="trigger">标题 E</li>
    </ul>
    <div class="ui-switchable-content" data-role="content">  <!-- 面板列表 -->
        <div data-role="panel">内容 A</div>
        <div style="display: none" data-role="panel">内容 B</div>
        <div style="display: none" data-role="panel">内容 C</div>
        <div style="display: none" data-role="panel">内容 D</div>
    </div>
    <span data-role="next">下一页</span>
</div>

  • prev 上一页 (仅在 Carousel 组件生效)

  • next 下一页 (仅在 Carousle 组件中生效)

方法说明

switchTo(toIndex)

切换到指定 index。

prev()

切换到上一视图。

next()

切换到下一视图。

start()

开始自动轮播。

stop()

停止自动轮播。

事件

在组件运行中，会触发相关事件，使用者可以根据自己的需要去监听对应的事件。

switch

面板切换前触发。

instance.on('switch', function(toIndex, fromIndex) {
});

switched

面板切换后触发。

instance.on('switched', function(toIndex, fromIndex) {
});

change:activeIndex

面板改变时触发。

instance.on('change:activeIndex', function(toIndex, fromIndex) {
});

data-role 形式示例

CSS

#slide-demo-1 {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
}
#slide-demo-1 .ui-switchable-content {
    margin: 0;
    padding: 0;
    list-style: none;
}
#slide-demo-1 .ui-switchable-content .ui-switchable-panel {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
}
#slide-demo-1 .ui-switchable-content .ui-switchable-panel a{
    width:100%;
    height:100%;
    overflow:hidden;
    -webkit-transform: scale(1.6);    /* for Chrome || Safari */
    -moz-transform: scale(1.6);       /* for Firefox */
    -ms-transform: scale(1.6);        /* for IE */
    -o-transform: scale(1.6);         /* for Opera */
    line-height: 200px;
    font-size: 60px;
    background: gray;
    color: #fff;
    font-weight: bold;
    display: block;
    text-align: center;
}

#slide-demo-1 .ui-switchable-content .s-zoom a{
    -webkit-transition: -webkit-transform 4s linear;
    -moz-transition: -moz-transform 4s linear;
    -o-transition: -o-transform 4s linear;
    transition: transform 4s linear;
    -webkit-transform: scale(1);    /* for Chrome || Safari */
    -moz-transform: scale(1);       /* for Firefox */
    -ms-transform: scale(1);        /* for IE */
    -o-transform: scale(1);         /* for Opera */
}
#slide-demo-1 .ui-switchable-nav {
    position: absolute;
    bottom: 10px;
    right: 10px;
    margin: 0;
    padding: 0;
    z-index: 99;
    font-size: 12px;
}
#slide-demo-1 .ui-switchable-nav .ui-switchable-trigger {
    float: left;
    width: 15px;
    height: 15px;
    line-height: 17px;
    margin-left: 5px;
    background-color: #FFF;
    opacity: .5;
    filter: alpha(opacity=50);
    text-align: center;
    color: black;
    cursor: pointer;
    list-style: none;
}
#slide-demo-1 .ui-switchable-nav .ui-switchable-active {
    color: #FFF;
    background-color: #e96c3e;
    opacity: 1;
    filter: alpha(opacity=100);
}

HTML

<div id="slide-demo-1" class="slide-demo">
    <ul class="ui-switchable-content" data-role="content">
        <li class="ui-switchable-panel"><a href="javascript:;">01</a></li>
        <li class="ui-switchable-panel"><a href="javascript:;">02</a></li>
        <li class="ui-switchable-panel"><a href="javascript:;">03</a></li>
    </ul>
</div>

var Switchable = FNX.include('switchable/switchable');

var mainSlide = new Switchable({
    interval: 5000,
    element: '#slide-demo-1',
    effect:'fade',
    autoplay: true,
    onSwitched: function (nextIndex, prevIndex) {
        var panels = this.get('panels');

        if (prevIndex != null) {
            $(panels.get(prevIndex)).removeClass('s-zoom');
        }

        $(panels.get(nextIndex)).addClass('s-zoom');
    }
});

mainSlide.render();

示例