jQuery Mobile逆引きリファレンス
ListViewウィジェットで、アイコン付き、カウントバブル付きのリストビューを生成するには？
ListViewウィジェットを使って作成したリストに対して、サムネイル／アイコン画像やカウントバブル、見出し／補足情報を追加する方法を説明する。
jQuery Mobileとは？
jQuery Mobileは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前のとおり、スマホ／タブレットに代表されるモバイル対応アプリを開発するための機能を提供します。jQuery Mobileの導入方法や使い方、jQuery Mobileが提供する主要機能については、「jQuery Mobile逆引きリファレンス： jQuery Mobileを利用するには？」を参照してください。
別稿「ListViewウィジェットで、ネイティブアプリ・ライクなリストビューを作成するには？」では、ListViewウィジェットを利用して、基本的なリストを表示する方法について触れました。本稿では、引き続きリストにサムネイル／アイコン画像やカウントバブル、見出し／補足情報を追加する方法について紹介していきます。
カウントバブルを追加する
カウントバブルは、リスト項目に関連した個数を表すための表現方法です。数値がだ円で囲まれた様子が泡（＝バブル）に似ていることから、そのように呼ばれます。
例えばTwitterクライアントのような例（次の画面）であれば、タイムライン、返信、ダイレクトメッセージなどの項目に対して、それぞれ未読数を表示するような用途で利用することになるでしょう。
具体的なコードは、以下の通りです。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jQuery Mobile</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js">
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>jQuery Mobile TIPS</h1>
</div>
<div role="main" class="ui-content">
<ul data-role="listview">
<li><a href="#">タイムライン<span class="ui-li-count">125</span></a></li>
<li><a href="#">返信<span class="ui-li-count">12</span></a></li>
<li><a href="#">ダイレクトメッセージ<span class="ui-li-count">3</span></a></li>
<li><a href="#">#hamster<span class="ui-li-count">64</span></a></li>
</ul>
</div>
<div data-role="footer">
<h3>Copyright 1998-2014, YAMADA.Yoshihiro</h3>
</div>
</div>
</body>
</html>
|
カウントバブルを表示するには、リスト項目（＝<li>要素）の配下に「class="ui-li-count"」属性を持った要素を配置します。バブルを表す要素としては、中性的な<span>要素を利用するのが一般的です。
リスト項目の先頭にサムネイル画像を追加する
リスト項目の先頭にサムネイル画像を付与することもできます。これには、<li>要素に「class="ui-li-has-thumb"」属性を付与してください。
jQuery Mobile 1.3までは、特にclass属性の指定はなく、リスト項目の先頭に画像を置くだけでサムネイル画像を認識してくれていましたが、1.4でclass属性を明示するように変更となっています。
|
<ul data-role="listview">
<li class="ui-li-has-thumb"><a href="#">
<img src="image/rails4.jpg" />
Rails 4アプリケーションプログラミング</a></li>
<li class="ui-li-has-thumb"><a href="#">
<img src="image/jquery.jpg" />
10日でおぼえるjQuery入門教室 第2版</a></li>
<li class="ui-li-has-thumb"><a href="#">
<img src="image/java.jpg" />
AndroidエンジニアのためのモダンJava</a></li>
<li class="ui-li-has-thumb"><a href="#">
<img src="image/aspnet.jpg" />
独習ASP.NET 第4版</a></li>
<li class="ui-li-has-thumb"><a href="#">
<img src="image/no.jpg" style="max-width:30px; max-height:30px;" />
書き込み式SQLのドリル</a></li>
</ul>
|
より小さなアイコン画像を表示するならば、<img>要素に対してmax-width／max-heightスタイルプロパティ（＝最大幅と高さ）を設定します。jQuery Mobile 1.3以前では、<img>要素に対し「class="ui-li-icon"」属性を付与するという方法がありましたが、これも1.4以降では非推奨となっていますので注意してください。
見出し／補足情報を付与する
見出しや補足情報を伴う複雑なレイアウトも表現できます。これには、<li>要素の配下を、以下のルールに従ってマークアップしてください。
| 項目 | 使用する要素 |
|---|---|
| 見出し | ヘッダー要素（<h1>～<h6>要素） |
| 説明 | <p>要素 |
| 補足情報 | <p class="ui-li-aside">要素 |
<h1>～<h6>要素は、特にいずれを利用してもレイアウトには影響しません。
具体的なコード例を、以下に示します。
|
<li>
<h2>Rails 4アプリケーションプログラミング</h2>
<p>Ruby on Railsを初めて学ぶ人のために</p>
<p class="ui-li-aside">Scaffolding、MVC、テスト</p>
</li>
<li>
<h2>Windows 8開発ポケットリファレンス</h2>
<p>Windowsストアアプリ開発のためのリファレンス</p>
<p class="ui-li-aside">XAML、ビュー、ユーティリティ</p>
</li>
<li>
<h2>10日でおぼえるjQuery入門教室 第2版</h2>
<p>定番jQueryの入門書</p>
<p class="ui-li-aside">セレクター、イベント、Ajax</p>
</li>
<li>
<h2>iPhone／iPad開発ポケットリファレンス</h2>
<p>iPhone/iPadでアプリ開発のためのリファレンス</p>
<p class="ui-li-aside">Objective-C、ネットワーク</p>
</li>
<li>
<h2>AndroidエンジニアのためのモダンJava</h2>
<p>Java言語に関する基礎解説書</p>
<p class="ui-li-aside">オブジェクト指向構文、ストリーム、スレッド</p>
</li>
<li>
<h2>独習ASP.NET 第4版</h2>
<p>手を動かしながら学ぶASP.NET入門書</p>
<p class="ui-li-aside">状態管理、部品化技術、Ajax開発</p>
</li>
|
なお、表示領域の関係で画面に入りきらなかったテキストは、そのまま末尾に「...」が付与された状態で切り捨てられます。込み入ったリストではおのずとテキストもあふれやすくなりますので、文字量には留意してください。
［Note］jQuery Mobile 1.4での変更点
jQuery Mobile 1.4では、以前のバージョンからさまざまな変更がありましたが、その1つとして生成されるコードがシンプルになったという点があります。例えば以下は、本稿におけるリスト1のコードを、jQuery Mobile 1.3／1.4で実行した場合の、それぞれの出力コードです。
|
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-li-has-count ui-first-child ui-btn-up-c">
<div class="ui-btn-inner ui-li">
<div class="ui-btn-text">
<a href="#" class="ui-link-inherit">タイムライン
<span class="ui-li-count ui-btn-up-c ui-btn-corner-all">125</span>
</a>
</div>
<span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span>
</div>
</li>
|
|
<li class="ui-li-has-count ui-first-child">
<a href="#" class="ui-btn ui-btn-icon-right ui-icon-carat-r">タイムライン
<span class="ui-li-count ui-body-inherit">125</span>
</a>
</li>
|
標準のテーマだけを利用している場合は問題ありませんが、自作のスタイルシートを利用している場合には、セレクターの変更などが必要となります。
※以下では、本稿の前後を合わせて5回分（第25回～第29回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
25. ListViewウィジェットで階層型リストを作成するには？
初期状態では最上位の項目だけを表示して、そこから下位階層の項目にドリルダウンできる、階層化リストを作成するには、NestedListプラグインを使う。その利用方法を解説。
26. ListViewウィジェットで作成したリストに区切り線を追加するには？
リスト項目をある固まりごとに区分けして視認性を高めたい場合にはデバイダー（＝区切り線）を使用する。その追加方法を説明する。
27. 【現在、表示中】≫ ListViewウィジェットで、アイコン付き、カウントバブル付きのリストビューを生成するには？
ListViewウィジェットを使って作成したリストに対して、サムネイル／アイコン画像やカウントバブル、見出し／補足情報を追加する方法を説明する。
28. Filterableウィジェットでリスト／テーブルなどに検索機能を付与するには？
リストやテーブル、ボタングループ／選択ボックスなど、任意の要素グループに対して検索機能を付与できるFilterableウィジェットの基本的な使い方を解説。
29. Filterableウィジェットによる検索ルールをカスタマイズするには？
リスト／テーブルなどに検索機能を付与できるFilterableウィジェット。その検索機能をカスタマイズする方法を解説する。
