*

テーマを設定する

公開日: : 最終更新日: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

ナビゲーションバーを表示

ナビゲーションバーは、ヘッダ、フッタ内の複数のリンクをボタンのようにして表示するウィジェットです、よ

記事を読む

no image

ポップアップを表示する

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

記事を読む

no image

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

トグルスイッチ(toggle switch)とは、〇型のつまみを左右にドラッグして2つの値のうちどち

記事を読む

no image

jQueryMobileカテゴリーで出てくる用語集

jQueryMobileの記事で登場する用語を下記の表にまとめました。学習するときの助けになるかも。

記事を読む

no image

ページ遷移時にアニメーションを付けてたり、Ajaxによるアクセスを禁止する

リンクを操作し、あるページから別のページに飛ぶときに、MozillaやWebkitベースのブラウザで

記事を読む

no image

ボタンを設定する

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

記事を読む

no image

ページのURLを設定する

ユーザーにページのURLを知らせる時に使用するのがdata-url属性です。 data-url属性

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

ヘッダ内、フッタ内にボタンを表示する

ヘッダ内にボタンを表示してみる ヘッダ内にリンクであるaタグを作成すると、それがボタンとして表示さ

記事を読む

スポンサードリンク

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 ↑