Skinkers Labs : TouchSwipe



iPhone/iPad用サイト作成時に使えるスワイプイベント実装jQueryプラグイン「TouchSwipe」。
タッチパネルを触って左にスライド、右にスライドといった操作をスワイプといいますが、このイベントを取得するjQueryプラグインのご紹介です。
1本指だけではなく、2本指でスワイプした際のイベントを取ることも出来ます（それぞれ区別可能）

ブラウザ上でiPhoneアプリっぽい動作を簡単に実現できますね。
demoをiPhone等で見てみましょう(違和感なくスワイプできるはずです）

• 1本指スワイプのデモ
• 2本指スワイプのデモ
• スワイプを使った画像ギャラリー

実装はjQueryベースということでやはり簡単で、次のようにします。

<div id="swipe_block">ここをスワイプ</div>

<script>
// スワイプされた際のコールバック関数
function swipe_callback(event, direction) {
    alert("you swiped "+direction);
}
$("#swipe_block").swipe( { swipe:swipe_callback , threshold:0 } );
</script>

特にスワイプ実装の仕様について調べることなく swipe メソッドとそのコールバック関数で実現出来ます。

iOS向けサイト作りには覚えておくとよさそうなライブラリですね。

関連エントリ

• 画像のリストを面白い見せ方で表示できるjQueryプラグイン「imageCloud」
• jQueryを使って画像の上にコンテンツをクールにアニメーションされてオーバーレイ表示するサンプル
• jQueryを使った映り込みエフェクトがかかったイメージギャラリー