jQuery Mobileのメモ★リスト編

jQuery Mobileで作るWebサイト。リストに関する覚書です。

公式デモ
jQuery Mobile: Demos and Documentation
※Google ChromeなどHTML5に対応しているブラウザ、またはスマートフォンで確認してください。

※以下の内容は、自分用メモを兼ねています。
※見よう見まねでやっているので、間違いもあるかと思います。問題があった場合には、自己責任で解決をお願いしますm(_"_)m

• リストリンクを表示する「data-role="listview"」
  リンクをリストで箇条書きにする。
  デフォルトでは、右端に「>」マークが付く。
  また、テキストが一定文字数を超える場合は、自動的に「…」付きで省略される。
  ※リンクの表示先はページ内を想定。ページ外への移動リンクはjQuery Mobileのメモ★リンクボタン編を参照。
  

  <ul data-role="listview">
      <li><a href="list1.html">リスト1</a></li>
      <li><a href="list2.html">リスト2</a></li>
  </ul>

• リストのテーマを変更する「data-theme="b"」
  テーマの詳細は、公式デモで確認できる。
  

  <ul data-role="listview" data-theme="b">
      <li><a href="list1.html">リスト1</a></li>
      <li><a href="list2.html">リスト2</a></li>
  </ul>

関連記事
jQuery Mobileのメモ★基本編
jQuery Mobileのメモ★リンクボタン編