jQuery Mobileにはこれまで紹介した以外にもさまざまな機能があります。サンプルの作成を通じて紹介した基本的な使い方をおさらいしつつ、そのほかの機能も併せてまとめておきましょう。

ページの作成

　jQuery Mobileでは、1つのHTMLに複数のページのコンテンツをまとめて記述します。ページの区切りやページ内のレイアウトは、カスタムデータ属性のdata-role属性で定義します。

ページの作成　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つを組み合わせることで、最小構成のページを作成できます（サンプル1）。

■サンプル1[HTML]

<div data-role="page" id="ページID"> 
  <div data-role="header"><h1>ヘッダー</h1></div>
  <div data-role="content">コンテンツ</div>
  <div data-role="content"><h4>フッター</h4></div>
</div>

jQuery Mobileにより作成されたページ

　jQuery Mobileのページは、1つのHTML内に複数記述できます。サンプル2では、「#page1」というページと「#page2」というページを作成しています。

■サンプル2[HTML]

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

　サンプル2をブラウザーで確認すると、HTML内に最初に記述しているページ（#page1）の内容だけが表示されます。他のページを表示するには、sample02.html#page2といった具合にURLの後ろにページIDを付けてアクセスする必要があります。

　各ページへリンクを張るには、a要素のhref属性にページIDを記述します。

■サンプル3[HTML]

<a href="#page2">ページ2</a>

リンクをタップ(クリック)するとページが切り替わる

　jQuery Mobileではページ遷移時にアニメーションしながら表示が切り替わります。アニメーションの制御については後ほど解説します。

ダイアログ表示　data-rel="dialog"

　jQuery Mobileの特殊なページとして、ダイアログがあります。ページへのリンクに対してdata-rel属性「dialog」を指定すると、リンク先のコンテンツがページ上に浮いているようにして表示されます。

■サンプル4[HTML]

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

jQuery Mobileのダイアログページ

　ダイアログページは拡大しながら表示される「ポップアニメーション」で表示され、ダイアログの左上に「閉じるボタン」が自動的に表示されます。

テーマの切り替え

　jQuery MobileではCSS3を利用したCSSフレームワークが採用されています。ページ要素に対してdata-theme属性「a」〜「e」を指定すると、デザインテーマを切り替えられます。

■サンプル5[HTML]

<div data-role="page" id="page1" data-theme="b">

jQuery Mobileで用意されているテーマ、左から「b」「c」「d」「e」」

　jQuery Mobileの各UIパーツは指定したテーマに沿ったカラーリングで表示されます。ページ全体ではなく指定したパーツだけ個別にもテーマを適用できます。

　jQuery Mobileの正式版リリース時には、テーマを簡単にカスタマイズできる「ThemeRoller」も提供される予定です。

jQuery UIで提供されるThemeRoller。jQuery Mobileでも同様の仕組みが提供される予定

ページ遷移

　jQuery Mobileではさまざまなページ遷移のアニメーションエフェクトが用意されています。

　詳しくは連載第3回を参照してください。

　上記ページで解説しているアニメーションのほかには、次のようなアニメーションも設定できます。

ページを表示したときと逆のアニメーションを設定する　data-direction="reverse"

　a要素に対してdata-direction属性「reverse」を設定すると、指定したアニメーションと逆向きの動きでリンクを作成できます。たとえば、右から左にスライドするアニメーションが設定されているときにreverseを利用すると、ページが左から右にスライドします。

■サンプル6[HTML]

<a href="#page1" data-direction="reverse">page1</a>

リストの表示

　スマートフォンサイトで多用されるのが、リスト表示です。jQuery Mobileではさまざまなリスト表示のUIが用意されています。

一般的なリスト　data-role属性「listview」

　ul、ol/li要素などのリストでマークアップされた項目にdata-role属性「listview」を追加すると、スマートフォンに最適化されたリストとして表示されます（サンプル7、サンプル8）。

■サンプル7[HTML]

<ul data-role="listview">
  <li>list</li>
  <li>list</li>
  <li>list</li>
  <li>list</li>
  <li>list</li>
</ul>

jQuery Mobileで利用できるリスト

■サンプル8[HTML]

<ol data-role="listview">
  <li>list</li>
  <li>list</li>
  <li>list</li>
  <li>list</li>
  <li>list</li>
</ol>

ol要素でリストを作成すると左に通し番号が表示される

　リスト内の項目がa要素で包まれている場合は、右端に矢印が付いたリンクリストとして表示されます。

■サンプル9[HTML]

<ul data-role="listview">
  <li><a href="#page2">list</a></li>
  <li><a href="#page2">list</a></li>
  <li><a href="#page2">list</a></li>
  <li><a href="#page2">list</a></li>
  <li><a href="#page2">list</a></li>
</ul>

左に矢印が表示されるリンクリスト

　入れ子状態のリストでは、最初にメイン（親）のリストが表示され、リストをタップするとページが遷移して子リストが表示されます（サンプル10）。

■サンプル10[HTML]

<ul data-role="listview">
  <li>list
    <ul>
      <li><a href="#page2">list2</a></li>
      <li><a href="#page2">list2</a></li>
      <li><a href="#page2">list2</a></li>
    </ul>
  </li>
  <li>list</li>
  <li>list</li>
  <li>list</li>
  <li>list</li>
</ul>

メインのリストと子リスト、現在のバージョンでは子リストはテーマbと同じカラーリングが適用される

分割リスト

　li内に2つのリンクを記述すると、1つのリスト項目に2つのリンクを設定できる分割リストも作成できます

■サンプル11[HTML]

<ul data-role="listview">
  <li><a href="#page2">list</a><a href="#page2">detail</a></li>
  <li><a href="#page2">list</a><a href="#page2">detail</a></li>
  <li><a href="#page2">list</a><a href="#page2">detail</a></li>
  <li><a href="#page2">list</a><a href="#page2">detail</a></li>
  <li><a href="#page2">list</a><a href="#page2">detail</a></li>
</ul>

　分割リストでは、2番目のリンクはリンクアイコンだけが表示されます。

1つのリスト項目に2つのリンクを設定できる分割リスト

分割リストのアイコンを設定　data-split-icon属性

　分割リストで表示するアイコンは、data-split-icon属性で変更できます（利用できるアイコンの種類は、後述するアイコンの項目で解説します）。たとえば、サンプル12のように「gear」を設定すると歯車のようなアイコンになります。

■サンプル12[HTML]

<ul data-role="listview" data-split-icon="gear">

アイコンをgear（歯車）に変えた状態

分割リストのテーマを設定　data-split-them属性

　分割リストではdata-split-them属性を利用してテーマを適用できます。分割リストのリンクアイコンは、デフォルトではテーマ「b」が適用されていますが、data-split-themeでページのデザインに合ったテーマを適用できます。

■サンプル13[HTML]

<ul data-role="listview" data-split-theme="a">

アイコンのテーマをページテーマと同じaに設定した状態

角丸のリスト　data-inset属性「true」

　ul/ol要素に対してdata-inset属性「true」を付けると、角丸の立体的なリストにできます。

■サンプル14[HTML]

<ul data-role="listview" data-inset="true">

角丸のリスト

説明付きのリスト

　リスト内では、サンプル15のように見出し要素とp要素などを組み合わせることで説明を表示できます。

■サンプル15[HTML]

<ul data-role="listview">
  <li><a href="#page2"><h1>見出し</h1><p>説明の内容</p></a></li>
  <li><a href="#page2"><h1>見出し</h1><p>説明の内容</p></a></li>
  <li><a href="#page2"><h1>見出し</h1><p>説明の内容</p></a></li>
  <li><a href="#page2"><h1>見出し</h1><p>説明の内容</p></a></li>
</ul>

説明付きのリスト

　class属性「ui-li-aside」を設定した要素を記述すると、リスト項目の右上に補足的な情報も表示できます。

■サンプル16[HTML]

<ul data-role="listview">
  <li><a href="#page2"><p class="ui-li-aside">2011年7月20日</p><h1>見出し</h1><p>説明の内容</p></a></li>
  <li><a href="#page2"><p class="ui-li-aside">2011年7月20日</p><h1>見出し</h1><p>説明の内容</p></a></li>
  <li><a href="#page2"><p class="ui-li-aside">2011年7月20日</p><h1>見出し</h1><p>説明の内容</p></a></li>
  <li><a href="#page2"><p class="ui-li-aside">2011年7月20日</p><h1>見出し</h1><p>説明の内容</p></a></li>
</ul>

ページ右上に補足説明を追加した表示

リストに見出しを設定　data-role属性「list-divider」

　リスト内のli要素にdata-role属性「list-divider」を追加すると、その項目は見出し項目として扱われます（サンプル17）。

■サンプル17[HTML]

<ul data-role="listview">
  <li data-role="list-divider">見出し</li>
  <li><a href="#page2">list</a></li>
  <li><a href="#page2">list</a></li>
  <li data-role="list-divider">見出し</li>
  <li><a href="#page2">list</a></li>
  <li><a href="#page2">list</a></li>
</ul>

リストに見出しを設定した表示

見出しのテーマを変更する　data-dividertheme属性

　ul要素やol要素に対してdata-dividertheme属性を設定すると、見出しのテーマを変更できます。デフォルトでは「b」のテーマが適用されています。

■サンプル18[HTML]

<ul data-role="listview" data-dividertheme="a">
  <li data-role="list-divider">見出し</li>
  <li><a href="#page2">list</a></li>
  <li><a href="#page2">list</a></li>
  <li data-role="list-divider">見出し</li>
  <li><a href="#page2">list</a></li>
  <li><a href="#page2">list</a></li>
</ul>

見出しのテーマを「a」に変更した状態