• お役立ち

jQuery++のjQuery.event.swipeでスワイプ機能を実装

  • このエントリーをはてなブックマークに追加
  • LINEで送る

jQuery++という、jQueryのヘルパーライブラリ(?)を最近知りました。

ss

クッキーの操作やフォームのパラメータ取得、ドラッグ&ドロップやスワイプなどのイベント処理など、素の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++を使ってみようかと思います。

星虹思械BRICOLEUR

関連コンテンツ