juqery.seitchable

Introduction

jQuery.Switchable 是一款整合了Tabs、Slide、Scrollable等常见UI组件 的jQuery插件。它有简单易用的API、可灵活配置的Configuration，支持自定义Effect，支持自主开发Plugin。

下面是jQuery.Switchable 的几个亮点：

1. 在当前 trigger 中 mouseenter/mouseleave, click 不触发
2. 鼠标快速滑过非当前 trigger, 不触发
3. mouseenter 到非当前 trigger, 停留时间到达延迟时，触发
4. click trigger/panel, 立即触发
5. beforeSwitch/onSwitch 事件的触发
6. panel 内的锚链触发
7. 无法获取 trigger 时，自动创建 trigger

Configuration

下面是构建jQuery.Switchable 的基本格式：

1 $( "trigger-container-selector" ).switchable( "panel-selector" , {
2      triggerType: "mouse" , // or click
3      effect: "default" ,
4      circular: false
5 });

trigger-container-selector

是trigger的容器，使用 jQuery Selector 获取。trigger默认是<a>标签，如果没有获取到，将自动创建。

1^st argument: panel-selector

是具体的panel元素，使用 jQuery Selector 获取，比如：#panel > img。

2^st argument: configuration

可以是一个function ，或者是一个object ，甚至可以省略。如果是function ，那么 就是仅配置beforeSwitch；如果是object ，参数有如下：

property	default	description
triggers	"a"	触点，默认是<a>标签
currentCls	"current"	当前触点的className
initIndex	0	默认激活项
triggerType	"mouse"	触发类型，还可以是"click"
delay	.1	触发延迟，单位是秒。默认值即100毫秒
effect	"default"	切换效果。内置效果有： "default"：最简单的显/隐效果 "ajax"：AJAX动态加载 Panel 的内容 你 还可以自己动手制作 Effect
steps	1	每次切换的 Panel 数量
visible	1	可见区域的 Panel 数量
speed	.7	动画步时，单位是秒。默认值即700毫秒
easing	"swing"	动画效果
circular	false	循环
vertical	false	纵向切换
panelSwitch	false	点击 Panels 触发
beforeSwitch	null	触发前的 Callback
onSwitch	null	触发时的 Callback
api	false	jQuery.Switchable 默认返回的是jQuery对象。当该属性设置为 true 时，将返回 JavaScript API

Scripting API

下面是使用 API 的例子：

1 // 方法一：
2 window.api = $( "trigger-container-selector" ).switchable( "panel-selector" , { api: true });
3
4 // 方法二：
5 var api = $( "trigger-container-selector" ).switchable();
6
7 // 调用：
8 api.next();
9 api.getTriggers();

所有API 方法如下：

method	return value	description
getCfg()	Object	返回 Configuration
getTriggers()	jQuery	返回 Triggers
getPanels()	jQuery	返回 Panels
getVisiblePanel(index)	jQuery	返回可见区域内的 Panels
getIndex()	Integer	返回当前 Trigger 的索引值
move(index)	API	激活指定索引的 Trigger，索引值是从0开始的自然数
next()	API	触发下一个 Trigger
prev()	API	触发上一个 Trigger
bind(name, fn)	API	为 Trigger 绑定一个或者多个 Callback
unbind(name)	API	解除绑定
beforeSwitch(fn)	API	触发前的 Callback。该Callback function的第一个参数是 jQuery.Event 对象，第二个参数是被触发的 Trigger 的索引值
onSwitch(fn)	API	触发时的 Callback。该Callback function的第一个参数是 jQuery.Event 对象，第二个参数是被触发的 Trigger 的索引值

Making custom effects

你可以使用 $.switchable.addEffect 方法来自定义Effect。Effect可以在jQuery.Switchable 被 构造前就添加，并不需要等到API加载之后。函数有两个参数，index 是当前索引值，done 是 Effect 执行完毕后必须调用的 function，调用方法可以是 done.call(); 。

1 $.switchable.addEffect( "newEffect" , function (index, done) {
2
3      /* here you'll write your effect. the 'this' variable points to the API */
4
5 });

我已经在 switchable.effect.js 中添加了"fade"和"scroll"两个Effect:

01 /**
02   * 淡隐淡现
03 **/
04 $.switchable.addEffect( "fade" , function (i, done) {
05      var self = this ,
06          cfg = self.getCfg(),
07          items = self.getPanels(),
08          thisItem = self.getVisiblePanel(i);
09
10      items.hide();
11      thisItem.fadeIn(cfg.speed * 1000, done);
12 });
13
14 /**
15   * 滚动
16   *
17   * Panel's HTML Makeup:
18   * <container>
19   *    <wrapper>
20   *       <panel />
21   *       <panel />
22   *       <panel />
23   *    </wrapper>
24   * </container>
25 **/
26 $.switchable.addEffect( "scroll" , function (i, done) {
27      var self = this ,
28          cfg = self.getCfg(),
29          thisItem = self.getVisiblePanel(i),
30          wrap = self.getPanels().parent(),
31          current = self.getIndex(),
32          len = self.getTriggers().length - 1,
33
34          // 从第一个反向滚动到最后一个 or 从最后一个正向滚动到第一个
35          isCritical = (current === 0 && i === len) || (current === len && i === 0),
36          isBackward = (current === 0 && i === len) ? true : false ,
37          prop = cfg.vertical ? { top : -thisItem.position().top } : { left : -thisItem.position().left };
38
39      // 开始动画
40      if ( wrap.is( ":animated" ) ) {
41          wrap.stop( true );
42      }
43      wrap.animate(prop, cfg.speed * 1000, cfg.easing, function () {
44          done.call();
45          // 复原位置（为了兼容plugin-carousel.js）
46          if ( isCritical ) {
47              self.resetPosition(isBackward);
48          }
49      });
50 });

jQuery.Switchable Plugins

你可以在这个 Demo 页面了解更多的具体应用。下面是几个官方插件：

1. autoplay
2. carousel
3. mousewheel

Autoplay plugin

自动播放插件，使用该插件的方法如下：

1 $( "trigger-container-selector" ).switchable( "panel-selector" ).autoplay();

查看Demo

Configuration

property	default	description
autoplay	true	自动播放
interval	3	自动播放间隔，单位是秒。默认值即3000毫秒。当插件的参数是数字时，就是配置这个属性。例如： $("trigger-container-selector").switchable("panel-selector").autoplay(1.8);
autopause	true	通过该属性可以控制鼠标 mouseenter 进 panel 区域是否暂停动画。mouseleave 后将自动恢复动画
api	false	该插件默认返回的是jQuery对象。当该属性设置为 true 时，将返回 JavaScript API

Scripting API

method	return value	description
play()	API	开始自动播放
pause()	API	暂停播放。当 autopause 为 true 时，鼠标经过 Panels 后将重新触发 autoplay
stop()	API	停止播放。必须使用 play() 方法才能重新触发 autoplay

Carousel plugin

旋转木马插件，使用该插件的方法如下：

1 $( "trigger-container-selector" ).switchable( "panel-selector" ).carousel();
2
3 /*
4 使用该插件后，jQuery.Switchable 的 circular 属性将自动设为 true。上面这行代码等同于：
5 $("trigger-container-selector").switchable("panel-selector", { circular: true }).carousel();
6 */

查看Demo

Mousewheel plugin

鼠标滚珠插件，使用该插件的方法如下：

1 $( "trigger-container-selector" ).switchable( "panel-selector" ).mousewheel();

查看Demo 

 

 

来源    http://www.blueidea.com/articleimg/2010/03/7434/switchable/index.html

 

           google-ajax-api :http://jquery-api-zh-cn.googlecode.com/svn/trunk/index.html