ページ機構
jQuery Mobileの「ページ」構造は、1枚のページとして用いることも、内部的なリンク構造を持った複数のページとして作成することも可能です。
このモデルは、ウェブサイト開発におけるベストプラクティスの実現を目指しています。つまり通常のリンクも、特別な設定なしに動作するようになっていますし、一方で普通のHTTPリクエストでは実現できないようなリッチでネイティブなリンクを作成することも可能なようにすることです。
携帯ページの構造
jQuery Mobileで作成するサイトは、HTML5のDOCTYPE宣言で始まることにより、最大限の機能を発揮します(HTML5を理解できないブラウザを積んだ古いデバイスの場合、DOCTYPEや様々なカスタム属性は無視されるだけです)。次にhead要素内でjQuery本体、jQuery Mobile、モバイル用テーマCSSを参照してください。パフォーマンス面から、ファイルはCDNから取得することをお勧めします。
Page Title
...
メタ要素 Viewport
先ほどのコード例で head 要素内に viewport というメタ要素が指定されていることに注意してください。これは、ブラウザに対してページを表示する際のズームレベルや方向を指示するためのものです。この指定が無いと、多くのブラウザは900ピクセル程度の仮想ページを表示します。しかしこれはデスクトップ用につくられたサイトを表示するのに適した大きさで、jQuery Mobileでつくられたサイトにはズームアウトしすぎでしょう。この viewport に content=“width=device-width, initial-scale=1” と指定することで、横幅はデバイス画面の持つピクセル数にあわせられます。
この設定によって、ユーザが自分で最適に見られるようズームするなどの動作が阻害されることはありません。わずかにiOS上で端末の向きを変えた際に適切な横幅が用いられないという問題がありますが、将来的なリリースで修正されることを期待します。この viewport 設定でズーム機能を停止することも可能ですが、それはつくられるサイト特性上の話であり、ライブラリは関知しません。
ページコンテナ
マークアップの body> 要素内には、携帯端末上の「ページ」ごとに data-role=“page” という属性指定をした要素(通常は div )を作ってやります。ページコンテナに指定できる属性についてはdata属性リファレンスを参照してください。
...
ページコンテナ内には、正しいHTMLであればどんなものでも記述することが出来ます。しかしjQuery Mobileの典型的なページ構造としては、ページdivの直下にdata-roles属性で “header”, “content”, “footer” 要素が入る形になります。
...
...
...
基本的な単一ページテンプレート
ここまでをまとめた、標準的なボイラープレート・ページが次のようになります。これが全てのはじまりになるでしょう。
Page Title Page Title
Page content goes here.
Page Footer
複数ページテンプレート
ひとつのHTMLが複数の「ページ」を内包することも可能です。その場合 data-role 属性に page を指定した div 要素が複数設置されます。各ページブロックはユニークなID( id=“foo” など )を必要とします。これが、そのページへのリンクをつくるさいに使われます( href=”#foo” のように )。このリンクがクリックされると、フレームワークはページ内の指定IDを探し、そのページへ遷移する処理を行います。
以下は、2ページを含むサンプルの body 部分です。それぞれが、IDを使ってお互いのページにリンクを持っています。
Foo
I'm first in the source order so I'm shown as the page.
View internal page called bar
Page Footer
Bar
I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my ID is beeing clicked.
Page Footer
設計指針
これらの構造は、jQuery Mobileを使ってサイトを構築する際の標準的な指針ですが、必須条件ではありません。フレームワークは柔軟に設計されており、ここで挙げたような page, header, content, footer といったような data-role 属性で指定された要素は、いずれも取捨選択可能です。ページコンテナは、以前のバージョンでは自動初期化処理のために必須の要素でしたが、現在ではこれも省略可能です。
ただし、複数ページテンプレートにおいては data-role=“page” の指定されたページコンテナは必須になるので注意してください。