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