Webデザイナーブログから学ぶホームページ制作

jQuery mobileではカテゴリリストやお知らせ一覧など、リストビューが簡単な指定で設置することができます。 html + cssの設定とは全く異なる指定方法ではありますが、指定方法がわかるようになると簡単です。

jQuery Mobileを利用してリストビューを設定する方法を解説します。

リストビュー要素は、「ul」「ol」要素にデータ属性「data-role=”listview”」」を割り当てたウィジェット要素です。
リストビューのデフォルトでは、リンク「a」を設定すると「ui-listview」クラスが付加され、リストアイテムのリンクには右向きの矢印アイコンが右側に表示されます。
また、アイコン表示以外にも、カウントバブルや画像のサムネイルも配置することができます。

<ul data-role="listview">
<li>アウター</li>
<li>ジャケット</li>
<li>ボトムス</li>
<li>靴</li>
<li>小物</li>
<li>帽子</li>
</ul>

<ul data-role="listview">
<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>

※「ol」要素に「data-role=”listview”」のデータ属性を指定すると番号付きリストが配置されます。

<ol data-role="listview">
<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>
</ol>

実装サンプルを作りましたのでこちらでも確認してみてください。
ヘッダーとフッターサンプル

カウントバブルとは、リストビューの項目に関連した記事や内容の個数を表すための数字です。
その他、タイムラインや未購読数を表示するような用途でも利用できます。
カウントバブルを表示するには、「li」要素の配下に「class=”ui-li-count”」属性を指定することで表示されます。カウントバブルを利用する場合、一般的に「span」要素で囲ってあげると良いしょう。

<ul data-role="listview">
<ol><a href="#">アウター<span class="ui-li-count">111</span></a>
<ol><a href="#">ジャケット<span class="ui-li-count">180</span></a>
<ol><a href="#">ボトムス<span class="ui-li-count">12</span></a>
<ol><a href="#">靴<span class="ui-li-count">20</span></a>
<ol><a href="#">小物<span class="ui-li-count">10</span></a>
<ol><a href="#">帽子<span class="ui-li-count">46</span></a>
</ol></ol></ol></ol></ol></ol></ul>

実装サンプルを作りましたのでこちらでも確認してみてください。
ヘッダーとフッターサンプル

リスト項目の一覧毎にサムネイル画像を追加したい場合、「li」要素に「class=”ui-li-has-thumb”」属性を付与してください。

※「img」要素に対して「max-width」「max-height」のスタイルを設定できます。

<ul data-role="listview">
<li class="ui-li-has-thumb">
<a href="#"><img src="https://kingsite.jp/blog/web-designer/%E9%80%95%EF%BD%BB%E8%9C%92%E4%B8%8A%E3%83%B5%E7%B9%A7%EF%BD%A1%E7%B9%A7%EF%BD%A4%E7%B9%9D%EF%BD%AB">リストビューを設置する方法 第1話</a>
</li>
<li class="ui-li-has-thumb">
<a href="#"><img src="https://kingsite.jp/blog/web-designer/%E9%80%95%EF%BD%BB%E8%9C%92%E4%B8%8A%E3%83%B5%E7%B9%A7%EF%BD%A1%E7%B9%A7%EF%BD%A4%E7%B9%9D%EF%BD%AB">リストビューを設置する方法 第2話</a>
</li>
<li class="ui-li-has-thumb">
<a href="#"><img src=https://kingsite.jp/blog/web-designer/%E9%80%95%EF%BD%BB%E8%9C%92%E4%B8%8A%E3%83%B5%E7%B9%A7%EF%BD%A1%E7%B9%A7%EF%BD%A4%E7%B9%9D%EF%BD%AB">リストビューを設置する方法 第3話</a>
</li>
<li class="ui-li-has-thumb">
<a href="#"><img src="https://kingsite.jp/blog/web-designer/%E9%80%95%EF%BD%BB%E8%9C%92%E4%B8%8A%E3%83%B5%E7%B9%A7%EF%BD%A1%E7%B9%A7%EF%BD%A4%E7%B9%9D%EF%BD%AB">リストビューを設置する方法 第4話</a>
</li>
<li class="ui-li-has-thumb">
<a href="#"><img src="https://kingsite.jp/blog/web-designer/%E9%80%95%EF%BD%BB%E8%9C%92%E4%B8%8A%E3%83%B5%E7%B9%A7%EF%BD%A1%E7%B9%A7%EF%BD%A4%E7%B9%9D%EF%BD%AB" style="max-width:50px; max-height:50px;">リストビューを設置する方法 第5話</a>
</li>
</ul>

実装サンプルを作りましたのでこちらでも確認してみてください。
ヘッダーとフッターサンプル

リスト項目内で、見出しや説明を別ける場合や補足情報を追加する場合は「h1,h2,h3,h4,h5,h6」を設定することもでき「ui-li-aside」要素を指定すると補足情報が表示されます。

<ul data-role="listview">
<li><a href="#">
<h2>見出し文章</h2>
<p>説明文章</p>
<p class="ui-li-aside">補足情報</p></a>
</li>
<li><a href="#">
<h2>見出し文章</h2>
<p>説明文章</p>
<p class="ui-li-aside">補足情報</p></a>
</li>
<li><a href="#">
<h2>見出し文章</h2>
<p>説明文章</p>
<p class="ui-li-aside">補足情報</p></a>
</li>
<li><a href="#">
<h2>見出し文章</h2>
<p>説明文章</p>
<p class="ui-li-aside">補足情報</p></a>
</li>
</ul>

実装サンプルを作りましたのでこちらでも確認してみてください。
ヘッダーとフッターサンプル

見出し、説明、補足情報を追加する際に利用する要素の一覧をご紹介します。

クラスも指定要素も簡単に設置できるのが良いですね。
cssを自分で書いたりjavascriptを設定することもないので簡単にリストビューが設置できます。