Facebookの投稿
ウェブ制作技術 SNS・ブログ
おすすめウェブサイト
ウェブ制作のご注文は全国対応

北海道 青森 岩手 秋田 宮城 山形 福島 東京 神奈川 埼玉県 千葉 茨城 群馬 栃木 愛知 静岡 三重 岐阜 新潟 長野 山梨 石川 富山 福井 大阪 京都 奈良 兵庫 滋賀 和歌山 岡山 広島 鳥取 山口 島根 愛媛 徳島 高知 香川 福岡 佐賀 長崎 大分 熊本 宮崎 鹿児島 沖縄

jQuery Mobileを利用してリストビューを設置する方法

18.11.15 13:52 | コメント(0)

jQuery Mobileでリストビューを設置する方法

jQuery mobileではカテゴリリストやお知らせ一覧など、リストビューが簡単な指定で設置することができます。
html + cssの設定とは全く異なる指定方法ではありますが、指定方法がわかるようになると簡単です。

 1. リストビューの指定要素
 2. リストビューにカウントバブル要素を指定
 3. リストビュー一覧にサムネイル画像を追加
 4. リストビューに見出し、説明、補足情報を追加
 5. 見出し、説明、補足要素一覧

リストビューの指定要素

リストビュー要素は、「ul」「ol」要素にデータ属性「data-role="listview"」」を割り当てたウィジェット要素です。
リストビューのデフォルトでは、リンク「a」を設定すると「ui-listview」クラスが付加され、リストアイテムのリンクには右向きの矢印アイコンが右側に表示されます。
また、アイコン表示以外にも、カウントバブルや画像のサムネイルも配置することができます。

【リストビュー(リンク無し)】
  • アウター
  • ジャケット
  • ボトムス
  • 小物
  • 帽子
サンプルはこちら

【リストビュー(リンク有り)】

サンプルはこちら

【番号付きリストビュー】
※「ol」要素に「data-role="listview"」のデータ属性を指定すると番号付きリストが配置されます。
  1. アウター
  2. ジャケット
  3. ボトムス
  4. 小物
  5. 帽子
サンプルはこちら

リストビューにカウントバブル要素を指定

カウントバブルとは、リストビューの項目に関連した記事や内容の個数を表すための数字です。
その他、タイムラインや未購読数を表示するような用途でも利用できます。
カウントバブルを表示するには、「li」要素の配下に「class="ui-li-count"」属性を指定することで表示されます。カウントバブルを利用する場合、一般的に「span」要素で囲ってあげると良いしょう。
【カウントバブルリスト】

サンプルはこちら

リストビュー一覧にサムネイル画像を追加

リスト項目の一覧毎にサムネイル画像を追加したい場合、「li」要素に「class="ui-li-has-thumb"」属性を付与してください。

【サムネイル画像を追加したリスト】
※「img」要素に対して「max-width」「max-height」のスタイルを設定できます。

サンプルはこちら

リストビューに見出し、説明、補足情報を追加

リスト項目内で、見出しや説明を別ける場合や補足情報を追加する場合は「h1,h2,h3,h4,h5,h6」を設定することもでき「ui-li-aside」要素を指定すると補足情報が表示されます。

【見出し、説明、補足情報を追加したリスト】

サンプルはこちら

見出し、説明、補足要素一覧

見出し、説明、補足情報を追加する際に利用する要素の一覧をご紹介します。
項目 要素
見出し h1 ~ h6要素
説明 p 要素
補足情報 ui-li-aside 要素

以上がjQuery Mobileを利用してリストビューを設置する方法になります。
カテゴリ:WEB屋になる為の知識と技術, jQuery Mobileの基礎, スマートフォン制作と作成方法, 使えるjQueryとJavaScript
  • このエントリーをはてなブックマークに追加
  • Facebookでコメントする

    コメントする

    おすすめの記事

    PAGE TOP