jQuery.Switchable是一款整合了Tabs、Slide、Scrollable等常见UI组件的jQuery插件。它有简单易用的API、可灵活配置的Configuration,支持自定义Effect,支持自主开发Plugin。
下面是jQuery.Switchable的几个亮点:
下面是构建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 |
下面是使用 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 的索引值 |
你可以使用 $.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); } }); });
你可以在这个 Demo 页面了解更多的具体应用。下面是几个官方插件:
自动播放插件,使用该插件的方法如下:
$("trigger-container-selector").switchable("panel-selector").autoplay();
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 |
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(); */
鼠标滚珠插件,使用该插件的方法如下:
$("trigger-container-selector").switchable("panel-selector").mousewheel();
©2010 IlikejQuery.com