jQuery Mobileのリストの見た目をちょっとカスタマイズ -覚書-

jQuery Mobileを使えば簡単にスマートフォン対応できる言えば出来るのですが、少しでもカスタマイズしたいなと思うと色々とcssやjsを触る必要があります。
というわけで、今回はよく使うリストについての覚書。

　リストとは？

以下のようなものをリストといいます。
スマートフォン対応サイトではよく見るかと思います。

<ul data-role="listview" data-inset="true">
 <li><a href="#">サンプル</a></li>
</ul>

細かいことについては以下のサイトを参考

• 403 Forbidden

　カスタマイズについて

カスタマイズするには、cssとjsファイルを用意します。

<link rel="stylesheet" href="./jquery.mobile/jquery.mobile-1.0rc1.min.css" />
<link rel="stylesheet" href="./custom.css" /> <!-- これを用意 -->
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="/js/jquery-custom.js"></script><!-- これを用意 -->
<script src="./jquery.mobile/jquery.mobile-1.0rc1.min.js"></script>

今回はcss(custom.css)だけ用意すればOK。

　(ケース1) マージンをとりたい -幅いっぱいはいや！-

幅いっぱいではなくて間に幅を取りたい場合。
自身のcssでmarginを取ればOK。

<ul data-role="listview" data-inset="true" class="narrow">
 <li><a href="#">サンプル</a></li>
</ul>

(custom.css)
ul.narrow {
 margin: 10px;
}

そうすると以下のようになります。

　(ケース2) リストの中にリストを作りたい

リストの中にリストを作りたい場合。

<ul data-role="listview" data-inset="true" class="narrow-sample">
 <li data-role="list-divider">サンプルタイトル</li>
 <ul data-role="listview" data-inset="true" class="narrow-wide">
   <li data-role="list-divider">サンプルタイトルA</li>
   <li><a href="#">サンプルA-1</a></li>
   <li><a href="#">サンプルA-2</a></li>
   <li><a href="#">サンプルA-3</a></li>
 </ul>
 <ul data-role="listview" data-inset="true" class="narrow-wide">
   <li data-role="list-divider">サンプルタイトルB</li>
   <li><a href="#">サンプルB-1</a></li>
   <li><a href="#">サンプルB-2</a></li>
   <li><a href="#">サンプルB-3</a></li>
 </ul>
</ul>

ul.narrow-sample {
 margin: 10px;
 padding: 0px 0px 1px 0px;
}
ul.narrow-wide {
 margin: 5px 5px 5px 5px;
}

そうすると以下のようになります。