スポンサーリンク
スポンサーリンク

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

ウィジェットが画面に表示されるとき、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つ目

コメント

タイトルとURLをコピーしました