jQuery Mobileのスウォッチ

jQuery Mobileにはテーマというのが用意されていて、テーマにはスウォッチを設定することができる。
テーマにスウォッチを設定することで、簡単にデザインを適用することができるようになっている。

スウォッチとはヘッダ/フッタ/コンテンツ部分やボタンの背景などの、パーツごとに個別の設定可能ないろの組み合わせのこと。
スウォッチはデフォルトでは標準のテーマが使用される。
標準のテーマというのは、下にも書いてあるa〜eの5つのスウォッチのことで、スウォッチごとにデフォルトの背景色などが異なる。
ヘッダ/フッタにはスウォッチ「a」が適用される。コンテンツ部分にはスウォッチ「c」が適用される。
aは黒の背景。cはグレーである。
簡単に並べると・・・

  • a:最も強調したい部分のこと。デフォルトは黒。
  • b:2番目のレベル。デフォルトは青。
  • c:基本レベル。デフォルトはグレー
  • d:bの代替。デフォルトは薄いグレー。
  • e:アクセントとして使用。デフォルトは黄色。

スウォッチを設定する方法

各要素にスウォッチを設定するには、data-theme属性にスウォッチ名を指定する。

<div data-role="page" data-theme="a">

みたいな感じ。

jQuery MobileのThemeRollerを使えば、GUIでjQuery Mobileのテーマを設定できる。

jQuery Theme Roller
いじっているとなんとなく分かるんだけど、左側の「A」「B」「C」とかで、スウォッチを選択して、ボタンとかヘッダーの色とかを設定できる。
で、上の方にある「Download」ボタンを押せば、cssをダウンロードできるので、それを使う。

また、上の「Import」ボタンを押せば、自分が今使っているテーマを編集することもできる。

読んだ本

かんたん7ステップ きほんからわかる jQuery Mobileコーディング

かんたん7ステップ きほんからわかる jQuery Mobileコーディング

  • 作者: 大津真
  • 出版社/メーカー: インプレスジャパン
  • 発売日: 2013/03/21
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログを見る