項目リスト(listview)は、ふくすうの項目を列挙するためのウィジェットで、項目には文字列や、画像、数値を出力する部分を設けたり色々な事ができます。
| 設定対象 | 名称="設定値"(太字はデフォルト) | 説明 |
|---|---|---|
| ウィジェット | 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>内の各種タグで表します。基本的な構造は以下の３点あります。
１．<li>ネタ<li>のように<li>内に文字列のみが作成され、リンクがなし
２．<li><a href="#neta">ネタ</a></li>のみたいに、<li>内にリンクあり
３．ウィジェットとなるタグにdata-inset="true"を設定して角丸で表示する
それぞれの表示は以下に掲げるようウィジェットが表示されます。。ただ、data-theme属性により色や背景が異なることがあります。
・リンクなし 文字列のみを表示
・リンクあり 文字列と右端に"arrow-r"のアイコン
・角丸で表示(data-inset="true") 上端の上側と下端の下側が角丸
サンプルコードの実行結果はこちら
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQueryMobile listview</title> <link rel="stylesheet" href="../js/jquery.mobile-1.4.5.css"> <script src="../js/jquery-1.11.3.js"></script> <script src="../js/jquery.mobile-1.4.5.js"></script> </head> <body> <section id="page1" data-role="page"> <header data-role="header"> <h1>ヘッダ</h1> </header> <article data-role="content"> <!-- リンクなし --> <p>リンクなし</p> <ul data-role="listview" data-theme="b"> <li>東京</li> <li>千葉</li> <li>静岡</li> </ul> <!-- リンクあり --> <p>リンクあり</p> <ul data-role="listview" data-theme="a"> <li><a href="#tokyo">東京</a></li> <li><a href="#chiba">千葉</a></li> <li><a href="#shizuoka">静岡</a></li> </ul> <!-- 角丸で表示 --> <p>角丸で表示</p> <ul data-role="listview" data-inset="true" data-theme="a"> <li><a href="#tokyo">東京</a></li> <li><a href="#chiba">千葉</a></li> <li><a href="#shizuoka">静岡</a></li> </ul> </article> <footer data-role="footer"> <h1>フッタ</h1> </footer> </section> </body> </html> |
仕切りをつける
項目リストにタイトルをつけたり、多くの<li>の間に仕切りを設置したいときは、<li>に「data-role="list-divider"」を追加します。テーマはウィジェットとなるタグに、data-divider-theme属性を利用することで設定できます。サンプルコードのように途中で仕切りがあることで、複数のリンクをグループ化していることが表現できます。
ちなみにdata-autodividers="true"と設定すると、liやaタグ内に記述された文字列をもとにして、自動的に仕切りを付すことができます。デフォルトでは、仕切りに文字列の先頭の文字が表示されるので、文字列がアルファベット、ひらがな、カタナカのいずれなら利用できます、デフォルト以外の方法で仕切りを付けたいときは、JavaScriptを用いて設定する必要があります。これはのちにかきます。
サンプルコードの実行結果はこちら
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQueryMobile listviewに仕切りをつける</title> <link rel="stylesheet" href="../js/jquery.mobile-1.4.5.css"> <script src="../js/jquery-1.11.3.js"></script> <script src="../js/jquery.mobile-1.4.5.js"></script> </head> <body> <section id="page1" data-role="page"> <header data-role="header"> <h1>ヘッダ</h1> </header> <article data-role="content"> <ul data-role="listview" data-divider-theme="a" data-inset="true"> <li data-role="list-divider">メニュー１</li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li data-role="list-divider">メニュー２</li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li data-role="list-divider">メニュー３</li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li data-role="list-divider"></li> </ul> </article> <footer data-role="footer"> <h1>フッタ</h1> </footer> </section> </body> </html> |
項目リストのネスト
jQueryMobile1.3.0からこの機能は非推奨となり、1.4.0から動きません！
各項目の中に項目リストを設ける構造をネスト(nest)といい、HTMLならliタグの内側にul,olタグは入る構造のことです、
サンプルコードの実行結果はこちら
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQueryMobile 項目の中に項目を入れる</title> <link rel="stylesheet" href="../jsold/jquery.mobile-1.2.0.css"> <script src="../jsold/jquery-1.8.2.js"></script> <script src="../jsold/jquery.mobile-1.2.0.js"></script> </head> <body> <section id="page" data-role="page"> <header data-role="header"> <h1>ヘッダ</h1> </header> <article data-role="content"> <ul data-role="listview" data-header-theme="b" data-inset="true"> <li data-role="list-divider">関東の都市</li> <li>東京 <ul data-inset="true"> <li data-role="list-divider">建物</li> <li>スカイツリー</li> </ul> </li> <li>横浜 <ul data-inset="true"> <li data-role="list-divider">建物</li> <li>ランドマークタワー</li> <li>赤レンガ倉庫</li> </ul> </li> </ul> </article> <footer data-role="footer"> <h1>フッタ</h1> </footer> </section> </body> </html> |
項目を検索する
項目のリストにdata-filter="true"を追加すると、リストの上に項目を検索するフォームが表示されて、入力フィールドにキーワードを入力すると、それを含む項目だけが表示され、含まない項目は非表示となります。
liタグ内の文字列以外を検索したい
liタグ内の文字列以外を検索したいときは、それぞれのliタグにdata-filtertext属性を付加します。この属性がliタグに追加されたら、検索の対象がこの値になります。なので、属性の値に漢字とひらがなを設定すれば、検索対象を漢字とひらがなの両方に広げることができ利便性が向上します。属性の値がアルファベットのときは、大文字でも小文字でも検索対象になります。
仕切りがある時の表示
項目リストに<li data-role="list-divider">で表される仕切りがあるときは、検索されたキーワードのすぐ上に位置する仕切りも表示されます。
項目検索とli文字列以外を検索する
サンプルコードの実行結果はこちら
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQueryMobile listviewに仕切りをつける</title> <link rel="stylesheet" href="../js/jquery.mobile-1.4.5.css"> <script src="../js/jquery-1.11.3.js"></script> <script src="../js/jquery.mobile-1.4.5.js"></script> </head> <body> <section id="page1" data-role="page"> <header data-role="header"> <h1>ヘッダ</h1> </header> <article data-role="content"> <ul data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="都市名検索"> <li data-role="list-divider">と</li> <li data-filtertext="東京 とうきょう">東京</li> <li data-role="list-divider">よ</li> <li data-filtertext="横須賀 よこすか">横須賀</li> <li data-filtertext="横浜 よこはま">横浜</li> <li data-role="list-divider">ち</li> <li data-filtertext="千葉 ちば">千葉</li> <li data-role="list-divider">さ</li> <li data-filtertext="埼玉 さいたま">さいたま</li> <li data-role="list-divider">う</li> <li data-filtertext="宇都宮 うつのみや">宇都宮</li> <li data-role="list-divider">は</li> <li data-filtertext="浜松 はままつ">浜松</li> <li data-role="list-divider">き</li> <li data-filtertext="京都 きょうと">京都</li> <li data-role="list-divider">せ</li> <li data-filtertext="千駄ヶ谷 せんだがや">千駄ヶ谷</li> </ul> </article> <footer data-role="footer"> <h1>フッタ</h1> </footer> </section> </body> </html> |