4

タッチイベント、特にスワイプ/タップをDOM要素にアタッチできる優れたjQueryライブラリをしばらく探していました。

私はhammer.jsを試しましたが、ドキュメントにはスワイプ効果があると書かれていますが、アタッチしようとする$('.element').on('swipe', function(){ //do smth });と機能しません。

'dragend'イベントを使用してスワイプをシミュレートすることはできましたが、悪い点は、機能する場合と機能しない場合があることです。

私が達成したいことをより具体的にするために-あなたの電話でツイッターのウェブサイトをチェックし、あなたのタイムライン/フィードでツイートを左右にスワイプしてみてください、それは「返信」/「リツイート」/のいくつかのアクションボタンを表示するはずですお気に入り'。

誰かが私にこれを達成する方法についての良いドキュメントを備えたコード例またはライブラリを教えてもらえますか？

PS：このプロジェクトではjQuerymobileを使用できません。

4

3 に答える 3

3

ライブラリについてはお手伝いできませんが、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-14T16:37:36.923 に答える
0

jQuery モバイルを使用できませんか? Sencha touch は使えますか？http://dev.sencha.com/deploy/touch/examples/production/kitchensink/#demo/touchevents

于 2012-09-14T16:34:34.700 に答える