Jquery-mobile-css-classes

jQuery Mobile-CSSクラス

jQuery CSSクラス

以下のセクションで説明するように、さまざまなタイプのCSSクラスを使用して要素のスタイルを設定できます。

グローバルクラス

次のクラスは、jQuery Mobileウィジェットでグローバルクラスとして使用できます-

Sr.No.	Class & Description
1	ui-corner-all 角の丸い要素が表示されます。
2	ui-shadow 要素の影を表示します。
3	ui-overlay-shadow 要素のオーバーレイシャドウを表示します。
4	ui-mini 小さい要素が表示されます。

ボタンクラス

次の表は、アンカーまたはボタン要素で使用されるボタンクラスを示しています-

Sr.No.	Class & Description
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

アイコンクラス

次の表は、アンカーまたはボタン要素で使用されるアイコンクラスを示しています-

Sr.No.	Class & Description
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種類のテーマを提供して、アプリケーションの外観をカスタマイズします。 スウォッチ文字（a〜z）を追加して、独自のテーマクラスを作成できます。 次の表に、文字a〜zで指定されたテーマクラスを示します。

Sr.No.	Class & Description
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) ページの色を表示します。

グリッドクラス

次の表は、幅が等しく、境界線、背景、マージン、パディングなしで使用されるグリッドクラスの一覧です。

Sr.No.	Grid Class	Columns	Column Widths	Corresponds To
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