by zhangxinxu 2013-11-08 00:42
• 基本API
direction eventType classAdd classRemove classPrefix attribute animation duration container autoTime number hoverDelay toggle onSwitch
• 匿名API
classDisabled classPrev classNext classPlay classPause
• 更多信息
相关文章

direction

概述

表示位移动画(translate)(如果有)的方向。

可选值

  • horizontal 默认参数。表示水平方向的运动。
  • vertical 表示垂直方向的位移。

其他说明

暂无

示例

暂无

eventType

概述

表示事件类型。

可选值

  • click 默认参数。表示点击事件。
  • hovermouseover 表示鼠标经过事件。

其他说明

暂无

示例

暂无

classAdd

概述

一般用在选项卡切换效果上。用来表示选项卡处于激活状态的类名。

可选值

字符串。默认为空字符串。可缺省。

其他说明

如果选项卡默认含有与classAdd匹配的类名,当插件会认为此选项卡默认处理展开(或激活)状态。

示例

假设4个选项卡,默认状态的类名是.default, 选中状态的类名是.default .active. 则classAdd的值就是active.

classRemove

概述

一般用在选项卡切换效果上。表示选项卡处于非激活状态时,被移除的默认类名。

可选值

字符串。默认为空字符串。可缺省。

其他说明

只有在类名的默认态和选中态是A↔B关系的时候,此参数才会使用。具体可参见下面的示例。

示例

假设4个选项卡,默认状态的类名是.default, 选中状态的类名是.active. 则classRemove的值就是default; 另外classAdd的值依旧是active.

classPrefix

概述

表示一些匿名类名API的前缀名称。

可选值

字符串。默认为空字符串。可缺省。

其他说明

  1. 选项卡切换时候,时常会有“前进”或“后退”,甚至有时还有“播放”与“暂停”按钮。默认情况下,这些类名是没有前缀的。拿“前进”与“后退”按钮举例,如果classPrefix为空字符串,则插件生成(可参考container参数)的类名就是"prev""next". 如果classPrefix值为"example_",则生成的“前进”与“后退”按钮的类名是"example_prev""example_next".
  2. 如果对应的匿名类名参数(classPrev, classNext...)设置了非undefined值,则这里的参数无效。也就是说,匿名类名参数权重大于这里的classPrefix
  3. 类名前缀与类名关键字的连接方式有前缀自身决定。如果前缀中带有短横线或者下划线(无论是中间还是末尾),都为以这种方式连接;如果前缀就是个普通的单词,则采用大小写组合的驼峰命名法,例如,classPrefix值为"example",则生成的类名是"examplePrev". 因此,如果你希望生成的是"example-prev"的类名,务必classPrefix值为example-。但是,如果你想生成"example-1-prev"的类名,可以省略最后的连接符,即classPrefix值为example-1就可以了,因为-已经出现过,插件会认定这种连接就是你想要的连接方式;这种情况下,example-1example-1-都是OK的。

示例

跑马灯效果,如果不是无限切换,则其前进和后退按钮是有一个禁用状态的。默认类名是disabled. 如果classPrefix值为example-, 则按钮禁用的类名就是example-disabled.

attribute

概述

powerSwitch插件采用的是HTML属性关联机制。将切换的面板或列表通过按钮上某个属性关联在一起。attribute表示的就是这个关联属性。

可选值

字符串。默认为"data-rel".

其他说明

  1. 插件的元素的关联细则如下:

    如果属性值比较简单,纯字母,例如data-rel="example",则:

    1. 属性值example作为id选择器获取对应的切换元素 - $("#example").
    2. 属性值example作为class类名选择器获取对应的切换元素 - $(".example").
    3. 属性值example作为标签选择器获取对应的切换元素 - $("example").

    如果属性值比较复杂,例如data-rel="#example a",则:

    1. 属性值#example a直接作为选择器使用。
  2. 如果包装器元素上没有attribute对应的自定义属性,或者属性值为空字符串,则插件会使用元素的href属性#后面的值作为关联选择器,规则与上面一致。例如元素href="#example", 则首先会去获取$("#example")这个元素。正如本API文档页面左侧的切换实现所示。之所以保留这个特性,是因为本身锚点技术就能够实现一些选项卡切换,且还有记忆功能(如本API文档页面随时刷新),是面向高级CSS技术的一种JS增强处理。

示例

<a href="javascript:" id="switchPrev" data-refer="switchList">前进</a>
<ul>
    <li class="switchList">切换列表1</li>
    <li class="switchList">切换列表1</li>
</ul>
$("#switchPrev").powerSwitch({
    attribute: "data-refer"            
});

animation

概述

表示切换的动画类型

可选值

  • auto 默认参数。表示自动。例如跑马灯效果为切换动画(scroll驱动或translate驱动),选项卡效果为直接的现实与隐藏。
  • none 表示无动画效果。用在重置跑马灯默认效果适合使用。与下面的display作用类似。
  • display 表示display属性驱动的显示与隐藏。
  • visibility 表示visibility属性驱动的显示与隐藏。
  • translate 表示动画形式的位移效果。
  • fade 表示淡入淡出切换效果。
  • slide 表示上下slide动画效果。一般用在手风琴切换效果上。可参见测试页面的下截图所示的效果:

    手风琴效果

其他说明

在某些情况下,一些动画类型的设置是会被忽略的。但这些忽略都是按照正常逻辑走的,因此,可以不必在意。

示例

暂无

duration

概述

动画效果(如果有)执行的时间。

可选值

  • 数值,默认单位毫秒 - ms. 默认值为250.
  • 字符串关键字。只能在animationfadeslide的时候有用。跟着jQuery关键字走,如slow, normal, fast.

其他说明

字符串关键字还支持一个特殊的关键字——"sync",也是在animationfadeslide的时候有用。表示元素隐藏和元素显示是同步的,也就是元素隐藏完毕之后,显示的元素才开始淡出。此效果可参见demo页面中易迅网下图所示的交互:

淡入淡出同步

示例

暂无

container

概述

表示容器元素。

可选值

容器元素。需要是jQuery包装器元素对象。原生的DOM对象可能会有问题。

其他说明

该属性只在两种情况下使用:

  1. 如果是跑马灯效果(也就是powerFloat方法绑定在“前进”、“后退”按钮上),且是位移动画效果,需要使用container参数表示切换的列表元素的容器。您可以指向列表元素们的直接父元素上,则使用CSS3 transform偏移实现效果;如果指向父级元素的再父级元素(高宽限制的那个元素),则使用该元素的scroll滚动实现动画效果(注:该效果性能不佳,会导致duration时间不准,不建议使用)。
  2. 有时候,传统的选项卡效果还需要一个“前进”、“后退”按钮,以及到还有“暂停”、“播放”这类需求。如下示意:

    前进、后退式选项卡

    本插件采用关联机制,一下子罩不住这些元素。此时,借助container参数,插件会在container后面创建“前进”、“后退”、“暂停”|“播放”这三个按钮,默认不显示,需CSS设置,生成的类名遵循匿名类名API以及classPrefix的双重作用。

    容器与动态元素

示例

暂无

autoTime

概述

表示自动播放的时间

可选值

数值。默认值是0. 表示不定时播放。 如果是其他数值,如果条件允许,就会自动播放。

其他说明

autoTime有些情况下是无效的,例如,不能循环切换的跑马灯效果,这个应该好理解的,还有“更多”展开与收起效果等。

示例

暂无

number

概述

表示每次切换的数目

可选值

  • auto 默认参数。表示自动。之所以这么设计是因为:选项卡、跑马灯等表示每次切换1个,但是,更多展开与收起效果默认是全部。具有不确定性。
  • 数值 表示每次切换的数目。

其他说明

基本上用在跑马灯切换效果上。一次位移多个列表元素。

示例

暂无

hoverDelay

概述

表示鼠标经过延时触发的时间。

可选值

数值。默认值是200, 单位毫秒。

其他说明

只有当eventTypehovermouseover时候,此参数才有效。

示例

暂无

toggle

概述

表示切换元素是否可以连续显隐切换。

可选值

布尔值。true/false. 默认值为"false". 表示只能展开,不能收起。

其他说明

一般用在“更多-展开|收起”效果上。

示例

暂无

onSwitch

概述

表示切换后触发的回调事件。

可选值

函数。默认值$.noop. 该回调方法的上下文this就是点击(或鼠标经过)的按钮元素或点击(或鼠标经过)的选项卡元素。

其他说明

该回调函数的参数略复杂,根据切换的类型不同,支持的参数也有所差异:

  • 首先函数中的this表示是事件触发源元素。例如,点击“下一页”按钮,则:
    onSwitch: function() {
        // this就是指的这个“下一页”按钮元素,为原生DOM元素                    
    }
  • 如果是传统的选项卡,则支持3个参数,示意如下:
    onSwitch: function(panelShow, tabHide, panelHide) {
        // this就是指的当前点击的选项卡元素,为原生DOM元素                    
        // panelShow指的是当前显示的面板元素,jQuery对象元素
        // tabHide表示当前隐藏的选项卡元素,jQuery对象元素
        // panelHide表示当前隐藏的面板元素,jQuery对象元素
    }
  • 如果是toggle切换类型,支持2个参数,如下:
    onSwitch: function(target, display) {
        // this为事件触发的元素
        // target表示显隐切换的元素
        // display表示当前对应切换元素是显示呢,还是隐藏,是Boolean类型值。
    }
  • 如果是其他切换类型,支持1个参数。如下:
    onSwitch: function(targets) {
        // this为事件触发的元素
        // targets表示显示,或位移的元素jQuery包装器集合,其数目由number值大小决定。
    }

示例

暂无

classDisabled

概述

表示按钮禁用的类名

可选值

字符串。默认匿名,也就是undefined未定义。可以是空字符串或其他字符串。

其他说明

一般用在跑马灯效果上(有时toggle效果也可以使用)。当列表切换到尽头的时候,例如末尾,则“前进”按钮处于禁用状态。

类名使用规则如下:

  1. 优先使用classDisabled值,如果该值未定义,下面继续;
  2. 如果classPrefix设置了值,则使用组合类名;否则,下面继续;
  3. 使用类名disabled.

重要:classDisabled还有一个非常重要的用法,就是空字符串""用法,在跑马灯效果中,默认切换是有尽头的;如果您希望实现无限切换的效果,只需要额外设置classDisabled: ''null, false等值其实也可以)就可以了-顾名思意,消除禁用状态。

示例

例如,

$(".example").powerSwitch({
    classDisabled: "example-disabled"            
});

则,遭遇禁用状态的时候,按钮的类名可能就是example example-disabled.

classPrev

概述

表示前进(或上一项)按钮的类名。

可选值

字符串。默认匿名,也就是undefined未定义。

其他说明

只有在选项卡切换,同时需要前进,后退效果的时候使用。指定container就可以生成此元素。

如果该API未定义、classPrefix不设置,则按钮的类名就是prev. 如果该API未定义,classPrefix有值,则按钮类名应用classPrefix命名规则。如果该API设置了值,则类名就是该值。

示例

暂无

classNext

概述

表示后退(或下一项)按钮的类名。

可选值

字符串。默认匿名,也就是undefined未定义。

其他说明

只有在选项卡切换,同时需要前进,后退效果的时候使用。指定container就可以生成此元素。

如果该API未定义、classPrefix不设置,则按钮的类名就是next. 如果该API未定义,classPrefix有值,则按钮类名应用classPrefix命名规则。如果该API设置了值,则类名就是该值。

示例

暂无

classPlay

概述

表示播放按钮的类名。

可选值

字符串。默认匿名,也就是undefined未定义。

其他说明

只有在选项卡切换,同时需要播放、暂停效果的时候使用。指定container就可以生成此元素。该元素实际和暂停元素是同一个元素。只是不同状态而已。默认是暂停状态。

如果该API未定义、classPrefix不设置,则按钮的类名就是play. 如果该API未定义,classPrefix有值,则按钮类名应用classPrefix命名规则。如果该API设置了值,则类名就是该值。

示例

测试页面下面这个效果:

播放、暂停式选项卡

classPause

概述

表示暂停按钮的类名。

可选值

字符串。默认匿名,也就是undefined未定义。

其他说明

只有在选项卡切换,同时需要播放、暂停效果的时候使用。指定container就可以生成此元素。该元素实际和暂停元素是同一个元素。只是不同状态而已。默认是暂停状态。

如果该API未定义、classPrefix不设置,则按钮的类名就是pause. 如果该API未定义,classPrefix有值,则按钮类名应用classPrefix命名规则。如果该API设置了值,则类名就是该值。

示例

测试页面下面这个效果:

播放、暂停式选项卡