$.fn.extend({
touchInterface : function(up){
var down = (arguments.length > 1 ) ? arguments[1] : false; //第二引数が存在する場合、関数を受け取る
var move = (arguments.length > 2 ) ? arguments[2] : false; //第三引数が存在する場合、関数を受け取る
var cancel = (arguments.length > 3 ) ? arguments[3] : false; //第四引数が存在する場合、関数を受け取る
return $(this).on({ //jQueryオブジェクトを以下の動作をバインドした上で返す
'touchstart mousedown' : function(e){ //タッチ開始 or マウスダウンの動作
e.preventDefault(); //デフォルトの動作を止める
this.touching = true; //このオブジェクトへタッチorクリックが行われた
if(down)down(e,$(this)); //第二引数として渡した処理を実行する(引数が存在する場合)
},
'touchmove mousemove' : function(e){ //タッチ移動 or マウス移動の動作
if(!this.touching)return; //このオブジェクトに対して操作を行っていない場合、処理を行わない
e.preventDefault(); //デフォルトの動作を止める
if(move)move(e,$(this)); //第三引数として渡した処理を実行する(引数が存在する場合)
if('ontouchstart' in window){ //ブラウザがタッチ操作に対応している場合
var touch = e.originalEvent.changedTouches[0]; //イベントからタッチ情報を抽出
var offset = $(this).offset(); //対象オブジェクトのページ内位置を得る
//タッチ位置がオブジェクト範囲の外に出た場合
if( touch.pageX < offset.left || touch.pageX > $(this).outerWidth() + offset.left ||
touch.pageY < offset.top || touch.pageY > $(this).outerHeight() + offset.top ){
this.touching = false; //このオブジェクトへの操作を解除
if(cancel)cancel(e,$(this)); //第四引数として渡した処理を実行する(引数が存在する場合)
}
}
},
'touchcancel mouseout' : function(e){ //タッチ中断 or マウスアウトの動作
if(!this.touching)return; //このオブジェクトに対して操作を行っていない場合、処理を行わない
e.preventDefault(); //デフォルトの動作を止める
if(cancel)cancel(e,$(this));//第四引数として渡した処理を実行する(引数が存在する場合)
this.touching = false; //このオブジェクトへの操作を中断
},
'touchend mouseup' : function(e){ //タッチ終了 or マウスアップの動作
if(!this.touching)return; //このオブジェクトに対して操作を行っていない場合、処理を行わない
e.preventDefault(); //デフォルトの動作を止める
up(e,$(this)); //引数として渡した処理を実行する(up)
this.touching = false; //このオブジェクトの操作が完了した
}
}).css('cursor','pointer'); //マウスon時のcssをポインタに変更
}
});
|
#demo_1
|
$(function(){
$('#demo_1').touchInterface(
function(e,$_this){ //タッチorクリックの動作
$_this.empty().append('action:up/end');
$_this.css('background-color','#FFF');
},
function(e,$_this){ //(オプション)押下
$_this.empty().append('action:down/start');
$_this.css('background-color','#AAF');
},
function(e,$_this){ //(オプション)移動
$_this.empty().append('action:move');
$_this.css('background-color','#AFA');
},
function(e,$_this){ //(オプション)範囲外
$_this.empty().append('action:out/cancel');
$_this.css('background-color','#FFA');
}
);
});
|
|
#demo_2
|
$(function(){
$('#demo_2').touchInterface(
function(e,$_this){ //タッチorクリックの動作
$_this.empty().append('action:up/end');
$_this.css('background-color','#FFF');
},
function(e,$_this){ //(オプション)押下
$_this.empty().append('action:down/start');
$_this.css('background-color','#AAF');
},
function(e,$_this){ //(オプション)移動
$_this.empty().append('action:move');
$_this.css('background-color','#AFA');
}
);
});
|
|
#demo_3
|
$(function(){
$('#demo_3').touchInterface(
function(e,$_this){ //タッチorクリックの動作
$_this.empty().append('action:up/end');
$_this.css('background-color','#FFF');
},
function(e,$_this){ //(オプション)押下
$_this.empty().append('action:down/start');
$_this.css('background-color','#AAF');
}
);
});
|
|
#demo_4
|
$(function(){
$('#demo_4').touchInterface(
function(e,$_this){ //タッチorクリックの動作
$_this.empty().append('action:up/end');
$_this.css('background-color','#FFF');
}
);
});
|