hammer.jsの使い方

2015年7月6日更新 view: 841 view
photoBy: http://s3.bitelia.com/files/2012/07/hammer-js-800x436.jpg

jquery で スワイプやタッチジェスチャーを可能にするライブラリ

まずはダウンロードとご紹介

http://eightmedia.github.io/hammer.js/

からダウンロードできます。

スマートフォンにマルチタッチ機能をつけることができます。

jquery.hammer.min.js は
https://github.com/hammerjs/jquery.hammer.js
からダウンロードできます。

使い方

  • スワイプで実行
  • jquery、hammer.js は読み込み済み
  • #hoge を swipe で #hogeの テキストを取得

読み込む順番を逆にしないと動かない場合がある

<script src="/app/webroot/js/jquery.hammer.min.js"></script>
<script src="/app/webroot/js/hammer.min.js"></script>

上記二つのファイルを読み込んでおく必要がある。

hammertime = $('#hoge').hammer();
hammertime.on("swipe", function(ev) {
    
    var el = $(ev.originalEvent.target);
    alert($(el).text());//#hoge の テキストを取得
    
});

たったこれだけ。

指定した要素の子要素全てに適用

これで #main 以下の 要素全てを swipe したら text をアラートする。

$('#main > *').hammer().on("swipe", function(ev) {
    var el = $(ev.originalEvent.target);
    alert($(el).text());
});

他の機能

hold
tap
swipe
doubletap
transformstart
transform
transformend
dragstart
drag
dragend
swipe
swipeleft
swiperight
release

スポンサードリンク

#hoge に swipe hold など沢山の処理を指定することも可能です。

スポンサードリンク

関連記事

関連カテゴリ

コロ助

web関連の記事や制作系の記事をどんどんまとめていきます。 宜しくお願いします!

ピックアップ

パソコン・ソフトウェア ランキング

6月21日 ( 木 ) にアクセスが多かった記事はこちら!