このページの本文へ

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

サンプルで学ぶjQuery Mobileまとめ(前編)

2011年07月28日 13時00分更新

西畑一馬/to-R

  • この記事をはてなブックマークに追加
本文印刷

リストの表示

 スマートフォンサイトで多用されるのが、リスト表示です。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>


<画像>06.jpg
jQuery Mobileで利用できるリスト

サンプル8[HTML]


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


<画像>07.jpg
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>


<画像>08.jpg
左に矢印が表示されるリンクリスト

 入れ子状態のリストでは、最初にメイン(親)のリストが表示され、リストをタップするとページが遷移して子リストが表示されます(サンプル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>


<画像>09-01.jpg、09-02.jpg
メインのリストと子リスト、現在のバージョンでは子リストはテーマ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番目のリンクはリンクアイコンだけが表示されます。

<画像>10.jpg
1つのリスト項目に2つのリンクを設定できる分割リスト

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

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

サンプル12[HTML]


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


<画像>11.jpg
アイコンをgear(歯車)に変えた状態

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

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

サンプル13[HTML]


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


<画像>12.jpg
アイコンのテーマをページテーマと同じaに設定した状態

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

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

サンプル14[HTML]


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


<画像>13.jpg
角丸のリスト

説明付きのリスト

 リスト内では、サンプル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>


<画像>14.jpg
説明付きのリスト

 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>


<画像>15.jpg
ページ右上に補足説明を追加した表示

リストに見出しを設定 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>


<画像>16.jpg
リストに見出しを設定した表示

見出しのテーマを変更する 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>


<画像>17.jpg
見出しのテーマを「a」に変更した状態
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く