jQuery Mobile逆引きリファレンス
ListViewウィジェットで作成したリストに区切り線を追加するには？
リスト項目をある固まりごとに区分けして視認性を高めたい場合にはデバイダー（＝区切り線）を使用する。その追加方法を説明する。
jQuery Mobileとは？
jQuery Mobileは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前のとおり、スマホ／タブレットに代表されるモバイル対応アプリを開発するための機能を提供します。jQuery Mobileの導入方法や使い方、jQuery Mobileが提供する主要機能については、「jQuery Mobile逆引きリファレンス： jQuery Mobileを利用するには？」を参照してください。
リスト項目が増えてきた場合、これをフラットに列挙するのは見栄えという意味で、あまり好ましくありません。意味ある固まりの単位に区切り線（＝デバイダー）を設けることで、リスト全体が引き締まり、リストの視認性が向上します。別稿「ListViewウィジェットで階層型リストを作成するには？」の手法と合わせて、利用する価値はあるでしょう。
本稿では、デバイダーを手動／自動で追加する方法、また、自動追加のルールをカスタマイズする方法について解説していきます。
デバイダーを手動で追加する
もっとも手軽な方法からです。<li>要素に「data-role="list-divider"」属性を付与することで、デバイダーとしてレイアウトできます。デバイダーには、配下項目のカテゴリを表すような名前を指定します。
|
<!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 data-role="list-divider">翔泳社</li>
<li>10日でおぼえるjQuery入門教室 第2版</li>
<li>独習ASP.NET 第4版</li>
<li data-role="list-divider">技術評論社</li>
<li>Rails 4アプリケーションプログラミング</li>
<li>Windows 8開発ポケットリファレンス</li>
<li>iPhone／iPad開発ポケットリファレンス</li>
<li>AndroidエンジニアのためのモダンJava</li>
<li data-role="list-divider">日経BP社</li>
<li>.NET開発テクノロジ入門 2014年版</li>
<li>書き込み式SQLのドリル</li>
</ul>
</div>
<div data-role="footer">
<h3>Copyright 1998-2014, YAMADA.Yoshihiro</h3>
</div>
</div>
</body>
</html>
|
デバイダーを自動で挿入する
<ul>／<ol>要素に対して「data-autodividers="true"」属性を加えることで、リスト項目の頭文字を基に、自動で区切り線を加えることができます。大文字小文字は区別されません。
|
<ul data-role="listview" data-autodividers="true">
<li>10日でおぼえるjQuery入門教室 第2版</li>
<li>10日でおぼえるPHP入門教室 第4版</li>
<li>AndroidエンジニアのためのモダンJava</li>
<li>ASP.NET MVC 実践プログラミング</li>
<li>ASP.NET 逆引き大全600の極意</li>
<li>C#ポケットリファレンス</li>
<li>HTML5 開発ポケットリファレンス</li>
<li>HTML5 基礎</li>
</ul>
|
ただし、リストそのものが自動でソートされるわけではありません。ソートされていないリストに対して自動デバイダー機能を有効にした場合、同じ項目のデバイダーが複数現れることもありますので、注意してください。
デバイダーの挿入ルールをカスタマイズする
もっとも、自動デバイダー機能をそのまま利用する機会は（特に日本語環境では）多くはないかもしれません。同じく「あ」でも、「あ、ア、愛、相」のようにひらがな、カタカナ、漢字が混在した場合、これを同じものとして識別できないからです。
そこで、挿入ルールを別に定義した上で、利用します。デバイダーの挿入ルールは、$.mobile.listview.prototype.options.autodividersSelectorプロパティから設定できます。
例えば以下は、data-ruby属性で指定されたフリガナの頭文字に基づいて、デバイダーを導入する例です。
|
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(document).on('mobileinit', function() {
$.mobile.listview.prototype.options.autodividersSelector = function(elm) {
return elm.data('ruby').charAt(0);
};
});
</script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js">
</script>
……中略……
<ul data-role="listview" data-autodividers="true">
<li data-ruby="あくじせんり">悪事千里</li>
<li data-ruby="あびきょうかん">阿鼻叫喚</li>
<li data-ruby="あんちゅうもさく">暗中模索</li>
<li data-ruby="いしんでんしん">以心伝心</li>
<li data-ruby="いっこくせんきん">一刻千金</li>
<li data-ruby="いっせきにちょう">一石二鳥</li>
<li data-ruby="うよきょくせつ">紆余曲折</li>
<li data-ruby="がでんいんすい">我田引水</li>
<li data-ruby="がりょうてんせい">画竜点睛</li>
</ul>
|
autodevidersSelectorプロパティで指定されたコールバック関数は、リスト項目が読み込まれるたびに呼び出されます。コールバック関数のルールは、以下の通りです。
- 引数としてソート対象要素（ここでは<li>要素）を受け取ること
- 戻り値として、区切り線の基準となる文字を返すこと
この例であれば、<li>要素のdata-ruby属性（フリガナ）の頭文字を返しますので、この値が変わったところで区切り線を挿入します。
※以下では、本稿の前後を合わせて5回分（第24回～第28回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
24. ListViewウィジェットで、ネイティブアプリ・ライクなリストビューを作成するには？
＜ul＞／＜li＞要素や＜ol＞／＜li＞要素をネイティブアプリで見かけるようなリッチなリストに整形できるListViewウィジェットの基本的な使い方を解説。
25. ListViewウィジェットで階層型リストを作成するには？
初期状態では最上位の項目だけを表示して、そこから下位階層の項目にドリルダウンできる、階層化リストを作成するには、NestedListプラグインを使う。その利用方法を解説。
26. 【現在、表示中】≫ ListViewウィジェットで作成したリストに区切り線を追加するには？
リスト項目をある固まりごとに区分けして視認性を高めたい場合にはデバイダー（＝区切り線）を使用する。その追加方法を説明する。
27. ListViewウィジェットで、アイコン付き、カウントバブル付きのリストビューを生成するには？
ListViewウィジェットを使って作成したリストに対して、サムネイル／アイコン画像やカウントバブル、見出し／補足情報を追加する方法を説明する。
28. Filterableウィジェットでリスト／テーブルなどに検索機能を付与するには？
リストやテーブル、ボタングループ／選択ボックスなど、任意の要素グループに対して検索機能を付与できるFilterableウィジェットの基本的な使い方を解説。
