jQuery Mobile リストビューページ

jQuery Mobile リストビューページ

jQuery Mobileのリストビューは標準のHTMLリスト（<ol>と<ul>）です。

リストを作成するには、<ol>または<ul>要素にdata-role="listview"属性を追加してください。これらの項目をクリック可能にするには、各リストアイテム（<li>）にリンクを指定してください：

例

<ol data-role="listview">
  <li><a href="#">リストアイテム</a></li>
</ol>
<ul data-role="listview">
  <li><a href="#">リストアイテム</a></li>
</ul>

自分で試してみる

リストに丸みと余白を追加するには、data-inset="true"属性を使用してください：

例

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

自分で試してみる

ヒント：デフォルトでは、リストのアイテムは自動的にボタンに変換されます（data-role="button"は必要ありません）。

リスト区切り符

リスト区切り符（List Dividers）は、項目をカテゴリ/セクションとして組織および構成するために使用されます。

リストの区切り符を指定するには、<li>要素にdata-role="list-divider"属性を追加してください：

例

<ul data-role="listview">
 <li data-role="list-divider">ヨーロッパ</li>
  <li><a href="#">フランス</a></li>
  <li><a href="#">ドイツ</a></li>
</ul>

自分で試してみる

リストがアルファベット順であれば（例えば連絡先）、jQuery Mobileはdata-autodividers="true"属性を設定することで適切な区切り符を自動的に追加します：

例

<ul data-role="listview" data-autodividers="true">
  <li><a href="#">Adam</a></li>
  <li><a href="#">Angela</a></li>
  <li><a href="#">Bill</a></li>
  <li><a href="#">Calvin</a></li>
  ...
</ul>

自分で試してみる

ヒント：data-autodividers="true"属性は、リストアイテムのテキストの最初の文字を大文字にして区切り符を作成します。

検索フィルタ

リストに検索ボックスを追加するには、data-filter="true"属性を使用してください：

例

<ul data-role="listview" data-filter="true"</ul>

自分で試してみる

デフォルトでは、検索ボックスのテキストは「Filter items...」です。

デフォルトのテキストを変更するには、data-filter-placeholder 属性を使用してください：

例

<ul data-role="listview" data-filter="true"> data-filter-placeholder="名前を検索">

自分で試してみる

さらに多くの例

読み取り専用リスト
リンクがないリスト（ボタンではありません、クリック不可）を作成する方法