ブログ

WEB制作に関する技術情報やサンプルコードからエクセルや
パワーポイントのお役立ち情報まで幅広くご紹介しています。

【jQuery Mobile】フリック・スワイプでページ移動

最近、スマートフォンサイトを構築させていただく機会がありました。

スマートフォンといえば、フリックとスワイプですよね。

サイトでもフリックとスワイプでページ移動ができたら、ユーザーにとってはラクだろーなーと思いjQuery Mobileで実装してみましたよ。

>>サンプル

javascript


<script type="text/javascript">

// #page1swipeを右から左へスワイプした時の動作(swipeleftでpage2viewの関数を呼び出す)
 $('#page1').live('pagecreate',function(){
 $('#page1swipe').live('swipeleft',page2view);
 });

// #page2swipeを左から右へスワイプした時の動作(swiperightでpage1view_backの関数を呼び出す)
// #page2swipeを右から左へスワイプした時の動作(swipeleftでpage3viewの関数を呼び出す)
 $('#page2').live('pagecreate',function(){
 $('#page2swipe').live('swiperight',page1view_back);
 $('#page2swipe').live('swipeleft',page3view);
 });

// #page3swipeを左から右へスワイプした時の動作(swiperightでpage2view_backの関数を呼び出す)
 $('#page3').live('pagecreate',function(){
 $('#page3swipe').live('swiperight',page2view_back);
 });


 // #page1へ戻る( { reverse: true } でページ移動のアニメーションを逆再生)
 function page1view_back(){
 $.mobile.changePage('#page1', { reverse: true } ,'slide',false,true);
 }

// #page2へ進む
 function page2view(){
 $.mobile.changePage('#page2','slide',true,true);
 }

// #page2へ戻る( { reverse: true } でページ移動のアニメーションを逆再生)
 function page2view_back(){
 $.mobile.changePage('#page2', { reverse: true } ,'slide',true,true);
 }

// #page3へ進む
 function page3view(){
 $.mobile.changePage('#page3','slide',true,true);
 }

 </script>

 

HTML


<div data-role="page" id="page1" data-theme="a">

<div data-role="header">
 page1
 </div>

<div data-role="content" id="page1swipe" style="min-height:300px;">
 <p>右から左へのスワイプで<br>page2に移動します。</p>
 </div>

 <div data-role="navbar" class="navbar">
 <ul>
 <li><a href="#page2" data-icon="arrow-r">次のページへ</a></li>
 </ul>
 </div>

</div>


<div data-role="page" id="page2" data-theme="a">

<div data-role="header">
 page2
 </div>

<div data-role="content" id="page2swipe" style="min-height:300px;">
 <p>右から左へのスワイプで<br>page3に移動します。</p>
 <p>左から右へのスワイプで<br>page1に移動します。</p>
 </div>

 <div data-role="navbar" class="navbar">
 <ul>
 <li><a href="#page1" data-icon="arrow-l" data-direction="reverse">前のページへ</a></li>
 <li><a href="#page3" data-icon="arrow-r">次のページへ</a></li>
 </ul>
 </div>

</div>


<div data-role="page" id="page3" data-theme="a">

<div data-role="header">
 page3
 </div>

<div data-role="content" id="page3swipe" style="min-height:300px;">
 <p>左から右へのスワイプで<br>page2に移動します。</p>
 </div>

 <div data-role="navbar" class="navbar">
 <ul>
 <li><a href="#page2" data-icon="arrow-l" data-direction="reverse">前のページへ</a></li>
 </ul>
 </div>

</div>

jQuery Mobileおもしれー!!!

投稿日
2012年7月26日
カテゴリー
JavaScript
  1. kuni さん (2013年11月8日 16:53)

    こんにちは。
    xperiaZ android4.2でサンプルみてみたのですが、通常の縦スクロールが上手くできないことがあります。

コメントを残す

デザイン&メディア事業blow→in
[日根野オフィス]
大阪府泉佐野市日根野3963-3-403
TEL.072-468-8786(代)
[商工会議所オフィス]
大阪府泉佐野市市場西3-2-34-306
アパレル&プリント事業DIGMO
HANDPURI
大阪府泉佐野市日根野4036-1
TEL.0120-610-322
ブランディング事業かつらぎフルーツ
和歌山県かつらぎ町東渋田325-4
TEL.090-3612-3401
飲食店事業cafeblow
大阪府泉佐野市日根野3963-3
TEL.090-5127-9187