ページの作成
ページの作成
ページの作成 data-role="page"
- div要素などにdata-role属性「page」を指定すると、HTML内にページを作成できます-data-role="page"を指定した要素には他と重複しないページIDを付け、id属性に記述します
ヘッダーの表示 data-role="header"
- ページ内にdata-role属性「header」を指定した要素を配置すると、ヘッダーが表示されます
- ヘッダー内はh1〜h6要素で包んだテキストがセンタリングして表示されます
コンテンツの表示 data-role="content"
- ページ内にdata-role属性「content」を指定した要素を配置すると、コンテンツ領域として表示されます
フッターの表示 data-role="footer"
- ページ内にdata-role属性「footer」を指定した要素を配置すると、フッターが表示されます
- フッター内はh1〜h6要素で包んだテキストがセンタリングして表示されます。
jQuery Mobileではこれら4つを組み合わせることで、最小構成のページを作成できます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery Mobile Sample</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css"> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.js"></script> </head> <body> <div data-role="page" id="index"> <div data-role="header"><h1>ヘッダー</h1></div> <div data-role="content">コンテンツ</div> <div data-role="footer"><h4>フッター</h4></div> </div> </body> </html>
jQuery Mobileのページは、1つのHTML内に複数記述できます。
「#page1」というページと「#page2」というページを作成してみます。
<body> <div data-role="page" id="page1"> <div data-role="header"><h1>ページ1</h1></div> <div data-role="content">コンテンツ1</div> <div data-role="footer"><h4>フッター1</h4></div> </div> <div data-role="page" id="page2"> <div data-role="header"><h1>ページ2</h1></div> <div data-role="content">コンテンツ2</div> <div data-role="footer"><h4>フッター2</h4></div> </div> </body>
- ブラウザーで確認すると、HTML内に最初に記述しているページ（#page1）の内容だけが表示されます
- 他のページを表示するには、sample02.html#page2といった具合にURLの後ろにページIDを付けてアクセスする必要があります
- 各ページへリンクを張るには、a要素のhref属性にページIDを記述します。
<body> <div data-role="page" id="page1"> <div data-role="header"><h1>ページ1</h1></div> <div data-role="content">コンテンツ1<br> <a href="#page2">ページ2</a></div> <div data-role="footer"><h4>フッター1</h4></div> </div> <div data-role="page" id="page2"> <div data-role="header"><h1>ページ2</h1></div> <div data-role="content">コンテンツ2</div> <div data-role="footer"><h4>フッター2</h4></div> </div> </body>
ダイアログ表示 data-rel="dialog"
- jQuery Mobileの特殊なページとして、ダイアログがあります
- ページへのリンクに対してdata-rel属性「dialog」を指定すると、リンク先のコンテンツがページ上に浮いているようにして表示されます
<body> <div data-role="page" id="page1"> <div data-role="header"><h1>ページ1</h1></div> <div data-role="content">コンテンツ1<br> <a href="#page2" data-rel="dialog">ダイアログ</a> </div> <div data-role="footer"><h4>フッター1</h4></div> </div> <div data-role="page" id="page2"> <div data-role="header"><h1>ダイアログ</h1></div> <div data-role="content">ダイアログの内容</div> <div data-role="footer"><h4>フッター</h4></div> </div> </body>
- ダイアログページは拡大しながら表示される「ポップアニメーション」で表示され、ダイアログの左上に「閉じるボタン」が自動的に表示されます
テーマの切り替え
<div data-role="page" id="page1" data-theme="b">
- jQuery Mobileの各UIパーツは指定したテーマに沿ったカラーリングで表示されます
- ページ全体ではなく指定したパーツだけ個別にもテーマを適用できます
- テーマを簡単にカスタマイズするには「ThemeRoller」を利用します
ページ遷移
ページ遷移のアニメーションエフェクト
- トップページ（#index）から各ページへのリンクをタップすると、ページが左右にスライドしながら遷移します
- jQuery Mobileではさまざまなページ遷移のアニメーションエフェクトが用意されており、a要素に対してカスタムデータ属性「data-transition="エフェクトの種類"」を指定することで変更できます
<a href="#about" data-transition="エフェクトの種類">
スライドアニメーション
- data-transitionに「slide」を指定すると、ページが左右にスライドして切り替わる「スライドアニメーション」が適用されます
- jQuery Mobileのデフォルトのアニメーションです
<a href="#about" data-transition="slide">
スライドアップアニメーション
- data-transitionに「slideup」を指定すると、ページが下から上にスライドして切り替わる「スライドアップアニメーション」が適用されます
<a href="#about" data-transition="slideup">
スライドダウンアニメーション
- data-transitionに「slidedown」を指定すると、ページが上から下にスライドして切り替わる「スライドダウンアニメーション」を適用できます
<a href="#about" data-transition="slidedown">
ポップアニメーション
- data-transitionに「pop」を指定すると、ページが拡大しながら切り替わる「ポップアニメーション」を適用できます
<a href="#about" data-transition="pop">
フェードアニメーション
- data-transitionに「fade」を指定すると、ページがフェードイン／フェードアウトで切り替わる「フェードアニメーション」を適用できます
<a href="#about" data-transition="fade">
フリップアニメーション
- data-transitionに「flip」を指定すると、ページが回転して切り替わる「フリップアニメーション」を適用できます
<a href="#about" data-transition="flip">
jQuery Mobileではページ遷移の動きを簡単に設定できます。
ただし、さまざまなアニメーションが混在するサイトは一貫性に欠け、ユーザーから見ると煩わしいサイトになりますので、多用しすぎないようにしましょう。
ページ遷移時のアニメーションエフェクトは1種類、特別な場面でもう1種類程度に留めるべきです。
デフォルトアニメーションの変更
- リンク（ページ）単位ではなく、サイト全体でページ遷移のアニメーションを一括して設定したい場合は、jQueryとjQuery Mobileのスクリプトファイルを読み込むscript要素の間に次のようなJavaScriptコードを追加します
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script> $(document).bind("mobileinit", function(){ $.mobile.defaultTransition = "flip"; }); </script> <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
アニメーションをオフにする
- ページ遷移時のアニメーションが不要な場合は、「data-transition="none"」や「data-transition=""」のように存在しないアニメーションエフェクトを指定します
<a href="#about" data-transition="none">
逆のアニメーションを設定する data-direction="reverse"
- a要素に対してdata-direction属性「reverse」を設定すると、指定したアニメーションと逆向きの動きでリンクを作成できます
- たとえば、右から左にスライドするアニメーションが設定されているときにreverseを利用すると、ページが左から右にスライドします
<a href="#page1" data-direction="reverse">page1</a>
