テーマを設定する

テーマとは、統一化された各ウィジェットの外観などのデザインの事で、それぞれに名前がついています。同じ画面に表示される別々のウィジェットに対して同じ名前のテーマを設定して表示すると、画面全体のデザインに統一感がでます。

テーマの種類

jQueryMobileでは、a,b,c,d,eというテーマが設定されていて、、それぞれのテーマ別のCSSが用意されています。

ページ、ダイアログ、ポップアップのデフォルトのテーマって？

ページのデフォルトのテーマは以下のようになっています。
・ページ　c
・ヘッダ、フッタ　a

テーマの優先順位

１．ウィジェット自身の設定
２．ウィジェットを組み込んだページなどの別のウィジェットの設定
３．デフォルトの設定

テーマの設定には優先順位があり、１番優先されるのは、ウィジェット自身の設定です。２番目がウィジェットを組み込んだページなどの別のウィジェットの設定で、１番目。、２番目の設定がないときは、jQueryMobileのデフォルトの設定が適用されています。

例えば、ダイアログ内にボタンが配置されているときに、ボタンに直接設定したテーマで実際の画面表示が行われます。これが省かれているとダイアログのテーマで設定されます。
これも省いているとデフォルトの設定でダイアログが表示されます。

それと、ダイアログ内のヘッダのテーマが省略されているときは、デフォルトのヘッダのテーマが適用されます。

テーマの設定方法

テーマはdata-theme属性で設定します。aというテーマに設定したいときは、ウィジェットのタグにdata-theme="a"を追加します。ダイアログとポップアップには、背景のテーマを設定するdata-overlay-theme属性というのもあります。

サンプルコードの実行結果はこちら