スマホサイトを作るときにclick eventの代わりに使えるjQuery プラグイン「jquery.extratouch」

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

iPhoneやAndroid向けにサイトをを作るときにclickイベントを使うと若干イベントの発動が遅くなっちゃうんですよね・・。なぜかというと ダブルタップのズームを待つために時間をとってるらしいです。

なのでこれを解消するために使えるプラグインです。

+αの要素としてタップしてからスクロールしたときに関数を実行したりもできます。

例えば、タップ時にクラスを付与して、スクロールしたらクラスを外すなんてこともできるのでcssでいうボタンのhoverみたいな効果に使えたりします!


仕様

下記のタイミングで関数を実行することができます。

  • touchstart時に実行
  • touchstart後、上下どちらかにスクロールした時に実行
  • touchstart後、上にスクロールした時に実行
  • touchstart後、下にスクロールした時に実行
  • 上下にスクロールされなかった場合のtouchend時に実行

使い方

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.extratouch.js"></script>

オプション

初期設定

startFunction : '',
moveFunction : '',
moveUpFunction : '',
moveDownFunction : '',
endFunction : '',
isReturn : true
startFunction
touchstart時に実行される関数。
moveFunction
touchstart後、上下どちらかにスクロールした時に実行される関数
moveUpFunction
touchstart後、上にスクロールした時に実行される関数
moveDownFunction
touchstart後、下にスクロールした時に実行される関数
endFunction
上下にスクロールされなかった場合のtouchend時に実行される関数
isReturn
endFunction実行時に return false;するかしないか。

2通りの書き方ができます。

引き数にオブジェクトを使って指定する

// 全て指定
$('.button').extraTouch({
	startFunction : function(e){
	    $(e.currentTarget).addClass('active');
	},
	moveFunction : function(e) {
	    console.log('動かした!');
	    $(e.currentTarget).removeClass('active');
	},
	moveUpFunction : function(e) {
	    console.log('上に移動');
	},
	moveDownFunction : function(e) {
	    console.log('下に移動');
	},
	endFunction : function(e) {
	    $(e.currentTarget).removeClass('active');
	},
	isReturn: false
});

//endのみ実行する
$('.button').extraTouch({
	endFunction : function(e) {
	    alert('test');
	},
	isReturn : false
});

引き数に配列を使って指定する

//引き数の 1つ目がstartFunction、2つ目がmoveFunction、3つ目がendFunction、4つ目がisReturn
$('.button2').extraTouch(
	function(e){
	    $(e.currentTarget).addClass('active');
	},
	function(e) {
	    console.log('動かした!')
	    $(e.currentTarget).removeClass('active');
	},
	function(e) {
	    $(e.currentTarget).removeClass('active');
	},
	false
);
	
//もしも引き数が2つ以下の場合は
//1つ目がendFunction、2つ目がisReturn
$('.button2').extraTouch(
	function(e) {
	    alert('test');
	},
	false
);

コメント : 0

コメントフォーム

トラックバック : 0

http://develo.org/mt/mt-tb.cgi/99

このページの先頭へ戻る