jQuery Mobile 1つのHTMLファイルに複数ページを記述する

jQuery Mobile では1つのHTMLファイルに複数のページを含めることができます。1回で複数ページのダウンロードが済むため効率的になる場合もありますが、閲覧しないページも含まれるとかえって無駄になってしまう場合もありますので状況により使い分けましょう。

«次の特集記事»
«前の特集記事»

【コンテンツ】

  1. 複数ページの記述方法
  2. それぞれのページへのリンクの仕方
  3. ダイアログを表示する

【記事執筆時の環境】
jQuery Mobile 1.4.4/1.4.5

複数ページの記述方法

jQuery Mobile では、div要素に「data-role="page"」と指定した部分が1ページとして認識されます。
したがって別々のページとして認識させたい場合は、「data-role="page"」を指定したdiv要素のかたまりを複数設置すればよいわけです。
この時それぞれのdiv要素には必ずidを付与します。

以下は記述例です。

それぞれのページへのリンクの仕方

最初にページにアクセスしたときは、「data-role="page"」が記述された一番上の要素が表示されます。
別のページへ移動したいときは、idにハッシュマークをつけて「#sub」などとリンク先に指定します。

以下は複数ページを記述したフルのHTMLの例です。

ダイアログを表示する

「data-role="page"」を指定したdiv要素には、ダイアログのようにページを表示するオプションを指定できます。
以下のように「data-dialog="true"」と指定します。

ダイアログにはデフォルトで「×」の形をしたダイアログを閉じるアイコンが左上に表示されます。
これを data-close-btn属性で右上にしたり表示なしにすることができます。

データ属性指定 説明
data-close-btn="left" (デフォルト) アイコンを左上に表示
data-close-btn="right" アイコンを右上に表示
data-close-btn="none" アイコンを表示しない

初期の頃はページ切り替えが速いという理由で、jQuery Mobileでは1ファイルに複数ページを記載する方法を推奨していました。しかしあまりにも多くのページを含めるのは無駄なトラフィックを生む原因となり、最初のページ表示に時間がかかってしまいます。
複数ページを記載するのはそのファイルのメインページに付随するダイアログや、一連の流れで順番に表示するページに限った方が良いでしょう。

«次の特集記事»
«前の特集記事»

スポンサーリンク

jQuery Mobile 特集記事

基本的な使い方

ウィジェットの設置

フォームの設置

イベント・動作設定

カスタマイズ

使い方の応用

スポンサーリンク

ページの先頭へ