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的

回答

相关问题