jQuery Mobile メモ - List view の小技

jQueryMobile javascript

jQuery Mobile のList viewは、iPhoneアプリなどでよく見られる標準的なリスト表示をお手軽に実現することができる便利なコンポーネントです。
そのList viewのデモでは紹介されていないちょっとした小技を。


まず、リンク付きのリストの基本形。



こう記述します。

<ul data-role="listview" data-inset="true">
<li><a href="#">あずま きよひこ</a></li>
<li><a href="#">羽海野 チカ</a></li>
<li><a href="#">伊坂 幸太郎</a></li>
<li><a href="#">荒川 弘</a></li>
<li><a href="#">石川 雅之</a></li>
</ul>


次に、いろいろとすっとばして左右で別のリンクを設定できる Split button list。



これも簡単で、<li>の中にリンクが２個あれば自動的に左右に配置されます。

<ul data-role="listview" data-inset="true">
<li>
	<a href="#">あずま きよひこ</a>
	<a href="#">編集</a>
</li>
<li>
	<a href="#">羽海野 チカ</a>
	<a href="#">編集</a>
</li>
<li>
	<a href="#">伊坂 幸太郎</a>
	<a href="#">編集</a>
</li>
<li>
	<a href="#">荒川 弘</a>
	<a href="#">編集</a>
</li>
<li>
	<a href="#">石川 雅之</a>
	<a href="#">編集</a>
</li>
</ul>


このSplit listsの右側に配置されるリンクのアイコンは、<ul>にdata-split-iconを設定することで変更されます。

<ul data-role="listview" data-inset="true" data-split-icon="plus">


ただ実はこれ、それぞれの項目で設定することができます。



それぞれのリンクの<a>に対してdata-iconを設定するだけです。
併せて、data-themeで個々にテーマを設定することもできたりします。

<ul data-role="listview" data-inset="true">
<li>
	<a href="#">あずま きよひこ</a>
	<a href="#" data-icon="plus" data-theme="a">編集</a>
</li>
<li>
	<a href="#">羽海野 チカ</a>
	<a href="#" data-icon="check" data-theme="b">編集</a>
</li>
<li>
	<a href="#">伊坂 幸太郎</a>
	<a href="#" data-icon="gear" data-theme="c">編集</a>
</li>
<li>
	<a href="#">荒川 弘</a>
	<a href="#" data-icon="arrow-r" data-theme="d">編集</a>
</li>
<li>
	<a href="#">石川 雅之</a>
	<a href="#" data-icon="arrow-u" data-theme="e">編集</a>
</li>
</ul>


ちなみにこのアイコンの変更は、通常のList viewでも有効です。



ただしこの場合は<a>ではなく、<li>へ設定する必要がありました。
残念ながらテーマを個々に設定することはできませんでした。

<ul data-role="listview" data-inset="true" data-icon="plus" >
<li data-icon="plus">   <a href="#">あずま きよひこ</a></li>
<li data-icon="check">  <a href="#">羽海野 チカ</a><</li>
<li data-icon="gear">   <a href="#">伊坂 幸太郎</a></li>
<li data-icon="arrow-r"><a href="#">荒川 弘</a></li>
<li data-icon="arrow-u"><a href="#">石川 雅之</a></li>
</ul>


あともうひとつ、通常のList viewと、Split listは混在することができます。



ちなみに、これらは正式にドキュメント化されている訳ではないので、もしかしたら偶然動作しているだけかもしれません。
たぶんそんなことは無いと思いますけど。