ページのテーマ設定

jQuery Mobileは テーマ を自由に制御するリッチな仕組みをもっています。ここではページやウィジェットのテーマに関する詳細と、高度な利用例を見て行きましょう。

ヘッダやフッタで data-theme 属性にテーマの持つスウォッチのアルファベットを指定することが出来ます。この data-theme 属性はコンテント部分にも指定できますが、それよりも data-role=“page” を指定した div などコンテナ全体に対して指定することをお勧めします。それにより、背景色などページ全体がテーマに染められることができます。

デフォルトのテーマでは、複数のスウォッチを組み合わせて見栄えや認識性を良くしています。

Default Theme

Default Theme Content Header

This is the default content color swatch and a preview of a link.

Cache settings:
Button

そして用意された5つの「スウォッチ」は、次のようなものです:

スウォッチ A

Header A

Header

This is content color swatch “A” and a preview of a link.

Cache settings:
Button

スウォッチ B

Header B

Header

This is content color swatch “B” and a preview of a link.

Cache settings:
Button

スウォッチ C

Header C

Header

This is content color swatch “C” and a preview of a link.

Cache settings:
Button

スウォッチ D

Header D

Header

This is content color swatch “D” and a preview of a link.

Cache settings:
Button

スウォッチ E

Header E

Header

This is content color swatch “D” and a preview of a link.

Cache settings:
Button