zoukankan      html  css  js  c++  java
  • 好的组件,无须太复杂 – KISSY Slide 组件简介

    KISSY Slide 组件首页:http://gallery.kissyui.com/slide/1.1/guide/index.html

    V1.1 New Featurs

    Slide是一个幻灯切换组件,和KISSY Core中的switchable组件不同,它更注重功能和对外暴露的Api以及事件的设计,帮你完成对它的二次封装。相比于switchable,Slide组件增加这些功能

    1,暴露最常用的事件

    • switch:发生切换
    • beforeSwitch:切换发生前
    • afterSwitch:切换发生后
    • beforeTailSwitch:切换出去之前

    2,增加控件尺寸的自适应,特别是在窗口可变的场景中的适配 3,分层动画 4,Mobile中的触屏支持

    示例代码

    Slide内嵌在Gallery中,当前版本为1.1,初始化方法:

    Slide依赖典型的HTML结构

    其中:

    • ul.tab-nav,导航,可以留空
    • ul.tab-nav li.selected,选中的tab页签
    • div.tab-content,内容容器
    • div.tab-content div.tab-pannel,内容面板

    更多配置项示例:

    跑马灯原理

    跑马灯是可以连续相同方向滚动的幻灯,帧首尾相连接。有两种实现方式,一种是滚动时将首(尾)的节点拷贝至尾(首),另一种是初始化时处理首尾的节点,滚动时只改变位置,出于性能的考虑,Slide采用第二种方式。

    即同时复制多个帧至首位,数量根据Slide组件的colspan参数指定,比如colspan为2,则滑块的跨度为2,复制两分,如图:

    切换幻灯的动作实际上是滑块移动的操作,滑块定位在初始位置由参数defaultTab指定,默认为0,如果colspan指定了跨度为2,则滑块初始位置为:

    因为节点被复制,而在IE和W3C中复制节点有差异,IE会复制事件,W3C默认不会复制节点事件,因此,帧里的元素如果绑定了事件,可能在赋值过程中被丢掉。

    长宽自适应的Slide

    页面运行时的尺寸可能会有变化,当宽屏变窄屏时,Slide组件也需要自适应,尤其是在Mobile中横评竖屏切换时,需要设置适应宽度的属性,比如假设Slide的宽度始终跟随浏览器的宽度走,这样传参:

    跨帧动画

    跨帧动画是Slide全副动画的变种,支持切换其中一部分。只需传入colspan参数即可

    多帧动画 LayerSlide

    分层动画是最近很火的设计小彩蛋,简单的分层动画可以营造Flash一般的效果,比如LayerSlide。只是这种基于Jquery的代码体积既笨重(Kissy Slide体积比LayerSlide小一半)又场景单一。KISSY Slide支持分层动画,Demo

    分层动画只需在初始化时打开开关:

    • layerSlide:true

    在HTML中,需要指定每一帧的 `alt=”sublayer”`,并给出每个sublayer的动画模式:

    其中rel为当前层动画的配置参数,采用key:value的形式定义,多属性之间用逗号分隔,注意结束位置不要写逗号。sublayer的配置参数请参照这里

    ps:目前Gallery中已有了更强大的专门作分层动画的组件Layer-anim,支持动画反向播放。

    触屏支持

    组件会检测硬件设备,在移动设备中自动件支持触屏事件,用手指左后滑动切换幻灯,Demo

    同时,Slide组件还提供touchmove参数,在帧元素很多的时候,帧跟随手指滑动会很耗内存,这时需要配置touchmove:true,来启动手指滑动结束后执行帧的左右滑动。

    KISSY Slide 实现了FlipSnap的几乎所有功能。

    Slide的二次封装

    Slide 提供丰富的参数适合被二次封装,这里有两个例子:

    第一个:Mobile 相册控件

    第二个:Mobile App Toolkit

    因为 Slide 提供足够的 API,比如几个常见的方法

    • previous() 上一帧
    • next() 下一帧
    • add() 添加一帧
    • remove() 删除一帧
    • removeLast() 删除最后一帧
    • play() 开始自动播放
    • stop() 停止自动播放
    • `is_first()` 是否是第一帧
    • `is_last()` 是否是最后一帧

    常用的属性

    • currentTab,当前帧的索引
    • length,帧的个数
    • pannels,当前面板的数组

    Slide V 1.2 版本计划

    目前Slide为1.1版本,V1.2版本将增加这些特性支持

    • 切换特效的性能优化,特别是针对Android的动画优化
    • 垂直切换的触屏支持
    • Slide体积瘦身
    • 切换过程的Hisory管理
    • 更全面的无障碍支持

    文档和Demo

    - 1.1版的完整文档:http://gallery.kissyui.com/slide/1.1/guide/index.html - 1.1版完整demo:http://gallery.kissyui.com/slide/1.1/demo/index.html

  • 相关阅读:
    BZOJ2111: [ZJOI2010]Perm 排列计数
    BZOJ1951: [Sdoi2010]古代猪文
    组合数取模
    BZOJ2226: [Spoj 5971] LCMSum
    BZOJ2820: YY的GCD
    数据结构讲题选做
    解题:HAOI 2015 按位或
    解题:SHOI 2006 有色图
    解题:洛谷 4986 逃离
    解题:HNOI 2013 Cards
  • 原文地址:https://www.cnblogs.com/czzblog/p/3532104.html
Copyright © 2011-2022 走看看