jQueryMobile-CSSクラス
jQueryCSSクラス
以下のセクションで説明するように、さまざまなタイプのCSSクラスを使用して要素のスタイルを設定できます。
グローバルクラス
次のクラスは、jQueryMobileウィジェットのグローバルクラスとして使用できます-
シニア番号 | クラスと説明 |
---|---|
1 | ui-corner-all 角が丸い要素が表示されます。 |
2 | ui-shadow 要素の影を表示します。 |
3 | ui-overlay-shadow 要素のオーバーレイシャドウを表示します。 |
4 | ui-mini 小さい要素が表示されます。 |
ボタンクラス
次の表に、アンカー要素またはボタン要素で使用されるボタンクラスを示します。
シニア番号 | クラスと説明 |
---|---|
1 | ui-btn 要素がボタンとしてスタイル設定されることを指定します。 |
2 | ui-btn-inline ボタンをインライン要素として表示し、ラベルの必要に応じてスペースを節約します。 |
3 | ui-btn-icon-top アイコンをテキストの上に配置します。 |
4 | ui-btn-icon-right テキストの右側にアイコンを配置します。 |
5 | ui-btn-icon-bottom テキストの下にアイコンを配置します。 |
6 | ui-btn-icon-left テキストの左側にアイコンを配置します。 |
7 | ui-btn-icon-notext 唯一のアイコンが表示されます。 |
8 | ui-btn-a|b ボタンの色が表示されます(「a」はデフォルトの背景色、つまり灰色になり、「b」は背景色を黒に変更します)。 |
アイコンクラス
次の表に、アンカー要素またはボタン要素で使用されるアイコンクラスを示します-
シニア番号 | クラスと説明 |
---|---|
1 | ui-icon-action アクションアイコンが表示されます。 |
2 | ui-icon-alert 三角形の中に感嘆符が表示されます。 |
3 | ui-icon-arrow-d-l 左矢印で下を指定します。 |
4 | ui-icon-arrow-d-r 右矢印で下を指定します。 |
5 | ui-icon-arrow-u-l 左矢印で上向きに指定します。 |
6 | ui-icon-arrow-u-r 上向き矢印で指定します。 |
7 | ui-icon-arrow-l 左矢印を指定します。 |
8 | ui-icon-arrow-r 右矢印を指定します。 |
9 | ui-icon-arrow-u 上矢印を指定します。 |
10 | ui-icon-arrow-d 下矢印を指定します。 |
11 | ui-icon-bars 3本の横棒が上下に表示されます。 |
12 | ui-icon-bullets 3つの水平方向の箇条書きが上下に表示されます。 |
13 | ui-icon-carat-d カラットを下に表示します。 |
14 | ui-icon-carat-l 左にカラットが表示されます。 |
15 | ui-icon-carat-r 右にカラットが表示されます。 |
16 | ui-icon-carat-u カラットを上に表示します。 |
17 | ui-icon-check チェックマークアイコンが表示されます。 |
18 | ui-icon-comment コメントまたはメッセージを指定します。 |
19 | ui-icon-forbidden 禁止アイコンが表示されます。 |
20 | ui-icon-forward 進むアイコンを指定します。 |
21 | ui-icon-navigation ナビゲーションアイコンを指定します。 |
22 | ui-icon-recycle リサイクルアイコンが表示されます。 |
23 | ui-icon-refresh 更新アイコンが表示されます。 |
24 | ui-icon-tag タグアイコンを示します。 |
25 | ui-icon-video ビデオまたはカメラのアイコンを示します。 |
テーマクラス
アプリケーションの外観をカスタマイズするために、テーマ「a」とテーマ「b」などの2種類のテーマを提供します。見本文字(az)を追加することで、独自のテーマクラスを作成できます。次の表に、文字aからzまでに指定されているテーマクラスを示します。
シニア番号 | クラスと説明 |
---|---|
1 | ui-bar-(a-z) ページ内のヘッダー、フッター、その他のバーを含むバーの色が表示されます。 |
2 | ui-body-(a-z) リストビュー、ポップアップ、スライダー、パネル、ローダーなどを含むコンテンツブロックの色を表示します。 |
3 | ui-btn-(a-z) ボタンの色が表示されます。 |
4 | ui-group-theme-(a-z) コントロールグループ、リストビュー、および折りたたみ可能なセットの色が表示されます。 |
5 | ui-overlay-(a-z) ポップアップ、ダイアログ、およびページコンテナの背景色を表示します。 |
6 | ui-page-theme-(a-z) ページの色を表示します。 |
グリッドクラス
次の表に、同じ幅で使用され、境界線、背景、マージン、またはパディングがないグリッドクラスを示します。
シニア番号 | グリッドクラス | 列 | 列幅 | に対応 |
---|---|---|---|---|
1 | ui-grid-solo | 1 | 100% | ui-block-a |
2 | ui-grid-a | 2 | 50%/ 50% | ui-block-a | b |
3 | ui-grid-b | 3 | 33%/ 33%/ 33% | ui-block-a | b | c |
4 | ui-grid-c | 4 | 25%/ 25%/ 25%/ 25% | ui-block-a | b | c | d |
5 | ui-grid-d | 5 | 20%/ 20%/ 20%/ 20%/ 20% | ui-block-a | b | c | d | e |