さやなかなるときをここで...

スマートフォン等のタッチイベント

「写真」ページをiPadで画面をタッチした時の処理を加えました。
iPhone等スマートフォンでは「写真」ページ自体アクセス出来ないので、もう少ししたら考えます。

http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/HandlingEvents/HandlingEvents.html

JavaScript

$(function() {
 var slid = $('.move_panel')[0];
 slid.addEventListener("touchstart", touchHandler, false);
 slid.addEventListener("touchmove", touchHandler, false);
 slid.addEventListener("touchend", touchHandler, false);
});


function touchHandler(e) {
 e.preventDefault();
 var touch = e.touches[0];
 if (e.type == "touchstart") {
  startX = touch.pageX;
  diffX = 0;
 } else if (e.type == "touchmove") {
  diffX = touch.pageX - startX;
 } else if (e.type == "touchend") {
  if (diffX > 100) {
   //戻る動作を。
  } else if (diffX < -100) {
   next();
  } else {
   //クリック時のアクション
  }
 }
}

前回のサンプルにこのJavaScriptを加えてください。
タッチの開始、移動、終了をイベントリスナーを設定して、ファンクションを呼び出しています。

今回はX座標の値の変化だけで処理しています。100pxより大きい変化が起こるときは、スライドします。それ以下の場合は、タップ(クリック)の処理にします。

各パラメーター等詳しく説明するには、もうちょっと汎用性の高いコードを書かないとダメですね。

アップルのサイトは英語です。
作ってから、探し当てたフェンリルのブログはうまくまとまっています。

お名前:
*画像の文字を半角で↓に入力してから投稿してください。