jQuery モバイル CSS クラス
jQuery Mobile CSS クラス
jQuery CSS クラス
さまざまな要素のスタイルを設定するための jQuery Mobile CSS クラス。
次のリストには、一般的な CSS スタイルが含まれています:
グローバル クラス
次のクラスは、jQuery Mobile ウィジェット (ボタン、ツールバー、パネル、テーブル、リストなど) で使用できます:
| Class | 説明 |
|---|---|
| ui-corner-all | 要素に丸い角を追加 |
| ui-shadow | 要素に影を追加 |
| ui-overlay-shadow | 要素にマルチレイヤーシャドウを追加 |
| ui-mini | 要素を小さくする |
Buttonクラス
グローバルクラスに加えて、<a>を指定できます。 <button> 要素は次のクラスを追加します (<input> ボタンではありません):
| 要素に追加して、ボタン | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 同じ行にボタンを表示 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| アイコンをボタンのテキストの上に配置します | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| アイコンの位置 アイコンをボタンのテキストの右側に配置します | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| アイコンをボタンのテキストの下に配置します | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| アイコンをボタンのテキストの左側 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| アイコンのみを表示 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ボタンのデモを指定します。 「a」はデフォルト（灰色の背景に黒のテキストスタイル）で、「b」は色を黒の背景に白のテキストに変更します | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| クラス | アイコンの説明 | icon |
|---|---|---|
| ui-icon-action | action (通常はページジャンプの切り替えに使用されます) |  |
| ui-icon-alert | 三角形の中で感嘆符マーク |  |
| ui-icon-audio | オーディオ/スピーカー |  |
| ui-icon-arrow-d-l | 左下隅の矢印 |  |
| ui-アイコン-矢印- d-r | 右下の矢印 |  |
| ui-icon-arrow-u-l | 左上の矢印 |  |
| ui-icon-arrow-u-r | 右上の矢印 |  |
| ui-icon-arrow-l | 左隅の矢印 |  |
| ui-icon-arrow-r | 右隅の矢印 |  |
| ui-icon-arrow-u | up arrow |  |
| ui-icon-arrow-d | 下矢印 |  |
| ui-icon-back | back |  |
| ui-icon - バー | 水平 3 本行、通常、リストボタンアイコンを表示するために使用されます |  |
| ui-icon-bullets |  | |
| ui-icon-calendar | calendar |  |
| ui-icon-camera | caメラ |  |
| ui-icon-carat-d | アイコンを下にスワイプ |  |
| ui-icon-carat-l | アイコンを左にスワイプ |  |
| ui-icon-carat-r | スワイプして、アイコンを右に | |
| アイコンを上にスワイプ |  | |
| Check |  | |
| 目覚まし時計 |  | |
| cloud |  | |
| コメント/メッセージ |  | |
| 削除 |  | |
| edit/pencil |  | |
| eyes |  | |
| forbiddenのロゴサイン |  | |
| ui-icon-forward | Undo- (前のステップに戻る) |  |
| ui-icon-gear | ギア、通常はボタンアイコンの設定に使用されます |  |
| ui-icon-グリッド | グリッド |  |
| ui-icon-heart | ハートの形、記事コレクションに使用できます |  |
| ui-icon-home | ホームページ |  |
| ウイ-icon -info | 情報 |  |
| ui-icon-location | location |  |
| ui-icon-lock | lock |  |
| ui-アイコン-メール | メール/封筒 |  |
| ui-icon-minus | minus |  | ui-icon-navigation
ui -アイコン-電話 | 電話||
| ui-icon-power |  スイッチ (オン/オフ) | |
| ui-icon-plus |  plus | |
| ui-icon-recycle |  ループ
ロゴ | |
| ui-icon-refresh | refresh |  |
| ui-icon-search | 検索/虫眼鏡 |  |
| ui-icon-shop | ショップ/ショッピングバッグ |  |
| ui-icon-star | star |  |
| ui-icon-tag | tag |  |
| ui-icon-user | ユーザー/人 |  |
| ui-icon-video | ビデオ/カメラ |  |
テーマクラス
jQuery Mobile には、a (グレー) と b (黒) の 2 つのテーマ クラスが用意されています。 ただし、文字「z」までの独自のカスタム クラスを作成できます (jQuery Mobile テーマを参照)。 次の表に、使用可能なテーマ クラスを示します。 文字 (a ～ z) は、スタイルを a ～ z で指定できることを意味します。例えば ui-bar-a または ui-bar-b など。
| クラス | 説明 |
|---|---|
| ui-bar-(a-z) | 指定された列のデモンストレーション-ヘッダー、下部およびその他の列 |
| ui-body-(a-z) | 指定されたコンテンツブロック 色 -ページコンテンツの一部 ( バージョン 1.4.0 は廃止されました)、リスト ビュー、ポップアップ ウィンドウ、サイドバー、パネル、ロード、折りたたみ。 |
| ui-btn-(a-z) | ボタンの色を指定します |
| ui-group-theme-(a-z) | グループを制御するデモリストビューと折りたたみ可能なコレクションを定義します。 |
| ui-overlay-(a-z) | は、トップレベルに表示されるダイアログボックス、ポップアップウィンドウ、その他のページコンテナを含むページの背景色を定義します |
| ui-page-theme-(a-z) | 定義 ページのデモを入手しました |
Grid クラス
グリッド内の列は同じ幅 (合計 100%) で、境界線、背景、マージン、パディングはありません。 ここでは 4 つのレイアウト グリッドが利用可能です:
| grid class | column | column width | 対応する | instance |
|---|---|---|---|---|
| ui-grid-solo | 1 | 100% | ui-ブロック- a | 試してみる |
| ui-grid-a | 2 | 50% / 50% | ui-block-a|b | 試してみる |
| ui-grid-b | 3 | 33% / 33% / 33% | ui-block-a|b|c | 試してみる |
| ui-grid-c | 4 | 25% / 25% / 25% / 25 % | ui-block-a|b|c|d | 試してみる |
| ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui- block-a|b|c|d|e | お試しください |
詳細については、jQuery Mobile Grid の章をご覧ください。
