• かちびと.net

    タップやピンチなど、タッチデバイス特有のイベントをサポートする2KBの軽量jQueryプラグイン・Hammer.jsのご紹介。若干動きがアレでしたが・・

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

タップやピンチなど、タッチデバイス特有のイベントをサポートする2KBの軽量jQueryプラグイン・Hammer.js

スポンサーリンク

タップ、ダブルタップ、ピンチや
長押しなど、タッチデバイス特有
のイベントをサポートしてくれる
JSライブラリ・Hammer.jsのご紹介。
2KBと軽量なのでいつか使うと思っ
て記事にしておきます。

jQuery依存みたいです。

ある世代にはなつかしいと思う方がモデルとして登場してます。

Hammer.js


サポートしてるイベントはタップ、ダブルタップ、ピンチ、ドラッグ、長押しの5イベント。

動作テストはiPadでのiOS5、iPhone4でのiOS5、Samsung Galaxy SのAndroid 2.3.3とGoogle Chrome 17だそうです。僕は3GSなんですが、一応動いてました。

コード

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script src="hammer.js"></script>

本体とhammer.jsを読み込む。

var hammer = new Hammer("#foo");

で、要素にバインドさせます。

    var hammer = new Hammer("#foo", {
        prevent_default: false,
        drag_vertical: false
    });

例えばドラッグだったらこのようにする。

軽量ですけど、諸々を宜しくやってくれる、というものではなく、あくまでサポートって感じですね。いつか役に立ってくれるかな?と思ってメモとして残しました。

Hammer.js

URL :
TRB :

Comments & Trackbacks (3)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services