2014/03/22

[JavaScript]hammer.jsについて

hammer.jsという存在を知ったので、その使い方について調査。

マニュアルを読むと、下のように実装すればおkとのこと。

<style>
html,body{
  height:1000px;
  margin:0;
  padding:0;
}
</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.6/hammer.min.js"></script>
<script>
Zepto(function($){

  Hammer(document.getElementById('container')).on("swipe", function() {
    console.log('swipe');
  });

   Hammer(document.getElementById('container')).on("swipeup", function() {
    console.log('swipeup');
  });

  Hammer(document.getElementById('container')).on("swipedown", function() {
    console.log('swipedown');
  });

});
</script>
<body id="container"></body>
これ、すごいことにブラウザでも動きました(chromeで試しました。)。

swipeやtapなどを検出してくれるようです。

しかも、CDNもサポートしているなんてすごいなー。

hammer.js の使い方を読むと、jQueryが必要的なことが書かれていたが、別にZeptoでも動いた。

0 コメント:

コメントを投稿