$.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'); } ); }); |