jQuery Mobile リストコンテンツ

jQuery Mobile リストサムネイル

16x16pxより大きな画像がある場合、リンクに<img>要素を追加してください。

jQuery Mobileは、自動的に画像を80x80pxに調整します：

例

<ul data-role="listview">
  <li><a href="#"><img src="chrome.png"></a></li>
</ul>

自分で試してみる

情報を持つリストを埋めるには、標準のHTMLを使用してください：

例

<ul data-role="listview">
  <li>
    <a href="#">
    <img src="chrome.png">
    <h2>Google Chrome</h2>
    <p>Google Chromeは無料のオープンソースのwebブラウザです。2008年にリリースされました。</p>
    </a>
  </li>
</ul>

自分で試してみる

jQuery Mobile リストアイコン

リストに16x16pxのアイコンを追加するには、<img>要素にclass="ui-li-icon"属性を追加してください：

例

<li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon">USA</a></li>

自分で試してみる

分割ボタン

垂直セパレーターの分割リストを作成するには、<li>要素内に二つのリンクを配置してください。

jQuery Mobileは、ユーザーがアイコンをスライドさせるときにリンクのテキスト（もしあれば）を表示するように、二つ目のリンクに青い矢印アイコンのスタイルを自動的に追加します：

例

<ul data-role="listview">
  <li>
    <a href="#"><img src="chrome.png"></a>
    <a href="#">テキスト</a>
  </li>
</ul>

自分で試してみる

ページとダイアログを追加することで、リンクの機能を強化できます：

例

<ul data-role="listview">
  <li>
    <a href="#"><img src="chrome.png"></a>
    <a href="#download" data-rel="dialog">ブラウザをダウンロード</a>
  </li>
</ul>

自分で試してみる

カウントバブル

カウントバブルは、リストアイテムに関連する数値を表示するために使用されます、例えばメールのメッセージ：

カウントバブルを追加するには、インライン要素を使用してください、例えば <span>、class "ui-li-count" 属性を設定し数字を追加してください：

例

<ul data-role="listview">
  <li><a href="#">インボックス<span class="ui-li-count">335</span></a></li>
  <li><a href="#">送信<span class="ui-li-count">123</span></a></li>
  <li><a href="#">ゴミ<span class="ui-li-count">7</span></a></li>
</ul>

自分で試してみる

注：カウントバブルに正しい数字を表示するには、プログラム的な更新が必要です。次の章で説明します。

さらに多くの例

リストアイテムのデフォルトリンクアイコンを変更する
リストアイテムに異なるリンクアイコン（デフォルトは右矢頭）を設定する方法はどうですか。
折りたたみリスト
隠し表示されたコンテンツのリストを作成する方法はどうですか。
さらに多くのコンテンツ形式
カレンダーを作成する方法はどうですか。