*

テーマを設定する

公開日: : 最終更新日:2016/04/23 jQueryMobile

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

テーマの種類

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

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

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

テーマの優先順位

1.ウィジェット自身の設定
2.ウィジェットを組み込んだページなどの別のウィジェットの設定
3.デフォルトの設定

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

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

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

テーマの設定方法

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

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

スポンサードリンク

関連記事

no image

ボタンを設定する

前回の記事では<a data-role="button">によるボタンを取り上げましたが

記事を読む

no image

class属性によりレイアウトとテーマを設定する

ウィジェットが画面に表示されるとき、HTMLタグには様々なclass属性が追加されます。これらはCS

記事を読む

no image

値を選択するボタンを表示する

値を選択するボタンは以下の2つがあります。 ・複数の値から1つだけを選択するウィジェット ラジ

記事を読む

no image

ポップアップを表示する

ポップアップ(popup)とは、pageの上に付加情報や画像などのコンテンツを重ねて表示するウィジェ

記事を読む

no image

リンク先を設定したり、アイコンを利用する。

リンク(link)とは、次の画面に表示するコンテンツを表すもので、HTMLではaタグで表します。jQ

記事を読む

no image

data-属性により、ヘッダとフッタを常時表示する

前回の記事の続きです。 ヘッダとフッタを常時表示 ページのヘッダとフッタにdata-posi

記事を読む

no image

ページ(page)とは

jQueryMobileでは、スマートフォンの画面に表示するページ(page)というウィジェットで構

記事を読む

no image

項目選択の複数ウィジェットをグループ化する

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグループ化が有効です。グループ化され

記事を読む

no image

<select>により項目選択

ボタンによる選択では、1つの項目だけ選択するか、複数を同時に選択するかで、ラジオボタンかチェックボッ

記事を読む

no image

折りたたみを設定する

おりたたみ(collapse)は、予め概要を示す文字列が表示されている領域をクリックかタップすると、

記事を読む

スポンサードリンク

Message

メールアドレスが公開されることはありません。

CAPTCHA


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">



スポンサードリンク

jQueryMobile
トグルスイッチを設定する

トグルスイッチ(toggle switch)とは、〇型のつまみを左右に

jQueryMobile
項目選択の複数ウィジェットをグループ化する

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグルー

jQueryMobile
<select>により項目選択

ボタンによる選択では、1つの項目だけ選択するか、複数を同時に選択するか

jQueryMobile
値を選択するボタンを表示する

値を選択するボタンは以下の2つがあります。 ・複数の値から1つだ

jQueryMobile
ボタンを設定する

前回の記事では<a data-role="button">

→もっと見る

  • スポンサーリンク

PAGE TOP ↑