listview

このエントリーをはてなブックマークに追加

data-role=”listview”はul要素/ol要素をリスト形式に変換するメソッドです。

<ul data-role="listview">
	<li><a href="acura.html">Acura</a></li>
	<li><a href="audi.html">Audi</a></li>
	<li><a href="bmw.html">BMW</a></li>
</ul>

sample

作成されたリストには様々な設定が可能です。

構造化リスト

ul/liをネストして指定することで構造化されたリストを作成することができます。

<ul data-role="listview">
	<li><div>Pets</div>
		<ul>
			<li><a href="index.html">Canary</a></li>
			<li><a href="index.html">Cat</a></li>
			<li><a href="index.html">Dog</a></li>
		</ul>
	</li>
	<li><div>Farm animals</div>
		<ul>
			<li><a href="index.html">Chicken</a></li>
			<li><a href="index.html">Cow</a></li>
			<li><a href="index.html">Duck</a></li>
		</ul>
	</li>
	<li><div>Wild animals</div>
		<ul>
			<li><a href="index.html">Aardvark</a></li>
			<li><a href="index.html">Alligator</a></li>
			<li><a href="index.html">Ant</a></li>
		</ul>
	</li>
</ul>

sample

構造化リストではサブページ遷移時に”sample091.html#listview&ui-page=0-2″といったURLに変更されますがこの際のパラメータは$.mobile.subPageUrlKeyで変更可能です。

参考URL

jQuery Mobile Docs - Lists Overview

登録日 : 2012年11月08日 最終更新日 : 2016年12月19日

同じカテゴリー(data-role)のエントリー

検索

スポンサードリンク

バージョン

リファレンス