jQuery Mobile コンポーネントシリーズ #2 「ページ切り替え効果」

第一回、jQuery Mobile コンポーネントシリーズ #1 「ページ機構」はこちら。

今回は、前回のページ機構の切り替え時に利用する「ページ切り替え効果」について紹介します。

ページ切り替え効果とは

ページやダイアログを表示する際に利用されるエフェクトのことを指します。
jQuery MobileではCSSを使った切り替え効果が用意されています。また、CSSやJavaScriptを使い独自の切り替え効果を作成することもできます。

切り替え効果の種類

これらの切り替え効果はjQtouchのものが流用されているそうです。

• slide：横方向へのスライド
• slideup：上方向へのスライド
• slidedown：下方向へのスライド
• pop：飛び出してくるスライド
• fade：徐々に表示されるスライド
• flip：3D回転で切り替わるスライド

設定方法

切り替え効果はリンク要素に独自データ属性の「data-transition」を設定します。

<a href="sample.html" data-transition="slide">Slide</a>

戻るが押された場合は、自動的に逆の切り替え効果が適用されます。

意図的に切り替え効果の逆再生を行う場合は「data-direction="reverse"」を使います。

<a href="sample.html" data-transition="slide" data-direction="reverse">Slide</a>

iOSで更にスムーズな切り替えのためのtouchOverFlow

touchOverFlowとは、iOS5でサポートされたoverflow:autoによる矩形内部スクロールを可能にしスムーズなページ遷移を実現します。

ただ、現時点ではデフォルトでONではなく、グローバル設定を有効にする必要があります。

$(document).bind("mobileinit", function(){
  $.mobile.touchOverflowEnabled = true;
});

この機能には、まだメリット・デメリットがあります。今後利用しやすくなると思いますが、まだ利用には注意が必要です。
詳しくはこちらtouchOverflowによるページ切替の劇的な向上と、本当の「固定ツールバー」実装をどうぞ。

切り替え効果サンプル

を開く（このサンプルはChromeブラウザでの閲覧をおすすめします。）

サンプルコード

<div id="page1" data-role="page">
	<header data-role="header">
		<h1>ページ切り替え効果</h1>
	</header>
	<div data-role="content">
		<p>切り替え効果を選択してください。</p>
		<ul>
			<li>
				<a href="#page2" data-role="button" data-transition="slide">slide</a>
				<a href="#page3" data-role="button" data-transition="slideup">slideup</a>
				<a href="#page4" data-role="button" data-transition="slidedown">slidedown</a>
				<a href="#page5" data-role="button" data-transition="pop">pop</a>
				<a href="#page6" data-role="button" data-transition="fade">fade</a>
				<a href="#page7" data-role="button" data-transition="flip">flip</a>
			</li>
		</ul>
	</div>
</div>

<div id="page2" data-role="page">
	<header data-role="header">
		<h1>切り替え完了</h1>
	</header>
	<div data-role="content">
		<p>切り替え効果一覧に戻りましょう</p>
		<a href="#page1" data-direction="reverse" data-transition="slide" data-role="button">切り替え効果一覧に戻る</a>
	</div>
</div>

<div id="page3" data-role="page">
	<header data-role="header">
		<h1>切り替え完了</h1>
	</header>
	<div data-role="content">
		<p>切り替え効果一覧に戻りましょう</p>
		<a href="#page1" data-direction="reverse" data-transition="slideup" data-role="button">切り替え効果一覧に戻る</a>
	</div>
</div>

<div id="page4" data-role="page">
	<header data-role="header">
		<h1>切り替え完了</h1>
	</header>
	<div data-role="content">
		<p>切り替え効果一覧に戻りましょう</p>
		<a href="#page1" data-direction="reverse" data-transition="slidedown" data-role="button">切り替え効果一覧に戻る</a>
	</div>
</div>

<div id="page5" data-role="page">
	<header data-role="header">
		<h1>切り替え完了</h1>
	</header>
	<div data-role="content">
		<p>切り替え効果一覧に戻りましょう</p>
		<a href="#page1" data-direction="reverse" data-transition="pop" data-role="button">切り替え効果一覧に戻る</a>
	</div>
</div>

<div id="page6" data-role="page">
	<header data-role="header">
		<h1>切り替え完了</h1>
	</header>
	<div data-role="content">
		<p>切り替え効果一覧に戻りましょう</p>
		<a href="#page1" data-direction="reverse" data-transition="fade" data-role="button">切り替え効果一覧に戻る</a>
	</div>
</div>

<div id="page7" data-role="page">
	<header data-role="header">
		<h1>切り替え完了</h1>
	</header>
	<div data-role="content">
		<p>切り替え効果一覧に戻りましょう</p>
		<a href="#page1" data-direction="reverse" data-transition="flip" data-role="button">切り替え効果一覧に戻る</a>
	</div>
</div>

参考

• ページ切り替え効果
• touchOverflowによるページ切替の劇的な向上と、本当の「固定ツールバー」実装

次回はダイアログについて紹介します。