iPhone/iPad用サイト作成時に使えるスワイプイベント実装jQueryプラグイン「TouchSwipe」
2011年02月17日-
スポンサード リンク
Skinkers Labs : TouchSwipe
iPhone/iPad用サイト作成時に使えるスワイプイベント実装jQueryプラグイン「TouchSwipe」。
タッチパネルを触って左にスライド、右にスライドといった操作をスワイプといいますが、このイベントを取得するjQueryプラグインのご紹介です。
1本指だけではなく、2本指でスワイプした際のイベントを取ることも出来ます(それぞれ区別可能)
iPhone/iPad用サイト作成時に使えるスワイプイベント実装jQueryプラグイン「TouchSwipe」。
タッチパネルを触って左にスライド、右にスライドといった操作をスワイプといいますが、このイベントを取得するjQueryプラグインのご紹介です。
1本指だけではなく、2本指でスワイプした際のイベントを取ることも出来ます(それぞれ区別可能)
ブラウザ上でiPhoneアプリっぽい動作を簡単に実現できますね。
demoをiPhone等で見てみましょう(違和感なくスワイプできるはずです)
実装は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向けサイト作りには覚えておくとよさそうなライブラリですね。
関連エントリ
スポンサード リンク
Advertisements
SITE PROFILE
最新のブログ記事(新着順)
- 小説表紙などに使えそうな商用可なフォント「になロマン」
- 筆で書いたようなカナ書体「筆竹仮名B」
- 無料・商用利用可な丸文字ピクセルフォント「マルミーニャM」
- スペースコブラ風フォント
- Next.jsのVercelから商用利用可能なフリー汎用フォント「Geist Font 」
- 無料で使えるいい感じの日本語フォント「しっぽり太ゴシック」
- CSSのみで実装された500種類のローディングアニメーション「CSS Loaders」
- 画像ホバーで様々なエフェクトをかけられる「Izmir」
- CSSのbox-shadowをGUIで生成できる「CSS Box Shadows Generator」
- 好きな画像や文字を埋め込んだQRコードをリアルタイムで作れるWEBツール
- 過去のエントリ