jQuery Mobile リスト・ビュー

❮ 前章へ 次章へ ❯


jQuery Mobile リスト・ビュー

jQuery Mobile のリスト・ビューは、標準の HTML リストで、順序付き(<ol>)と、順序なし(<ul>)です。

リストを作成するには、<ol> や <ul> 要素に data-role="listview" を適用します。 項目をタップ可能にするには、各リスト項目(<li>)内にリンクを指定します:

<ol data-role="listview">
  <li><a href="#">List Item</a></li>
</ol>

<ul data-role="listview">
  <li><a href="#">List Item</a></li>
</ul>
Try it Yourself »

角丸やマージンを使ってリストをスタイルするには、data-inset="true" 属性を使用します:

<ul data-role="listview" data-inset="true">
Try it Yourself »

デフォルトでは、リスト項目内のリンクは自動的にボタンに変わります(ui-class="btn" や data-role="button"は必要ありません)。


リスト・ディバイダ

リスト・ディバイダは、項目をカテゴリ/セクションに編成し、グループ化するために使用します。

リスト・ディバイダを指定するには、data-role="list-divider" 属性を <li> 要素に追加します:

<ul data-role="listview">
  <li data-role="list-divider">Europe</li>
  <li><a href="#">Norway</a></li>
  <li><a href="#">Germany</a></li>
</ul>
Try it Yourself »

アルファベット順リスト(電話帳など)を使用している場合、jQuery Mobile は <ol> や <ul> 要素に data-autodividers="true" 属性を 設定することにより、適切なディバイダを自動的に追加します:

<ul data-role="listview" data-autodividers="true">
  <li><a href="#">Adele</a></li>
  <li><a href="#">Agnes</a></li>
  <li><a href="#">Billy</a></li>
  <li><a href="#">Calvin</a></li>
  ...
</ul>
Try it Yourself »

data-autodividers="true" 属性は、項目におけるテキストの大文字の先頭文字でディバイダを作成します。


その他の例

読取り専用リスト
リンクなしのリストを作成する方法(ボタンでも、タップ可能でもない)。

パネル
リスト項目にパネルを挿入する方法。



❮ 前章へ 次章へ ❯