jQuery Mobile さまざまなスタイルのリスト例

jQuery Mobile のリストビューウィジェットは、オプションを指定することによりさまざまなスタイルのリストを作成することができます。この記事ではそれらのオプションを指定したリストの作成方法を解説します。

«次の特集記事»
«前の特集記事»

【コンテンツ】

  1. インセットリストにする
  2. アイコンの種類を変更する
  3. アイコンのテーマを変更する
  4. カウントバブルをつける
  5. サムネイルをつける
  6. 先頭にアイコンをつける
  7. タイトルと補足情報をつける

【記事執筆時の環境】
jQuery Mobile 1.4.4/1.4.5

インセットリストにする

デフォルトでは画面横幅一杯に広がったリストになりますが、
ul要素/ol要素に「data-inset="true"」を指定するとインセットリストになります。
インセットリストは両脇に余白が設定されコーナーに角丸がつきます。

インセットリスト

アイコンの種類を変更する

アイテムの右側に表示されるアイコンを一括して変更するには、
ul要素/ol要素に「data-icon="アイコン名"」を指定します。

アイコン種類を一括して変更したリスト

アイテム個別でアイコンを変更するには、li要素に「data-icon="アイコン名"」を指定します。

アイコン種類をアイテム個別で変更したリスト

アイコンのテーマを変更する

デフォルトのアイコンは白色で背景に円形の影がつきます。

アイコン色を黒にするには、ui-alt-iconクラスを付加します。
円形の影をなしにするには、ui-nodisc-iconクラスを付加します。
アイコンをつけない場合は、data-icon="false" を指定します。

一括で変更したい場合は ul要素/ol要素に指定し、アイテム個別で変更したい場合は li要素に指定します。

アイコンのテーマを変更したリスト

カウントバブルをつける

メールの受信件数などリンク先にある個数を表すため、カウント数値を表示しているリストがあります。数値は角丸の長方形で囲まれることが多いことから「カウントバブル」と呼ばれます。

リストビューウィジェットでは、「<span class="ui-li-count">数値</span>」と li要素の中に記述すると、カカウントバブルを挿入することができます。

カウントバブルのテーマ変更には、data-count-theme属性を使います。

なお、カウントを自動でアップデートするためには何らかのプログラムを組む必要があります。

カウントバブルをつけたリスト

サムネイルをつける

li要素の中に最初に記述された img要素がサムネイルとなります。
サムネイルは最大80 x 80px に整形されて表示されます。

サムネイルをつけたリスト

先頭にアイコンをつける

img要素に ui-li-iconクラスを付加すると、画像は最大16 x 16pxのアイコンとなってアイテムの先頭に表示されます。

先頭にアイコンをつけたリスト

タイトルと補足情報をつける

各アイテムにタイトルをつけるには見出し要素(h1-h6)で記述します。
またニュースやブログで更新時間などの補足情報を表示したい場合は、ui-li-asideクラスを付加すれば右上に小さなフォントで表示されます。

タイトルと補足情報をつけたリスト

上記にあげたリストのデモページは以下です。

jQuery Mobile のリストビューにはさまざまな機能があることが理解できたと思います。実際にはスタイルを多少カスタマイズすることになると思いますが、ひな形としては十分使えるのではないでしょうか。

«次の特集記事»
«前の特集記事»

スポンサーリンク

jQuery Mobile 特集記事

基本的な使い方

ウィジェットの設置

フォームの設置

イベント・動作設定

カスタマイズ

使い方の応用

スポンサーリンク

ページの先頭へ