ウィジェットが画面に表示されるとき、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"のいずれかです。サンプルコードの実行結果はこちら
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQueryMobile class属性を利用してレイアウトを変えてみる</title> <link rel="stylesheet" href="../js/jquery.mobile-1.4.5.css"> <script src="../js/jquery-1.11.3.js"></script> <script src="../js/jquery.mobile-1.4.5.js"></script> </head> <body> <section id="page1" data-role="page"> <article data-role="content"> <div class="ui-body ui-body-a"> <h2>ui-body-a</h2> <p><a href="#page2">To page2</a></p> </div> </article> </section> <section id="page2" data-role="page"> <article data-role="content"> <div class="ui-body ui-body-b"> <h2>ui-body-b</h2> <p><a href="#page1">To page1</a></p> </div> </article> </section> </body> </html> |
バー(ui-bar,ui-bar-*)
class="ui-bar"はヘッダやフッタのようなレイアウトを行うための設定で、別途メニューバーなどが必要な時に利用できます。class="ui-bar ui-bar-a"と設定するとテーマ"a"と同様のレイアウトに変更できます。デフォルトでは"ui-bar-a"～"ui-bar-b"まで設定できます。サンプルコードの実行結果はこちら
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQueryMobile class属性を利用してレイアウトを変えてみる(ui-bar-*)</title> <link rel="stylesheet" href="../js/jquery.mobile-1.4.5.css"> <script src="../js/jquery-1.11.3.js"></script> <script src="../js/jquery.mobile-1.4.5.js"></script> </head> <body> <section id="page1" data-role="page"> <article data-role="content"> <div class="ui-bar ui-bar-a"> <h2>ui-bar-a</h2> <p><a href="#page2" class="ui-btn">To page2</a></p> </div> </article> </section> <section id="page2" data-role="page"> <article data-role="content"> <div class="ui-bar ui-bar-b"> <h2>ui-bar-b</h2> <p><a href="#page1" class="ui-btn">To page1</a></p> </div> </article> </section> </body> </html> |
グリッド(ui-grid-*,ui-block-*)
jQueryMobileでのグリッド(grid)は、画面の1行分を2～5等分した領域を意味しています。分割したそれぞれの領域をブロック(block)といい、この中にはさらに別のウィジェットを表示できます。等分できるのは横幅だけで、高さは分割された領域のうち最大のものに統一されます。グリッド自身は、ページ内のヘッダ、フッタ、コンテンツのどの中にも配置することができます。サンプルコードの実行結果はこちら
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQueryMobile class属性を利用してレイアウトを変えてみる(ui-grid-*)</title> <link rel="stylesheet" href="../js/jquery.mobile-1.4.5.css"> <script src="../js/jquery-1.11.3.js"></script> <script src="../js/jquery.mobile-1.4.5.js"></script> <style> .ui-block-a, .ui-block-b, .ui-block-c, .ui-block-d, .ui-block-e{ border:1px solid black; height:24px;} .ui-block-a{background-color:pink;} .ui-block-b{background-color:yellow;} .ui-block-c{background-color:green;} .ui-block-d{background-color:skyblue;} .ui-block-e{background-color:silver;} </style> </head> <body> <section id="page" data-role="page"> <article data-role="content"> <div class="ui-grid-solo"> <div class="ui-block-a"></div> </div> <div class="ui-grid-a"> <div class="ui-block-a"></div> <div class="ui-block-b"></div> </div> <div class="ui-grid-b"> <div class="ui-block-a"></div> <div class="ui-block-b"></div> <div class="ui-block-c"></div> </div> <div class="ui-grid-c"> <div class="ui-block-a"></div> <div class="ui-block-b"></div> <div class="ui-block-c"></div> <div class="ui-block-d"></div> </div> <div class="ui-grid-d"> <div class="ui-block-a"></div> <div class="ui-block-b"></div> <div class="ui-block-c"></div> <div class="ui-block-d"></div> <div class="ui-block-e"></div> </div> </article> </section> </body> </html> |
値の末尾はテーマじゃない
下記の表はグリッドとブロックに設定する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は５つ目となります。
| 位置 | 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つ目 |