ブログ

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

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

サイトでもフリックとスワイプでページ移動ができたら、ユーザーにとってはラクだろーなーと思い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おもしれー！！！