*

項目リストを設定する

公開日: : 最終更新日:2016/05/06 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文字列以外を検索する
サンプルコードの実行結果はこちら

スポンサードリンク

関連記事

no image

ヘッダ内、フッタ内にボタンを表示する

ヘッダ内にボタンを表示してみる ヘッダ内にリンクであるaタグを作成すると、それがボタンとして表示さ

記事を読む

no image

ボタン内にアイコンを表示したり、デザインを変更する

ボタン内にアイコンを表示するには、リンクと同じように、data-icon属性、data-iconpo

記事を読む

no image

移動しないヘッダ、フッタにIDを設定する

MozillaやWebkitベースのブラウザでは、リンクにdata-transition="slid

記事を読む

no image

コンテンツを表示する

コンテンツはそのページのメインとなる情報を表示する部分です。コンテンツはヘッダとフッタの間に配置しま

記事を読む

no image

jQueryMobileカテゴリーで出てくる用語集

jQueryMobileの記事で登場する用語を下記の表にまとめました。学習するときの助けになるかも。

記事を読む

no image

バルーンを表示、項目を分割、折り畳みやポップ内にlistviewを作成する。

バルーンとは、円形の囲みのことで、jQueryMobileでは、その内部に文字列を表示するために、実

記事を読む

no image

リンク先を設定したり、アイコンを利用する。

リンク(link)とは、次の画面に表示するコンテンツを表すもので、HTMLではaタグで表します。jQ

記事を読む

no image

ページ(page)とは

jQueryMobileでは、スマートフォンの画面に表示するページ(page)というウィジェットで構

記事を読む

no image

同じHTML文書に複数ページを作成してみる

jQueryMobileでは、同じHTML文書内に複数ページを作成することができます。手順は以下の通

記事を読む

no image

トグルスイッチを設定する

トグルスイッチ(toggle switch)とは、〇型のつまみを左右にドラッグして2つの値のうちどち

記事を読む

スポンサードリンク

Message

メールアドレスが公開されることはありません。

CAPTCHA


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">



スポンサードリンク

jQueryMobile
トグルスイッチを設定する

トグルスイッチ(toggle switch)とは、〇型のつまみを左右に

jQueryMobile
項目選択の複数ウィジェットをグループ化する

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグルー

jQueryMobile
<select>により項目選択

ボタンによる選択では、1つの項目だけ選択するか、複数を同時に選択するか

jQueryMobile
値を選択するボタンを表示する

値を選択するボタンは以下の2つがあります。 ・複数の値から1つだ

jQueryMobile
ボタンを設定する

前回の記事では<a data-role="button">

→もっと見る

  • スポンサーリンク

PAGE TOP ↑