jQuery Mobile逆引きリファレンス
ListViewウィジェットで階層型リストを作成するには？
初期状態では最上位の項目だけを表示して、そこから下位階層の項目にドリルダウンできる、階層化リストを作成するには、NestedListプラグインを使う。その利用方法を解説。
jQuery Mobileとは？
jQuery Mobileは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前のとおり、スマホ／タブレットに代表されるモバイル対応アプリを開発するための機能を提供します。jQuery Mobileの導入方法や使い方、jQuery Mobileが提供する主要機能については、「jQuery Mobile逆引きリファレンス： jQuery Mobileを利用するには？」を参照してください。
リスト項目が増えてきた場合、リストを階層化することを検討しましょう。初期状態では最上位の項目だけを表示するようにすることで、スクロールすることなく、リスト全体を見渡すことができます。
もともと、jQuery Mobileは、そのような階層化リストに標準で対応していましたが、バージョン1.3で非推奨となり、1.4では削除となってしまいました。バグも見付かるなどした結果の措置であったようですが、使い出もあるため、1.4以降でも利用したいという人も少なくないようです。
そこで、jQuery MobileのプラグインとしてNestedListプラグインが提供されています。これによって、1.3以前の階層化リストにもよく似た機能を1.4でも利用できるようになります。本稿では、その具体的な利用方法について解説します。
1NestedListプラグインを導入する
NestedListプラグインは、以下のリンク先から入手できます。ダウンロードした「jquery.mobile.nestedlists.js」ファイルを、任意のフォルダーに配置してください（以下では、.htmlファイルと同じフォルダーに配置したものとして説明を進めます）。
2階層化リストを準備する
階層化リストを作成するには、以下のルールに従ってマークアップするだけです。
- リスト項目（＝<li>要素）に対して、入れ子で<ul>／<ol>要素を設置する
- 最上位の<ul>／<ol>要素に対して、data-child-pages属性を付与する
以下は、その具体的なコードと実行結果です。
|
<!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>
<script src="jquery.mobile.nestedlists.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" data-child-pages="true">
<li>
リファレンス
<ul >
<li>Windows 8開発ポケットリファレンス</li>
<li>iPhone／iPad開発ポケットリファレンス</li>
<li>ASP.NET逆引き大全600の極意</li>
<li>MySQL 5逆引き大全460の極意</li>
<li>C#ポケットリファレンス</li>
</ul>
</li>
<li >
入門書
<ul>
<li>10日でおぼえるjQuery入門教室</li>
<li>独習ASP.NET 第4版 </li>
<li>10日でおぼえるPHP入門教室 第4版</li>
</ul>
</li>
<li>
ドリル
<ul >
<li>書き込み式SQLのドリル</li>
<li>書き込み式SQLのドリル 発展</li>
</ul>
</li>
</ul>
</div>
<div data-role="footer">
<h3>Copyright 1998-2014, YAMADA.Yoshihiro</h3>
</div>
</div>
</body>
</html>
|
［リファレンス］をクリック
階層化リストでは、初期状態で、最上位のリスト項目だけが表示されます。通常のリンクリストと同じく、
アイコン付きのリストが生成されますので、これをタップすると、下位リストが表示されます。階層は、必要な数だけネストさせることが可能です。
※以下では、本稿の前後を合わせて5回分（第23回～第27回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
23. Textinputウィジェットでテキスト入力ボックスを設置するには？
jQuery Mobileでテキスト入力ボックスを設置するのは通常のフォームの場合と変わらない。それだけで角丸やシャドウ効果の効いた、ネイティブアプリ・ライクなテキストボックスへと整形してくれる。その内容を解説する。
24. ListViewウィジェットで、ネイティブアプリ・ライクなリストビューを作成するには？
＜ul＞／＜li＞要素や＜ol＞／＜li＞要素をネイティブアプリで見かけるようなリッチなリストに整形できるListViewウィジェットの基本的な使い方を解説。
25. 【現在、表示中】≫ ListViewウィジェットで階層型リストを作成するには？
初期状態では最上位の項目だけを表示して、そこから下位階層の項目にドリルダウンできる、階層化リストを作成するには、NestedListプラグインを使う。その利用方法を解説。
26. ListViewウィジェットで作成したリストに区切り線を追加するには？
リスト項目をある固まりごとに区分けして視認性を高めたい場合にはデバイダー（＝区切り線）を使用する。その追加方法を説明する。
27. ListViewウィジェットで、アイコン付き、カウントバブル付きのリストビューを生成するには？
ListViewウィジェットを使って作成したリストに対して、サムネイル／アイコン画像やカウントバブル、見出し／補足情報を追加する方法を説明する。
