jQuery.touchswipe插件

TouchSwipe一款專門爲移動設備設計的jquery插件，用於監聽單個和多個手指觸摸等事件。

1、特色：

一、監聽滑動的4個方向：上、下、左、右；

二、監聽多個手指收縮仍是外張；

三、支持單手指或雙手指觸摸事件；

四、支持單擊事件touchSwipe對象和它的子對象；

五、可定義臨界值和最大時間來判斷手勢的實際滑動；

六、滑動事件有4個觸發點：「開始」,「移動」,「結束」和「取消」；

七、結束事件能夠在觸摸釋放或是達到臨界值時觸發；

八、容許手指刷和頁面滾屏；

九、可禁止用戶經過輸入元素（如：按鈕、表單、文本框等）觸發事件；

 

2、安裝

一、NPM

npm install jquery-touchswipe --save

二、Bower

bower install jquery-touchswipe --save

三、將壓縮文件添加到你的項目裏

<script src="js/jquery.touchSwipe.min.js" type="text/javascript"></script>

四、使用

$(function() {
  $("#test").swipe( {
    //Generic swipe handler for all directions
    swipe:function(event, direction, distance, duration, fingerCount, fingerData)                     {
      $(this).text("You swiped " + direction );  
    }
  });

  //Set some options later
  $("#test").swipe( {fingers:2} );
});    

　　

3、Methods(方法)

一、swipe：初始化

例子：$("#element").swipe（{

//給id爲element的容器觸摸滑動監聽事件

}）;

二、destroy：完全銷燬swipe插件，必須從新初始化插件才能再次使用任何方法

例子：$("#element").swipe("destroy");

三、disable：禁止插件，使插件失去做用

返回值：如今與插件綁定的DOM元素

例子：$("#element").swipe("disable");

四、enable：從新啓用插件，恢復原有的配置

返回值：如今與插件綁定的DOM元素

例子：$("#element").swipe("enable");

五、option：設置或獲取屬性

例子：

$("#element").swipe("option", "threshold"); // 返回閾值

$("#element").swipe("option", "threshold", 100); // 設置閾值

$("#element").swipe("option", {threshold:100, fingers:3} ); // 設置多個屬性

$("#element").swipe({threshold:100, fingers:3} ); // 設置多個屬性 -"option"方法可省略

$("#element").swipe("option"); // 返回現有的options

 

4、Events事件

一、swipe：滑動事件

swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
			$(this).text("You swiped " + direction );  
    		}

參數：

 

二、swipeDown：向下滑動事件

swipeDown: function(event, direction, distance, duration, fingerCount, fingerData) {              

}

參數同swipe事件

三、swipeUp：向上滑動事件

swipeUp: function(event, direction, distance, duration, fingerCount, fingerData) {              

}

參數同swipe事件

四、swipeLeft：向左滑動事件

swipeLeft: function(event, direction, distance, duration, fingerCount, fingerData) {              

}

參數同swipe事件

五、swipeRight：向右滑動事件

swipeLeft: function(event, direction, distance, duration, fingerCount, fingerData) {              

}

參數同swipe事件

六、swipeStatus：滑動過程會持續觸發swipeStatus事件，不受閾值限制

swipeLeft: function(event, direction, distance, duration, fingerCount, fingerData, currentDirection) {              

}

參數：

 

七、tap：當用戶簡單地點擊或者輕擊而不是滑動一個元素時tap/click事件將被觸發

tap:function(event,target){

console.log($(target).attr("class"));

}

參數：

event:原生事件對象

target:被點擊的元素（DOM對象）

八、doubleTap：當用戶連續兩次點擊或者輕擊而不是滑動一個元素時事件將被觸發

doubleTap:function(event,target){

console.log($(target).attr("class"));

}

參數：

event:原生事件對象

target:被點擊的元素（DOM對象）