jQueryMobile

項目リストを設定する

項目リスト(listview)は、ふくすうの項目を列挙するためのウィジェットで、項目には文字列や、画像、数値を出力する部分を設けたり色々な事ができます。

HTMLタグに追加できる属性一覧
設定対象 名称="設定値"(太字はデフォルト) 説明
ウィジェット data-role="listview" 項目リストの作成
data-inset="true|false" 各項目を角丸で表示
ウィジェット・項目 data-theme="テーマの名称" ウィジェットや項目のテーマ
ウィジェット data-count-theme="テーマの名称" 数値表示部分のテーマ
data-header-theme="テーマの名称" ネストされたウィジェットの画面遷移後のヘッダのテーマ
data-split-icon="アイコンの名称" リストの右側にアイコンを表示
data-split-theme="テーマの名称" 分割部分のテーマ
仕切り data-role="list-divider" 仕切り。見出しとか
data-dividertheme="テーマの名称" 仕切りのテーマ
data-autodivider="true|false" 仕切りを自動的に作成するか否か
検索フィールド data-filter="true|false" 検索フィールドを表示するか否か
data-filter-placeholder="文字列" 検索フィールドに表示する文字列
data-filter-theme="テーマの名称" 検索フィールドのテーマ
項目 data-filter-text="文字列" 検索用文字列
data-icon="アイコンの名称" アイコンの表示

ウィジェットの構造

ウィジェットの基本的な作りは、<ul>や<ol>に「data-role="listview"」を付加します。各項目ごとの詳細なレイアウトは<li>内の各種タグで表します。基本的な構造は以下の3点あります。

1.<li>ネタ<li>のように<li>内に文字列のみが作成され、リンクがなし
2.<li><a href="#neta">ネタ</a></li>のみたいに、<li>内にリンクあり
3.ウィジェットとなるタグにdata-inset="true"を設定して角丸で表示する

それぞれの表示は以下に掲げるようウィジェットが表示されます。。ただ、data-theme属性により色や背景が異なることがあります。
・リンクなし 文字列のみを表示
・リンクあり 文字列と右端に"arrow-r"のアイコン
・角丸で表示(data-inset="true") 上端の上側と下端の下側が角丸

サンプルコードの実行結果はこちら

仕切りをつける

項目リストにタイトルをつけたり、多くの<li>の間に仕切りを設置したいときは、<li>に「data-role="list-divider"」を追加します。テーマはウィジェットとなるタグに、data-divider-theme属性を利用することで設定できます。サンプルコードのように途中で仕切りがあることで、複数のリンクをグループ化していることが表現できます。

ちなみにdata-autodividers="true"と設定すると、liやaタグ内に記述された文字列をもとにして、自動的に仕切りを付すことができます。デフォルトでは、仕切りに文字列の先頭の文字が表示されるので、文字列がアルファベット、ひらがな、カタナカのいずれなら利用できます、デフォルト以外の方法で仕切りを付けたいときは、JavaScriptを用いて設定する必要があります。これはのちにかきます。

サンプルコードの実行結果はこちら

項目リストのネスト

jQueryMobile1.3.0からこの機能は非推奨となり、1.4.0から動きません!

各項目の中に項目リストを設ける構造をネスト(nest)といい、HTMLならliタグの内側にul,olタグは入る構造のことです、

サンプルコードの実行結果はこちら

項目を検索する

項目のリストにdata-filter="true"を追加すると、リストの上に項目を検索するフォームが表示されて、入力フィールドにキーワードを入力すると、それを含む項目だけが表示され、含まない項目は非表示となります。

liタグ内の文字列以外を検索したい

liタグ内の文字列以外を検索したいときは、それぞれのliタグにdata-filtertext属性を付加します。この属性がliタグに追加されたら、検索の対象がこの値になります。なので、属性の値に漢字とひらがなを設定すれば、検索対象を漢字とひらがなの両方に広げることができ利便性が向上します。属性の値がアルファベットのときは、大文字でも小文字でも検索対象になります。

仕切りがある時の表示

項目リストに<li data-role="list-divider">で表される仕切りがあるときは、検索されたキーワードのすぐ上に位置する仕切りも表示されます。

項目検索とli文字列以外を検索する
サンプルコードの実行結果はこちら

-jQueryMobile
-, , ,