西畑一馬のjQuery Mobileデザイン入門 ― 第5回

サンプルで学ぶjQuery Mobileまとめ（前編） (3/5)

リストの表示

　スマートフォンサイトで多用されるのが、リスト表示です。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」に変更した状態