*

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

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

ウィジェットが画面に表示されるとき、HTMLタグには様々なclass属性が追加されます。これらはCSSの設定を反映してレイアウトやテーマを表示するのに利用されます。今回は、前回までの記事で紹介したdata-属性とは異なる設定で追加できるclass属性の値について書いていきます。

下記の表は、設定の種類と、それに対応するclassの属性値、それらに関連するウィジェットを表します。classの属性値で「-*」は「-a~-z」のうち有効なものが設定されているものとします。

設定 class属性の属性値 ウィジェット
背景 ui-body,ui-body-* ページ
バー ui-bar,ui-bar-* ヘッダ、フッタ
グリッド ui-grid-*,ui-block-* ナビゲーションバー

背景(ui-body,ui-body-*)

class=”ui-body”はページの背景のようなレイアウトを行うための設定で、これが設定された領域は、ページのテーマとは異なるデザインに変更されます。実際には、”a”というテーマを設定したいときは”class=”ui-body ui-body-a”と設定します。デフォルトで設定できるのは、”ui-body-a”~”ui-body-b”のいずれかです。サンプルコードの実行結果はこちら

バー(ui-bar,ui-bar-*)

class=”ui-bar”はヘッダやフッタのようなレイアウトを行うための設定で、別途メニューバーなどが必要な時に利用できます。class=”ui-bar ui-bar-a”と設定するとテーマ”a”と同様のレイアウトに変更できます。デフォルトでは”ui-bar-a”~”ui-bar-b”まで設定できます。サンプルコードの実行結果はこちら

グリッド(ui-grid-*,ui-block-*)

jQueryMobileでのグリッド(grid)は、画面の1行分を2~5等分した領域を意味しています。分割したそれぞれの領域をブロック(block)といい、この中にはさらに別のウィジェットを表示できます。等分できるのは横幅だけで、高さは分割された領域のうち最大のものに統一されます。グリッド自身は、ページ内のヘッダ、フッタ、コンテンツのどの中にも配置することができます。サンプルコードの実行結果はこちら

値の末尾はテーマじゃない

下記の表はグリッドとブロックに設定するclass属性の値を表したもので、1行を3等分するには”ui-grid-b”、4等分するには”ui-grid-c”、5等分するには”ui-grid-d”です。グリッドの場合は、末尾のアルファベットが1行を等分する数を表します。

ブロックではclass属性に”ui-block-a”~”ui-block-e”を設定できますが、これはブロックの左からの位置を表します。ui-block-aが左端のブロックで、以下ui-block-bが左から2番目と続き、ui-block-eは5つ目となります。

位置 class属性の値 設定
グリッド ui-grid-a 2等分
ui-grid-b 3等分
ui-grid-c 4等分
ui-grid-d 5等分
ui-grid-solo 分割なし
ブロック ui-block-a 左から1つ目
ui-block-b 左から2つ目
ui-block-c 左から3つ目
ui-block-d 左から4つ目
ui-block-e 左から5つ目

スポンサードリンク

関連記事

no image

data-属性によるウィジェットの設定

テーマの他にもウィジェットにdata-属性を追加して、色々な事ができます。 ウィジェ

記事を読む

no image

バルーンを表示、項目を分割、折り畳みやポップ内にlistviewを作成する。

バルーンとは、円形の囲みのことで、jQueryMobileでは、その内部に文字列を表示するために、実

記事を読む

no image

項目リストを設定する

項目リスト(listview)は、ふくすうの項目を列挙するためのウィジェットで、項目には文字列や、画

記事を読む

no image

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

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

記事を読む

no image

ボタンを設定する

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

記事を読む

no image

折りたたみを設定する

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

記事を読む

no image

ダイアログ

ダイアログは、ユーザーに対して警告や注意をひくために、伝えたいことを表示します。ダイアログが表示され

記事を読む

no image

コンテンツをフルスクリーンで表示する

ヘッダ、フッタにdata-position="fixed"とdata-fullscreen="tru

記事を読む

no image

ボタン内にアイコンを表示したり、デザインを変更する

ボタン内にアイコンを表示するには、リンクと同じように、data-icon属性、data-iconpo

記事を読む

no image

アイコンとサムネイルを表示する

各項目のレイアウトを設定する <li>の中には、色々なレイアウトを設定できます。いずれ

記事を読む

スポンサードリンク

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 ↑