ブログ

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

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

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

>>サンプル

javascript

[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>

[/javascript]

HTML

[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>

[/html]
jQuery Mobileおもしれー！！！