ボタンのテーマ設定

jQuery Mobileは、ボタンのスタイルも自由に変更できるリッチな テーマ システムを備えています。リンクをコンテナに入れた場合、ボタンはカメレオンのように自動的に親要素のスウォッチにしたがいます。ボタンがスウォッチ “a” のコンテナに入っている場合、そのボタンもまた “a” のスタイルで設定されます。次に示すのは、デフォルトテーマのスウォッチセットです。

A swatch

Button

B swatch

Button

C swatch

Button

D swatch

Button

E swatch

Button

テーマスウォッチの設定

ボタンは手動で任意の data-theme を設定することで、コンテナとは異なったスウォッチにすることも出来ます。

Theme a

下の5つのアイコン付きボタンは data-theme 属性の指定により異なったスウォッチを設定したものです。

Theme a Theme b Theme c Theme d Theme e

テーマのバリエーション

“a” theme on container with themed buttons inside

Theme a Theme b Theme c Theme d Theme e

“b” theme on container with themed buttons inside

Theme a Theme b Theme c Theme d Theme e

“c” theme on container with themed buttons inside

Theme a Theme b Theme c Theme d Theme e

“d” theme on container with themed buttons inside

Theme a Theme b Theme c Theme d Theme e

“e” theme on container with themed buttons inside

Theme a Theme b Theme c Theme d Theme e