jQuery Mobile その５（リスト）

リストをきれいに表示してくれる機能があるので、なんとなくメモ。

ulタグや、olタグにdata-role="listview" をつけることで、デラックスなリストを表示してくれる。

（記載例）

  <ul data-role="listview">
     <li>リスト１番目</li>
     <li>リスト２番目</li>
 </ul>

さらに、data-inset="true"　をつけると、角丸なリストを表示してくれる。
（記載例）
　　<ul data-role="listview" data-inset="true">

      <li>リスト１番目</li>
     <li>リスト２番目</li>
 </ul>

liタグ内の内容をaタグで括ると、自動的に右方向アイコンが表示される。
（記載例）
  <ul data-role="listview" data-inset="true">
      <li><a href="aa.html" rel="external">リスト１番目</a></li>
      <li>リスト２番目</li>
  </ul>
リストの中でliタグにdata-role="list-divider"の属性をつけると、通常のリスト表示とは異なり、サブタイトルのように表示される。
（記載例）
   <ul data-role="listview" data-inset="true">
　　　　<li data-role="list-divider">リストタイトル</li>
       <li><a href="aa.html" rel="external">リスト１番目</a></li>
   </ul>

liタグの子要素としてブロック要素が存在する場合、ブロック要素にＣＳＳクラスとして、ui-li-asideクラスを設定すると、右側に寄せて表示してくれる。
（記載例）
   <ul data-role="listview" data-inset="true">
　　　　<li><h3>タイトル</h3><p>内容</p><p class="ul-li-aside">注釈</p></li>
   </ul>

画像付のリストも表示することができる。
画像を表示したければ、liタグの中で、imgタグを使って画像を表示すればよい。
ただし、自動的に縦、横どちらかが80px(標準？） or 40px(iconモード？）に縮小した形で表示される。
imgタグにCSSクラスとして、ui-li-iconクラスを設定すると、iconモード（？）で表示される。

（記載例）
   <ul data-role="listview"  data-inset="true">
       <li><img src="images/xxx.jpg"/>
           <h1>大きい画像サンプル</h1>
       </li>       
       <li><img src="images/xxx.jpg" class="ui-li-icon"/>
           <h1>小さい画像サンプル</h1>
       </li>       
   </ul>