ボタンをタッチしてから上下にスクロールされなかった場合にtouchend時に関数を実行する jQuery Plugin
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
js
README.md
index.html
yuidoc.json

README.md

jquery.extratouch

ボタンをタッチしてから上下にスクロールされなかった場合にtouchend時に関数を実行する jQuery Plugin

仕様

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

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

使い方

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

オプション

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

初期設定

startFunction : '',
moveFunction : '',
moveUpFunction : '',
moveDownFunction : '',
endFunction : '',
isReturn : true

使用例

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

//例1)
$('.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');
	}
});

$('.button').extraTouch({
	endFunction : function(e) {
		alert('test');
	},
	isReturn : false
});

//例2)
//下記のような書き方もできます。
//1つ目がstartFunction、2つ目がmoveFunction、3つ目がendFunction
$('.button2').extraTouch(
	function(e){
		$(e.currentTarget).addClass('active');
	},
	function(e) {
		console.log('動かした!')
		$(e.currentTarget).removeClass('active');
	},
	function(e) {
		$(e.currentTarget).removeClass('active');
	}
);

//もしも関数が2つ以下の場合はendFunction
$('.button2').extraTouch(
	function(e) {
		alert('test');
	},
	false
);

ライセンス