このページの本文へ

DESIGN 西畑一馬のjQuery Mobileデザイン入門 ― 第6回

サンプルで学ぶjQuery Mobileまとめ(中編)

2011年08月04日 11時00分更新

西畑一馬/to-R

  • この記事をはてなブックマークに追加
本文印刷

前編「リストの表示」の続き)

見出しのテーマの変更

 jQuery Mobileのリスト表示は、ul/ol要素にdata-theme属性でテーマを指定できます。

サンプル26[HTML]


<ul data-role="listview" data-theme="e">
  <li><a href="#page2">list</a></li>
  <li><a href="#page2">list</a></li>
  <li><a href="#page2">list</a></li>
  <li><a href="#page2">list</a></li>
  <li><a href="#page2">list</a></li>
</ul>


<画像>25.jpg
リストのテーマを変更した状態

 data-theme属性はul/ol要素の子要素であるli要素にも指定できます。li要素にdata-theme属性を設定すると、個々のリスト項目のテーマを変更できます。

サンプル27[HTML]


<ul data-role="listview">
  <li><a href="#page2">list</a></li>
  <li data-theme="e"><a href="#page2">list</a></li>
  <li><a href="#page2">list</a></li>
  <li><a href="#page2">list</a></li>
  <li><a href="#page2">list</a></li>
</ul>


<画像>26.jpg
個々のリスト項目のテーマも変更できる
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング