jQuery Mobile逆引きリファレンス
ListViewウィジェットで、ネイティブアプリ・ライクなリストビューを作成するには？
＜ul＞／＜li＞要素や＜ol＞／＜li＞要素をネイティブアプリで見かけるようなリッチなリストに整形できるListViewウィジェットの基本的な使い方を解説。
jQuery Mobileとは？
jQuery Mobileは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前のとおり、スマホ／タブレットに代表されるモバイル対応アプリを開発するための機能を提供します。jQuery Mobileの導入方法や使い方、jQuery Mobileが提供する主要機能については、「jQuery Mobile逆引きリファレンス： jQuery Mobileを利用するには？」を参照してください。
ListViewウィジェットを利用することで、<ul>／<li>、<ol>／<li>要素をネイティブアプリで見かけるようなリッチなリストに整形できます。
本稿では、最初に基本的なリストの作成方法を説明した後、タップ可能なリンクリスト、リンク先を複数設置するサブリンク、リストをインセット表示する例などを解説します。
ListViewウィジェットの基本
まずは、ごく普通の<ul>／<li>リストを、ListViewウィジェットで整形した例です。
|
<!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>Rails 4アプリケーションプログラミング</li>
<li>Windows 8開発ポケットリファレンス</li>
<li>10日でおぼえるjQuery入門教室 第2版</li>
<li>iPhone／iPad開発ポケットリファレンス</li>
<li>AndroidエンジニアのためのモダンJava</li>
<li>独習ASP.NET 第4版</li>
</ul>
</div>
<div data-role="footer">
<h3>Copyright 1998-2014, YAMADA.Yoshihiro</h3>
</div>
</div>
</body>
</html>
|
ListViewウィジェットを適用するには、<ul>要素に対して「data-role="listview"」属性を付与するだけです。ちなみに以下は、同じく<ol>要素に「data-role="listview"」属性を付与した場合と、「data-role="listview"」属性を指定しなかった場合の結果です。
後者では、ブラウザー標準のリストを表示しますが、行間が詰まって見にくく、リンクなどを付与した場合にはタップもしにくくなるので、あまり利用することはないでしょう。
リンク付きのリストを生成する
リスト項目（＝<li>要素）にはリンクを付与することもできます。その場合、ListViewウィジェットはタップできることを視覚的にも明らかにするために、項目右端に
アイコンを付与します。
|
<ul data-role="listview">
<li><a href="#">Rails 4アプリケーションプログラミング</a></li>
<li><a href="#">Windows 8開発ポケットリファレンス</a></li>
<li><a href="#">10日でおぼえるjQuery入門教室 第2版</a></li>
<li><a href="#">iPhone／iPad開発ポケットリファレンス</a></li>
<li><a href="#">AndroidエンジニアのためのモダンJava</a></li>
<li><a href="#">独習ASP.NET 第4版</a></li>
</ul>
|
<li>要素にdata-icon属性を付与することで、リンクアイコンをカスタマイズすることもできます。具体的に指定できるアイコンの種類については、別稿「jQuery Mobileページでアイコン付きのボタンを配置するには？」を参照してください。カスタムのアイコンを適用することもできますし、「data-icon="false"」属性でアイコンそのものを非表示にすることもできます（ただし、タップ可能であることが不明瞭になりますので、通常はそうすべきではありません）。
|
<ul data-role="listview">
<li data-icon="star"><a href="#">Rails 4アプリケーションプログラミング</a></li>
<li data-icon="gear"><a href="#">Windows 8開発ポケットリファレンス</a></li>
<li data-icon="check"><a href="#">10日でおぼえるjQuery入門教室 第2版</a></li>
<li data-icon="home"><a href="#">iPhone／iPad開発ポケットリファレンス</a></li>
<li data-icon="edit"><a href="#">AndroidエンジニアのためのモダンJava</a></li>
<li data-icon="false"><a href="#">独習ASP.NET 第4版</a></li>
</ul>
|
全てのリンクアイコンを変更するならば、<ul>要素、または<ol>要素に対して、data-icon属性を指定します。
|
<ul data-role="listview" data-icon="star">
<li><a href="#">Rails 4アプリケーションプログラミング</a></li>
<li><a href="#">Windows 8開発ポケットリファレンス</a></li>
<li><a href="#">10日でおぼえるjQuery入門教室 第2版</a></li>
<li><a href="#">iPhone／iPad開発ポケットリファレンス</a></li>
<li><a href="#">AndroidエンジニアのためのモダンJava</a></li>
<li><a href="#">独習ASP.NET 第4版</a></li>
</ul>
|
サブリンクを設置する
リスト項目に2個目のリンクを設置すると、メインのリンクとは別にサブリンクが設置されます。具体的にはリスト項目（＝メインリンク）と細線で分割された上で、リンクが設置されます*1。
- *1 3個以上のリンクを併記した場合、3個目は標準のリンクとして表示されます。
|
<ul data-role="listview">
<li><a href="#">Rails 4アプリケーションプログラミング</a>
<a href="#">サンプルダウンロード</a></li>
<li><a href="#">Windows 8開発ポケットリファレンス</a>
<a href="#">サンプルダウンロード</a></li>
<li><a href="#">10日でおぼえるjQuery入門教室 第2版</a>
<a href="#">サンプルダウンロード</a></li>
<li><a href="#">iPhone／iPad開発ポケットリファレンス</a>
<a href="#">サンプルダウンロード</a></li>
<li><a href="#">AndroidエンジニアのためのモダンJava</a>
<a href="#">サンプルダウンロード</a></li>
<li><a href="#">独習ASP.NET 第4版</a>
<a href="#">サンプルダウンロード</a></li>
</ul>
|
サブリンクのアイコンは、それぞれ<ul>／<ol>要素に対してdata-split-icon属性で指定できます。特定の項目だけアイコンを指定したい場合には、先ほどと同じく、<li>要素に対してdata-icon属性を付与してください。
|
<ul data-role="listview" data-split-icon="star">
<li><a href="#">Rails 4アプリケーションプログラミング</a>
<a href="#">サンプルダウンロード</a></li>
<li data-icon="check"><a href="#">Windows 8開発ポケットリファレンス</a>
<a href="#">サンプルダウンロード</a></li>
<li><a href="#">10日でおぼえるjQuery入門教室 第2版</a>
<a href="#">サンプルダウンロード</a></li>
<li><a href="#">iPhone／iPad開発ポケットリファレンス</a>
<a href="#">サンプルダウンロード</a></li>
<li><a href="#">AndroidエンジニアのためのモダンJava</a>
<a href="#">サンプルダウンロード</a></li>
<li><a href="#">独習ASP.NET 第4版</a>
<a href="#">サンプルダウンロード</a></li>
</ul>
|
インセットモードで表示する
ListViewウィジェットは、デフォルトで表示領域いっぱいにリストを表示します。これをリストの前後左右に空白を挟むようにしたい場合には、<ul>要素に対して「data-inset="true"」属性を追加して、インセットモードを有効にしてください。
|
<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>
|
※以下では、本稿の前後を合わせて5回分（第22回～第26回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
22. jQuery Mobileで入力フォームを設置するには？
jQuery Mobileでフォームを設置する際の、よりjQuery Mobileらしいフォームを実装するために知っておきたいポイントと特性方法を説明する。
23. Textinputウィジェットでテキスト入力ボックスを設置するには？
jQuery Mobileでテキスト入力ボックスを設置するのは通常のフォームの場合と変わらない。それだけで角丸やシャドウ効果の効いた、ネイティブアプリ・ライクなテキストボックスへと整形してくれる。その内容を解説する。
24. 【現在、表示中】≫ ListViewウィジェットで、ネイティブアプリ・ライクなリストビューを作成するには？
＜ul＞／＜li＞要素や＜ol＞／＜li＞要素をネイティブアプリで見かけるようなリッチなリストに整形できるListViewウィジェットの基本的な使い方を解説。
25. ListViewウィジェットで階層型リストを作成するには？
初期状態では最上位の項目だけを表示して、そこから下位階層の項目にドリルダウンできる、階層化リストを作成するには、NestedListプラグインを使う。その利用方法を解説。
26. ListViewウィジェットで作成したリストに区切り線を追加するには？
リスト項目をある固まりごとに区分けして視認性を高めたい場合にはデバイダー（＝区切り線）を使用する。その追加方法を説明する。
