リストビューについて

リンクのリスト

リンクのリストは、シンプルに順序無しリスト(ul)にリンクアイテムを含め、属性で data-role=“listview” を指定することで記述できます。jQuery Mobileはリストを画面の横幅いっぱいにし、右側に矢印を付けるなど必要なスタイル設定を行います。リストアイテムがタップされると、フレームワークは該当するアイテムの最初のリンク対象をAjaxで取得し、新しいページをDOM上にロードし、ページの切り替えを行います。リストビューに指定可能な属性についてはdata属性リファレンスを参照してください。

        
Acura
        
Audi
        
BMW

リンクリストの例

インセットモードでない通常のリストは、画面いっぱいに表示するため15ピクセルのpaddingに対して-15ピクセルの逆余白をとっています。このため、他のウィジェットを前後に配置しようとすると重なってしまうようなことがあるかもしれません。その場合、余白を余計に取るようCSSなどで指定してください。

階層化リスト

リストアイテム内に更に ul や ol を作ることで、リストを階層構造にすることができます。子リストを持っているリストアイテムがクリックされると、フレームワークは新しいページを自動生成します。このページは親のテキストがタイトルになり、子リストがメインコンテンツになったものです。そして、第二階層にいることが分かるように、色見本は “b” が充てられます。ネストは更に複数のレベルで行うことが出来ます。

各子要素となるリストビューのテーマを指定するには data-theme 属性を使います。

階層化リストの例

番号付きリスト

リストは番号付きリスト(ol)でも作ることが出来ます。これは例えば検索結果や動画のキューを表示するのに便利でしょう。順序について拡張書式が用いられた場合、jQuery MobileはまずCSSによってそれに対応させようとします。それがブラウザにサポートされていなければ、JavaScriptで適切な番号を付加しようとします。

番号付きリストの例

表示専用リスト

リストはもちろん、インタラクティブでない表示だけのものを作ることも出来ます。これはリンクを持たない ul や ol で記述します。こうしたリストは色見本 “c” でスタイルされ、サイズを節約するためにリンクリストに比べて少し小さなフォントが用いられます。

表示専用リストの例

分割ボタン

リストアイテムによっては、2つ以上のアクションが想定される場合もあります。分割ボタンを使えば、ひとつのアイテム上にリンクアイテムと右端のアイコン、2種類の別々のリンクを作ることが出来ます。分割ボタンを作るには、単純に li 要素内に2つのリンクを作るだけです。フレームワークが自動的に2つのリンクに区切り線を入れ、2つ目のリンクはアイコンだけのボタンとして整形されます。アクセシビリティのため、2番目のリンク文字列は title 属性に設定されます。

この2つ目のアイコンは data-split-icon 属性に ボタンのアイコン で紹介したようなアイコン名を指定することで設定できます。またこのボタンの色見本だけを data-split-theme 属性で指定することも可能です。

分割ボタンの例

リスト分類

リストアイテムは、分類してグループ化することが出来ます。これはリストアイテムに data-role=“list-divider” を追加することで設定されます。この分類アイテムはデフォルトで色見本 “b” でスタイルされます。リスト要素(ulやol)に data-dividertheme で任意の色見本を指定すれば、これを変更することが出来ます。

リスト分類の例

検索フィルタ

jQuery Mobileはリストからクライアントサイドでアイテムを検索するための非常に簡単な仕組みを提供しています。リストをフィルタ可能にするには data-filter=“true” を指定して下さい。するとフレームワークは自動的に検索ボックスをリストの上部に追加し、そこへ文字列が入力されるとリストにフィルタがかかるようにします。この検索ボックスは初期状態で “Filter items…” と表示されるようになっています。これを指定するには mobileinit イベントで $.mobile.listview.prototype.options.filterPlaceholder に文字列を設定するか、リストビューに data-filter-placeholder 属性を指定するか、いずれかで可能になります。

検索フィルタの例

フィルタ方法を変更したいような場合(たとえば曖昧検索や前方一致など)は、 mobileinit イベントで $.mobile.listview.prototype.options.filterCallback を設定するか、あるいはウィジェットが作られた後で $(”#mylist”).listview(‘option’, ‘filterCallback”, フィルタ関数) を設定します。コールバック関数は2つの引数を受け取ります。最初のものは評価中のリストアイテム、2番目のものは検索文字列です。戻り値にtrueと評価される値を返せば、そのアイテムは非表示になります。デフォルトのコールバック関数は、次のようなものです。

function( text, searchValue ){
  return text.toLowerCase().indexOf( searchValue ) === -1;
};

書式とアイテム数

フレームワークは一般的なリストで使われがちな、アイテムごとにヘッダ、説明、補足、子要素のアイテム数表示などのフォーマットを用意しています。

• リストの右側に子要素の数などを表示するには、数値を書いた要素に ui-li-count クラスを指定します。
• テキストの書式は、ヘッダ要素(h3など)を使います。また、段落(p)を重ねると文字は弱くなっていきます。
• アイテムの右端に補足的な情報を追加するには、その要素に ui-li-aside クラスを追加します。

子要素数表示の例様々な書式を組み合わせた例

サムネイルとアイコン

サムネイルをリストアイテムの左端に表示させるには、シンプルにアイテムの最初の要素として画像を追加してやります。フレームワークは画像を自動的に80pxの正方形に整形します。16ピクセル四方のアイコンを追加するのであれば、クラスに iu-li-icon を指定してやります。

サムネイル画像表示の例アイコン表示の例

インセットリスト

リスト単体のページではなく、様々なコンテンツのあるページにリストを挿しこみたい場合には、このオプションを使います。これによって周囲との間に少し余白が出来、テーマの設定によっては角を丸くしたりしたリストのセットが出来ます。リスト(ulやol)に data-inset=“true” を設定することで、挿しこみリストが作成されます。

インセットリストの例

リストビュープラグインの呼び出し

他のjQueryプラグイン同様、任意のセレクタに直接 listview プラグインを呼び出すことも可能です。

$('#mylist').listview();

リストの更新

スクリプトからリストにアイテムを追加した後は refresh() メソッドを呼んで明示的にスタイルを更新してやる必要があります。

$('ul').listview('refresh');

注意事項として、この refresh メソッドは 新たに追加されたノード だけを処理することを覚えておいてください。これは、パフォーマンス的な理由です。リフレッシュ処理において、既存のリストアイテムは全て無視されます。これにより、既に拡張されているリストアイテムの属性などを変更してリフレッシュをかけても、それは反映されないことになります。もしリストアイテムが更新されなければならない場合、一度完全にマークアップを置き換えるようにしてください。