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的基本格式：

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

trigger-container-selector

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


1st argument: panel-selector

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


2st 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 的例子：

	// 方法一：
	window.api = $("trigger-container-selector").switchable("panel-selector", { api: true });
	
	// 方法二：
	var api = $("trigger-container-selector").switchable();
	
	// 调用：
	api.next();
	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();。

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

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

	/**
	 * 淡隐淡现
	**/
	$.switchable.addEffect("fade", function(i, done) {
		var self = this,
			cfg = self.getCfg(),
			items = self.getPanels(),
			thisItem = self.getVisiblePanel(i);
	
		items.hide();
		thisItem.fadeIn(cfg.speed * 1000, done);
	});
	
	/**
	 * 滚动
	 *
	 * Panel's HTML Makeup:
	 * <container>
	 *    <wrapper>
	 *       <panel />
	 *       <panel />
	 *       <panel />
	 *    </wrapper>
	 * </container>
	**/
	$.switchable.addEffect("scroll", function(i, done) {
		var self = this,
			cfg = self.getCfg(),
			thisItem = self.getVisiblePanel(i),
			wrap = self.getPanels().parent(),
			current = self.getIndex(),
			len = self.getTriggers().length - 1,
	
			// 从第一个反向滚动到最后一个 or 从最后一个正向滚动到第一个
			isCritical = (current === 0 && i === len) || (current === len && i === 0),
			isBackward = (current === 0 && i === len) ? true : false,
			prop = cfg.vertical ? { top : -thisItem.position().top } : { left : -thisItem.position().left };
		
		// 开始动画
		if ( wrap.is(":animated") ) {
			wrap.stop(true);
		}
		wrap.animate(prop, cfg.speed * 1000, cfg.easing, function() {
			done.call();
			// 复原位置（为了兼容plugin-carousel.js）
			if ( isCritical ) {
				self.resetPosition(isBackward);
			}
		});
	});

jQuery.Switchable Plugins

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

  1. autoplay
  2. carousel
  3. mousewheel

Autoplay plugin

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

	$("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

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

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

查看Demo

Mousewheel plugin

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

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

查看Demo

©2010 IlikejQuery.com