2012-02-17 8 views
2

非常に新しいjquery/javascriptです。ここでは、スワイプダウンとスワイプアップのjsコードが見つかりました。しかし、それを使用する方法やそれを呼び出す方法はわかりません。javascript/jqueryでこの関数を使用する/呼び出す方法は?

ザ・JSコード:

(function() { 
// initializes touch and scroll events 
    var supportTouch = $.support.touch, 
      scrollEvent = "touchmove scroll", 
      touchStartEvent = supportTouch ? "touchstart" : "mousedown", 
      touchStopEvent = supportTouch ? "touchend" : "mouseup", 
      touchMoveEvent = supportTouch ? "touchmove" : "mousemove"; 

// handles swipeup and swipedown 
    $.event.special.swipeupdown = { 
     setup: function() { 
      var thisObject = this; 
      var $this = $(thisObject); 

      $this.bind(touchStartEvent, function(event) { 
       var data = event.originalEvent.touches ? 
         event.originalEvent.touches[ 0 ] : 
         event, 
         start = { 
          time: (new Date).getTime(), 
          coords: [ data.pageX, data.pageY ], 
          origin: $(event.target) 
         }, 
         stop; 

       function moveHandler(event) { 
        if (!start) { 
         return; 
        } 

        var data = event.originalEvent.touches ? 
          event.originalEvent.touches[ 0 ] : 
          event; 
        stop = { 
         time: (new Date).getTime(), 
         coords: [ data.pageX, data.pageY ] 
        }; 

        // prevent scrolling 
        if (Math.abs(start.coords[1] - stop.coords[1]) > 10) { 
         event.preventDefault(); 
        } 
       } 

       $this 
         .bind(touchMoveEvent, moveHandler) 
         .one(touchStopEvent, function(event) { 
        $this.unbind(touchMoveEvent, moveHandler); 
        if (start && stop) { 
         if (stop.time - start.time < 1000 && 
           Math.abs(start.coords[1] - stop.coords[1]) > 30 && 
           Math.abs(start.coords[0] - stop.coords[0]) < 75) { 
          start.origin 
            .trigger("swipeupdown") 
            .trigger(start.coords[1] > stop.coords[1] ? "swipeup" : "swipedown"); 
         } 
        } 
        start = stop = undefined; 
       }); 
      }); 
     } 
    }; 

//Adds the events to the jQuery events special collection 
    $.each({ 
     swipedown: "swipeupdown", 
     swipeup: "swipeupdown" 
    }, function(event, sourceEvent){ 
     $.event.special[event] = { 
      setup: function(){ 
       $(this).bind(sourceEvent, $.noop); 
      } 
     }; 
    }); 

})(); 

これは私が

<a href="<?php echo base_url();?>home/drop_down" id="swipedown"></a> 

は次のように関数を呼び出してみました上記のコードを使用してトリガーするアンカー要素である:

$('#swipedown').live('swipedown', function(event, data){ 
        alert('swipes') 
      }); 

それは私に警告を促しませんでした。 >。 <。 ご協力いただければ幸いです。

+0

は、あなたがプラグインを見つけたどこのドキュメントはありませんか? – Scott

+0

コードは自己実行型です。つまり、スクリプトがロードされるとすぐに、この関数が実行されます。そして、イベントのjQueryコレクションにswipeupdownイベントを追加しています。 – Zlatko

+0

@scott私はドキュメントを見つけられませんでした。リンクは次のとおりです。http://snipt.net/blackdynamo/swipe-up-and-down-support-for-jquery-mobile –

答えて

1

last()は作成後に関数を呼び出しています。関数はjqueryに新しい可能性を追加します。だから、あなたはおそらくやってそれを呼び出すことができます。

$('#swipedown').bind('swipedown', function(e){ 
    alert('test'); 
}); 
+0

はあなたのコードを試しましたが、まだ応答はありませんが、私はそれをクリックイベントにバインドしているときにアラートをトリガーします。これは非常にイライラしています。 –

+0

$(window)オブジェクトにイベントをアタッチしようとしましたが、それはおそらくそれに限定されています。 – Schiavini

+0

'setup:function(){'の後に警告を追加することもできます。ボンドは動作しません、またはイベントはまったく結合していません。 – Schiavini

0

を(文書化されているように)あなたのコードはjQuery events special collectionに追加され、これはあなたが他のjQueryのイベントとしてswipeupswipedownを呼び出すことができることを意味します。

例:のようなp要素に起こっswipedownアクションにトリガされます

$("div p").live('swipedown',function() { 
    alert("swiped down"); 
}); 

<body> 
<div> 
    <h1>hello world</h1> 
    <p>pull me down</p> 
</div> 
</body> 
関連する問題