スマートフォン等のタッチイベント
「写真」ページを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より大きい変化が起こるときは、スライドします。それ以下の場合は、タップ（クリック）の処理にします。
各パラメーター等詳しく説明するには、もうちょっと汎用性の高いコードを書かないとダメですね。
アップルのサイトは英語です。
作ってから、探し当てたフェンリルのブログはうまくまとまっています。