jQuery的觸摸滑動事件/沒有jQuery Mobile的

我一直在尋找了一段時間的好jQuery庫，讓我觸摸事件附加到DOM元素，尤其是刷卡/水龍頭。我試過hammer.js，它在文檔中告訴它它有滑動效果，但是當我嘗試附加它就像$（'。element'）。on（'swipe'，function（）{//do smth}）;它不起作用。jQuery的觸摸滑動事件/沒有jQuery Mobile的

我能夠通過使用其「dragend」事件模擬刷卡，但壞的是，有時它的工作原理，somtimes它沒有。

爲了更具體地說明我想實現的目標 - 檢查手機上的Twitter網站，並嘗試在時間軸/ Feed中向左/向右滑動推文，它應該會顯示「回覆」/「轉推'/'收藏'。

誰能給我一個代碼示例或者我如何能做到這一點很好的文檔庫？

P.S：我不能在這個項目上使用jQuery mobile。

來源

2012-09-14 Stafie Anatolie

是的，我做過了，我已經嘗試了大部分我找到的圖書館，但是我沒有真正找到一個效果不錯的圖書館。 :( –

你不能使用jQuery手機嗎？你可以使用Sencha觸摸嗎？ http://dev.sencha.com/deploy/touch/examples/production/kitchensink/#demo/touchevents

來源

2012-09-14 16:34:34

嗨Juans，感謝您的回答，我覺得用像煎茶/ jQuery Mobile的框架，只是事件它是一個矯枉過正，不是嗎？ –

@StafieAnatolie如果你不打算建立一個應該應用看起來像一個移動應用程序，這兩個框架將做很多你在做什麼，使你的應用程序看起來是移動友好的，如果它只是一個頁面，你想要滑動，那麼也許，但它看起來像你想顯示一個列表視圖與刷卡顯示的按鈕，這兩個框架都很容易。 –

我不能幫你帶庫，但我可以複製/粘貼我用什麼做用jQuery輕掃。這個例子只是一個向上和向下滑動，但很容易適應其他手勢。

這是插件部分：

;(function($) { 
    $.fn.tactile = function(swipe) { 
    return this.each(function() { 
     var $this = $(document), 
     isTouching = false, 
     debut;        // means start in french 

     $this.on('touchstart', debutGeste);  

     function debutGeste() {    // means start of gesture 
     if (event.touches.length == 1) { 
      debut = event.touches[0].pageY; 
      isTouching = true; 
      $this.on('touchmove', geste); 
     } 
     } 

     function finGeste() {     // means end of gesture 
     $this.off('touchmove'); 
     isTouching = false; 
     debut = null; 
     } 

     function geste() {     // geste means gesture 
     if(isTouching) { 
      var actuel = event.touches[0].pageY, 
      delta = debut - actuel; 

      if (Math.abs(delta) >= 30) {  // this '30' is the length of the swipe 
      if (delta > 0) { 
       swipe.up(); 
      } else { 
       swipe.down(); 
      }      
      finGeste(); 
      } 
     } 
     event.preventDefault(); 
     } 
    }); 
    }; 
})(jQuery);

這是利用部分：

$(document).tactile({ 
    up: function() { }, 
    down: function() { } 
});

我不能保證這是正確的方式，這也不是好的代碼，但它的工作原理。

來源

2012-09-14 16:37:36 mddw

感謝mdi，我會試一試，讓你知道結果;） –

此代碼在多個網站上運行，所以我希望它能正常工作:) Tell我如果你需要幫助添加右/左滑動。 – mddw

我會嘗試自己調整它（不想打擾你很多）。非常感謝。 –

如果您正在使用Hammer.js的jQuery的版本，應該不是說是：。

$（ '元素 '）錘（）上（' 刷卡'，函數（）{//做smth}）;

我認爲你需要的錘對象來處理jQuery的特定事件。從我讀過的內容來看，Hammer不會將它們作爲正常的定製jQuery事件注入它們。

來源

2013-08-18 21:49:56 JSwartzen

jQuery的觸摸滑動事件/沒有jQuery Mobile的

回答

相關問題