中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

Introduction

jQuery.Switchable是一款整合了Tabs、Slide、Scrollable等常見UI組件的jQuery插件。它有簡(jiǎn)單易用的API、可靈活配置的Configuration，支持自定義Effect，支持自主開發(fā)Plugin。

下面是jQuery.Switchable的幾個(gè)亮點(diǎn)：

  1. 在當(dāng)前 trigger 中 mouseenter/mouseleave, click 不觸發(fā)
  2. 鼠標(biāo)快速滑過非當(dāng)前 trigger, 不觸發(fā)
  3. mouseenter 到非當(dāng)前 trigger, 停留時(shí)間到達(dá)延遲時(shí)，觸發(fā)
  4. click trigger/panel, 立即觸發(fā)
  5. beforeSwitch/onSwitch 事件的觸發(fā)
  6. panel 內(nèi)的錨鏈觸發(fā)
  7. 無法獲取 trigger 時(shí)，自動(dòng)創(chuàng)建 trigger

Configuration

下面是構(gòu)建jQuery.Switchable的基本格式：

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

trigger-container-selector

是trigger的容器，使用 jQuery Selector 獲取。trigger默認(rèn)是<a>標(biāo)簽，如果沒有獲取到，將自動(dòng)創(chuàng)建。


1st argument: panel-selector

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


2st argument: configuration

可以是一個(gè)function，或者是一個(gè)object，甚至可以省略。如果是function，那么就是僅配置beforeSwitch；如果是object，參數(shù)有如下：

property default description
triggers "a" 觸點(diǎn)，默認(rèn)是<a>標(biāo)簽
currentCls "current" 當(dāng)前觸點(diǎn)的className
initIndex 0 默認(rèn)激活項(xiàng)
triggerType "mouse" 觸發(fā)類型，還可以是"click"
delay .1 觸發(fā)延遲，單位是秒。默認(rèn)值即100毫秒
effect "default" 切換效果。內(nèi)置效果有：
"default"：最簡(jiǎn)單的顯/隱效果
"ajax"：AJAX動(dòng)態(tài)加載 Panel 的內(nèi)容
你還可以自己動(dòng)手制作 Effect
steps 1 每次切換的 Panel 數(shù)量
visible 1 可見區(qū)域的 Panel 數(shù)量
speed .7 動(dòng)畫步時(shí)，單位是秒。默認(rèn)值即700毫秒
easing "swing" 動(dòng)畫效果
circular false 循環(huán)
vertical false 縱向切換
panelSwitch false 點(diǎn)擊 Panels 觸發(fā)
beforeSwitch null 觸發(fā)前的 Callback
onSwitch null 觸發(fā)時(shí)的 Callback
api false jQuery.Switchable默認(rèn)返回的是jQuery對(duì)象。當(dāng)該屬性設(shè)置為 true 時(shí)，將返回 JavaScript API

Scripting API

下面是使用 API 的例子：

	// 方法一：
	window.api = $("trigger-container-selector").switchable("panel-selector", { api: true });
	
	// 方法二：
	var api = $("trigger-container-selector").switchable();
	
	// 調(diào)用：
	api.next();
	api.getTriggers();

所有API方法如下：

method return value description
getCfg() Object 返回 Configuration
getTriggers() jQuery 返回 Triggers
getPanels() jQuery 返回 Panels
getVisiblePanel(index) jQuery 返回可見區(qū)域內(nèi)的 Panels
getIndex() Integer 返回當(dāng)前 Trigger 的索引值
move(index) API 激活指定索引的 Trigger，索引值是從0開始的自然數(shù)
next() API 觸發(fā)下一個(gè) Trigger
prev() API 觸發(fā)上一個(gè) Trigger
bind(name, fn) API 為 Trigger 綁定一個(gè)或者多個(gè) Callback
unbind(name) API 解除綁定
beforeSwitch(fn) API 觸發(fā)前的 Callback。該Callback function的第一個(gè)參數(shù)是 jQuery.Event 對(duì)象，第二個(gè)參數(shù)是被觸發(fā)的 Trigger 的索引值
onSwitch(fn) API 觸發(fā)時(shí)的 Callback。該Callback function的第一個(gè)參數(shù)是 jQuery.Event 對(duì)象，第二個(gè)參數(shù)是被觸發(fā)的 Trigger 的索引值

Making custom effects

你可以使用 $.switchable.addEffect 方法來自定義Effect。Effect可以在jQuery.Switchable被構(gòu)造前就添加，并不需要等到API加載之后。函數(shù)有兩個(gè)參數(shù)，index 是當(dāng)前索引值，done 是 Effect 執(zhí)行完畢后必須調(diào)用的 function，調(diào)用方法可以是 done.call();。

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

我已經(jīng)在 switchable.effect.js 中添加了"fade"和"scroll"兩個(gè)Effect:

	/**
	 * 淡隱淡現(xiàn)
	**/
	$.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);
	});
	
	/**
	 * 滾動(dòng)
	 *
	 * 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,
	
			// 從第一個(gè)反向滾動(dòng)到最后一個(gè) or 從最后一個(gè)正向滾動(dòng)到第一個(gè)
			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 };
		
		// 開始動(dòng)畫
		if ( wrap.is(":animated") ) {
			wrap.stop(true);
		}
		wrap.animate(prop, cfg.speed * 1000, cfg.easing, function() {
			done.call();
			// 復(fù)原位置（為了兼容plugin-carousel.js）
			if ( isCritical ) {
				self.resetPosition(isBackward);
			}
		});
	});

jQuery.Switchable Plugins

你可以在這個(gè) Demo 頁(yè)面了解更多的具體應(yīng)用。下面是幾個(gè)官方插件：

  1. autoplay
  2. carousel
  3. mousewheel

Autoplay plugin

自動(dòng)播放插件，使用該插件的方法如下：

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

查看Demo

Configuration

property default description
autoplay true 自動(dòng)播放
interval 3 自動(dòng)播放間隔，單位是秒。默認(rèn)值即3000毫秒。當(dāng)插件的參數(shù)是數(shù)字時(shí)，就是配置這個(gè)屬性。例如：
$("trigger-container-selector").switchable("panel-selector").autoplay(1.8);
autopause true 通過該屬性可以控制鼠標(biāo) mouseenter 進(jìn) panel 區(qū)域是否暫停動(dòng)畫。mouseleave 后將自動(dòng)恢復(fù)動(dòng)畫
api false 該插件默認(rèn)返回的是jQuery對(duì)象。當(dāng)該屬性設(shè)置為 true 時(shí)，將返回 JavaScript API

Scripting API

method return value description
play() API 開始自動(dòng)播放
pause() API 暫停播放。當(dāng) autopause 為 true 時(shí)，鼠標(biāo)經(jīng)過 Panels 后將重新觸發(fā) autoplay
stop() API 停止播放。必須使用 play() 方法才能重新觸發(fā) autoplay

旋轉(zhuǎn)木馬插件，使用該插件的方法如下：

	$("trigger-container-selector").switchable("panel-selector").carousel();
	
	/*
	使用該插件后，jQuery.Switchable的 circular 屬性將自動(dòng)設(shè)為 true。上面這行代碼等同于：
	$("trigger-container-selector").switchable("panel-selector", { circular: true }).carousel();
	*/

查看Demo

Mousewheel plugin

鼠標(biāo)滾珠插件，使用該插件的方法如下：

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

查看Demo

©2010 IlikejQuery.com