jQuery++という、jQueryのヘルパーライブラリ（？）を最近知りました。
クッキーの操作やフォームのパラメータ取得、ドラッグ＆ドロップやスワイプなどのイベント処理など、素のjQueryだけでは難しい処理などを拡張してくれるライブラリです。リンク先のページから、必要な機能だけをチェックして「Download」ボタンをクリックすると、選択された機能のコードだけが記述されたjsファイルを取得できます。
今回は、このjQuery++のコンポーネントの一つであるjQuery.event.swipeを使って、スワイプイベントを検知するコードを書いてみました。以下がその実行結果です。
上記ではJSFIDDLEというオンラインサービスを使っている関係で、StealJSを使ってjsファイルを読み込むという方法をとってますが、普通のサイトであればjQuery++からダウンロードしたjquerypp.custom.jsをscriptタグで読み込んで、以下のようにすれば実行できます。
[index.html]
<!DOCTYPE HTML> <html lang="ja-JP"> <head> <meta charset="UTF-8"> <title>jQuery.event.swipe</title> <link rel="stylesheet" href="styles.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="jquerypp.custom.js"></script> <script src="script.js"></script> </head> <body> <h1>jQuery.event.swipe</h1> <p>下のボックスの中をスワイプしてください。</p> <div id="swipeBox"></div> <p id="msg"></p> </body> </html>
[script.js]
$(document).ready(function(){
// swipe：方向に関わらずスワイプされた時のイベント。
$("#swipeBox").bind("swipe", function(e){
$("#msg").show().fadeOut("slow");
});
// swiperight：右方向のスワイプイベント
$("#swipeBox").bind("swiperight", function(e){
$("#msg").text("右にスワイプしました。");
});
// swipeleft：左方向のスワイプイベント
$("#swipeBox").bind("swipeleft", function(e){
$("#msg").text("左にスワイプしました。");
});
// swipeup：上方向のスワイプイベント
$("#swipeBox").bind("swipeup", function(e){
$("#msg").text("上にスワイプしました。");
});
// swipedown：下方向のスワイプイベント
$("#swipeBox").bind("swipedown", function(e){
$("#msg").text("下にスワイプしました。");
});
//マウスの移動量が20ピクセル以上、200ピクセル未満で「スワイプ」と認定。
jQuery.event.swipe.min = 20; //デフォルト値は30
jQuery.event.swipe.max = 200; //デフォルト値は75
});
スワイプイベントを実装するヘルパーライブラリは他にも色々ありますが、その他の便利機能も含まれるということで、しばらくこのjQuery++を使ってみようかと思います。
