リストビュー

前回、jQueryMobileを使った基本的なスマホサイトのページ作成方法をご紹介しましたが、
さらにスマホサイトっぽくしていくため、このページではリストビューの作成方法についてご紹介します。
※詳しい説明などは他サイト・書籍を見てください。

 

基本リスト


画像1

画像2


						<!---画像1----------------->
						<ul data-role="listview">
							<li>menu1</li>
							<li>menu2</li>
							<li>menu3</li>
							<li>menu4</li>
							<li>menu5</li>
							<li>menu6</li>
							<li>menu7</li>
							<li>menu8</li>
						</ul>

						<!---画像2----------------->
						<ul data-role="listview">
							<li><a href="#">menu1</a></li>
							<li><a href="#">menu2</a></li>
							<li><a href="#">menu3</a></li>
							<li><a href="#">menu4</a></li>
							<li><a href="#">menu5</a></li>
							<li><a href="#">menu6</a></li>
							<li><a href="#">menu7</a></li>
							<li><a href="#">menu8</a></li>
						</ul>
					

ulタグに「data-role="listview"」属性を追加するだけ(画像1)。
またliタグの中にaタグを入れると、右側に矢印マークが表示されます(画像2)




丸角リスト


画像3


						<!---画像3----------------->
						<ul data-role="listview" data-inset="true">
							<li><a href="#">menu1</a></li>
							<li><a href="#">menu2</a></li>
							<li><a href="#">menu3</a></li>
							<li><a href="#">menu4</a></li>
							<li><a href="#">menu5</a></li>
							<li><a href="#">menu6</a></li>
							<li><a href="#">menu7</a></li>
							<li><a href="#">menu8</a></li>
						</ul>
					

ulタグに「data-role="listview"」と「data-inset="true"」を追加すると、丸角リストになります(画像3)





サムネイル画像


画像4

画像5


						<!---画像4----------------->
						<ul data-role="listview">
							<li><a href="#"><img src="sample1.png"><h2>menu1</h2><p>メニュー1です</p></a></li>
							<li><a href="#"><img src="sample2.png"><h2>menu2</h2><p>メニュー2です</p></a></li>
							<li><a href="#"><img src="sample3.png"><h2>menu3</h2><p>メニュー3です</p></a></li>
							<li><a href="#"><img src="sample4.png"><h2>menu4</h2><p>メニュー4です</p></a></li>
						</ul>
					

liタグ内にimgタグ(画像)を記述するとサムネイル画像を表示できます。
画像は自動的に80×80pxの正方形に調整されるので、正方形の画像を用意しましょう。
またliタグ内のタイトルをhタグで囲み、説明文をpタグで囲みます。
※画像4は基本リスト、画像5は丸角リスト




アイコン表示


画像4-1

画像5-1


						<!---画像4-1------------------>
						<ul data-role="listview">
							<li><a href="#"><img src="icon1.png" class="ui-li-icon">menu1</a></li>
							<li><a href="#"><img src="icon1.png" class="ui-li-icon">menu2</a></li>
							<li><a href="#"><img src="icon1.png" class="ui-li-icon">menu3</a></li>
							<li><a href="#"><img src="icon2.png" class="ui-li-icon">menu4</a></li>
						</ul>
					

サムネイル画像同様、liタグ内にimgタグを記述し、さらにimgタグ内に「class="ui-li-icon"」を追加することでアイコン(小さい画像)を表示できます。
アイコン画像は自動的に16×16pxに調整されるのでとりあえず正方形の画像を用意しましょう。
※画像4-1は基本リスト、画像5-1は丸角リスト




リスト区切り(リストタイトル)


画像6

画像7


						<!---画像6----------------->
						<ul data-role="listview" data-divider-theme="b">
							<li data-role="list-divider">Menu A</li>
							<li><a href="#">menu1</a></li>
							<li><a href="#">menu2</a></li>
							<li><a href="#">menu3</a></li>
							<li data-role="list-divider">Menu B</li>
							<li><a href="#">menu1</a></li>
							<li><a href="#">menu2</a></li>
							<li><a href="#">menu3</a></li>
						</ul>

						<!---画像7----------------->
						<ul data-role="listview" data-inset="true">
							<li data-role="list-divider">Menu A</li>
							<li><a href="#">menu1</a></li>
							<li><a href="#">menu2</a></li>
							<li><a href="#">menu3</a></li>
							<li data-role="list-divider">Menu B</li>
							<li><a href="#">menu1</a></li>
							<li><a href="#">menu2</a></li>
							<li><a href="#">menu3</a></li>
						</ul>
					

リストを区切って「タイトル」のようにする場合はliタグに「data-role="list-divider"」属性を追加します。
また、ulに「data-divider-theme="a" or "b"」で区切りのテーマ変更。
※画像6は基本リスト、画像7は丸角リスト





階層化リスト


※jQueryMobile1.4から「階層化リスト」が使えなくなりました。



画像8

画像9


						<!---画像8----------------->
						<ul data-role="listview">
							<li>menu1
								<ul data-role="listview">
									<li><a href="#">menu1_1</a></li>
									<li><a href="#">menu1_2</a></li>
									<li><a href="#">menu1_3</a></li>
								</ul>
							</li>
							<li><a href="#">menu2</a></li>
							<li><a href="#">menu3</a></li>
							<li><a href="#">menu4</a></li>
							<li><a href="#">menu5</a></li>
						</ul>
					

liタグ内に("listview"を追加した)ulタグ・liタグを使ってリストを階層化します。
最下層のみaタグでリンク先を記述します。画像8のmenu1を押すと画像9のように下層リストが表示されます。
この下層リストのページには戻るボタンがつきません。

※jQueryMobile1.4から「階層化リスト」が使えなくなりました。前のバージョンでご使用ください。




検索フィルター


画像10

画像11


						<!---画像10----------------->
						<ul data-role="listview" data-filter="true" data-filter-placeholder="何か入力してください..">
							<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>
							<li><a href="#">あお</a></li>
							<li><a href="#">あおむらさき</a></li>
							<li><a href="#">むらさき</a></li>
						</ul>
					

ulタグ内に「data-filter="true"」属性を追加するとリスト上部に検索フィールドが表示されます(画像10)。
フィールド内で文字を入力するとリストの中から入力文字を含む項目だけが表示されます(画像11)。
また、ulタグに「data-filter-placeholder="〇〇"」を追加するとフィールド内の初期表示文字を変更できます。
〇〇に表示したい文字を記述してください。





番号付きリスト


画像12


						<!---画像12----------------->
						<ol data-role="listview">
							<li><a href="#">menu1</a></li>
							<li><a href="#">menu2</a></li>
							<li><a href="#">menu3</a></li>
							<li data-role="list-divider">Menu</li>
							<li><a href="#">menu4</a></li>
							<li><a href="#">menu5</a></li>
							<li><a href="#">menu6</a></li>
							<li><a href="#">menu7</a></li>
						</ol>
					

ulタグではなく、olタグを使用すると各リスト項目に番号が付きます。
また途中で、リスト区切り入れるとリスト区切り毎に1,2,3,…と項目番号がつきます。




「carat-r」アイコン変更


画像12_1


						<!---画像12_1----------------->
						<ul data-role="listview">
							<li data-icon="info"><a href="#">info</a></li>
							<li data-icon="gear"><a href="#">gear</a></li>
							<li data-icon="alert"><a href="#">alert</a></li>
							<li data-icon="carat-l"><a href="#">carat-l</a></li>
							<li data-icon="false"><a href="#">false</a></li>
						</ul>
					

右側アイコンは、デフォルトでは「carat-r」ですが、
liタグに「data-icon="〇〇"」を入れることでこれを変更することができます。
今回は「info」「gear」「alert」「carat-l」「false(なし)」を入れてみました。


その他のアイコンはこちら




分割ボタン


画像13

画像14


						<!---画像13------------------------>
						<ul data-role="listview">
							<li><a href="#">menu1</a><a href="#">icon</a></li>
							<li><a href="#">menu2</a><a href="#">icon</a></li>
							<li><a href="#">menu3</a><a href="#">icon</a></li>
							<li data-icon="mail"><a href="#">menu4</a><a href="#">icon</a></li>
							<li data-icon="star"><a href="#">menu5</a><a href="#">icon</a></li>
						</ul>

						<!---画像14------------------------>
						<ul data-role="listview" data-split-icon="gear" data-split-theme="b">
							<li><a href="#"><h2>menu1</h2><p>メニュー1です。</p></a><a href="#">icon</a></li>
							<li><a href="#"><h2>menu2</h2><p>メニュー2です。</p></a><a href="#">icon</a></li>
							<li><a href="#"><h2>menu3</h2><p>メニュー3です。</p></a><a href="#" data-theme="a">icon</a></li>
							<li><a href="#"><h2>menu4</h2><p>メニュー4です。</p></a><a href="#">icon</a></li>
						</ul>
					

liタグの中にaタグを2つ配置すると、分割ボタンを作成することができます(2番目のaタグが分割ボタンとなります)。
分割ボタンの方はアイコンのみの表示(テキスト表示されない)となり、別のリンクを設定する事ができます。

また、ulタグに「data-split-icon="〇〇"」で分割ボタン側のアイコンを一括変更可能。「data-split-theme="a" or "b"」で分割ボタン側のテーマを一括変更。
画像14のmenu3のように分割ボタンのaタグに「data-theme」を入れて個別にテーマ変更もできます。




カウントバブル


画像15

画像16


						<!---画像15------------------------>
						<ul data-role="listview">
							<li><a href="#">menu1<span class="ui-li-count">4</span></a></li>
							<li><a href="#">menu2<span class="ui-li-count">1</span></a></li>
							<li><a href="#">menu3<span class="ui-li-count">105</span></a></li>
							<li><a href="#">menu4<span class="ui-li-count">0.5</span></a></li>
							<li><a href="#">menu5<span class="ui-li-count">0</span></a></li>
							<li><a href="#">menu6<span class="ui-li-count">1030</span></a></li>
							<li><a href="#">menu7<span class="ui-li-count">50</span></a></li>
							<li><a href="#">menu8<span class="ui-li-count">31</span></a></li>
						</ul>

						<!---画像16------------------------>
						<ul data-role="listview" data-count-theme="b" data-inset="true">
							<li data-role="list-divider">Menu A<span class="ui-li-count">100</span></li>
							<li><a href="#">menu1<span class="ui-li-count">4</span></a></li>
							<li><a href="#">menu2<span class="ui-li-count">1</span></a></li>
							<li><a href="#">menu3<span class="ui-li-count">105</span></a></li>
							<li><a href="#">menu4<span class="ui-li-count">0.5</span></a></li>
							<li data-role="list-divider">Menu A<span class="ui-li-count">1000</span></li>
							<li><a href="#">menu6<span class="ui-li-count">1030</span></a></li>
							<li><a href="#">menu7<span class="ui-li-count">50</span></a></li>
							<li><a href="#">menu8<span class="ui-li-count">31</span></a></li>
						</ul>
					

 

上記コードの様にliタグの中の要素に「class="ui-li-count"」を追加し、
表示させたい数値を入力することでカウントバブルを表示する事ができます(画像15)。

またulタグに「data-count-theme="a" or "b"」でカウントバブルのテーマ変更できます。
liタグに「data-role="list-divider"」を追加した区切りリストにもカウントバブル追加できます(画像16)。




右上補足情報


画像17


						<ul data-role="listview">
							<li><h2>menu1</h2><p>メニュー1です。</p><p class="ui-li-aside">2015/06/26</p></li>
							<li><a href="#"><h2>menu2</h2><p>メニュー2です。</p><p class="ui-li-aside">2015/06/25</p></a></li>
							<li><a href="#"><h2>menu3</h2><p>メニュー3です。</p><p class="ui-li-aside"><strong>15:00</strong></p></a></li>
							<li><a href="#"><img src="icon1.png" class="ui-li-icon"><h2>menu4</h2><p>メニュー4です。</p><p class="ui-li-aside">補足内容です。<br>補足内容2です。</p></a></li>
						</ul>
					

liタグ内のpタグに「class="ui-li-aside"」を追加すると、右上に補足情報的な感じで表示することができます。
TOPページなどにおく「新着情報、更新情報」とかの日付とかに使えそうですね。




以上でリストビューの作成方法は終了です。
少しスマホサイトっぽくなってきましたね。次回は「ボタン」の作成方法についてです。