jQueryのCSSクラス
jQueryのモバイルは、異なる要素のスタイルをCSSクラスを使用します。
以下の参照リストについては、我々は一般的なスタイルのためのCSSクラスが含まれています。
グローバルクラス
これらのクラスは、(任意のjQueryのモバイルウィジェットに追加することができbuttons, toolbars, panels, tables, lists 、など):
クラス | 説明 |
---|---|
ui-corner-all | 要素に丸めコーナーを追加します。 |
ui-shadow | 要素に影を追加します。 |
ui-overlay-shadow | 要素にオーバーレイ影を追加します。 |
ui-mini | 要素を小さくします |
ボタンのクラス
グローバルクラスに加えて、あなたがするには、以下のクラスを追加することができます<a>または<button>要素(ない<input>ボタン):
クラス | 説明 |
---|---|
ui-btn | 追加する必要があります<a>あなたがそれらをボタンとしてスタイルを設定する場合は要素を |
ui-btn-inline | ボタンをインラインで表示します |
ui-btn-icon-top | アイコンボタンのテキスト上記の体位 |
ui-btn-icon-right | ボタンのテキストの右にあるアイコンを配置します |
ui-btn-icon-bottom | ポジションボタンのテキスト下のアイコン |
ui-btn-icon-left | ボタンのテキストの左側にアイコンを配置します |
ui-btn-icon-notext | アイコンだけを表示します |
ui-btn-a|b | ボタンの色を指定します。 "a"しながら、デフォルト(黒のテキストと灰色の背景)である"b"白い文字が黒の背景に色が変わります |
アイコンのクラス
使用可能なすべてのアイコンクラス<a>と<button>要素(参照アイコンリファレンス他の要素上のアイコンを使用する方法のために):
クラス | アイコン説明 | アイコン |
---|---|---|
ui-icon-action | (箱から出して時計回りにアーキング矢印)アクション | |
ui-icon-alert | 三角形の内側に感嘆符 | |
ui-icon-audio | サウンド/スピーカー | |
ui-icon-arrow-d-l | 、左矢印ダウン | |
ui-icon-arrow-d-r | 右矢印、ダウン | |
ui-icon-arrow-u-l | 左矢印、アップ | |
ui-icon-arrow-u-r | 右矢印、アップ | |
ui-icon-arrow-l | 左矢印 | |
ui-icon-arrow-r | 右矢印 | |
ui-icon-arrow-u | 上矢印 | |
ui-icon-arrow-d | 下向き矢印 | |
ui-icon-back | 戻る(曲線の矢印は上向きに反時計回りにアーキング) | |
ui-icon-bars | 互いの上に3つの水平バー | |
ui-icon-bullets | 互いの上に横3弾 | |
ui-icon-calendar | カレンダー | |
ui-icon-camera | カメラ | |
ui-icon-carat-d | カラットダウン | |
ui-icon-carat-l | 左カラット | |
ui-icon-carat-r | 右カラット | |
ui-icon-carat-u | カラットアップ | |
ui-icon-check | チェックマーク | |
ui-icon-clock | クロック | |
ui-icon-cloud | 雲 | |
ui-icon-comment | コメント/メッセージ | |
ui-icon-delete | 削除 | |
ui-icon-edit | 編集/ペンシル | |
ui-icon-eye | 眼 | |
ui-icon-forbidden | 禁断の兆候 | |
ui-icon-forward | フォワード - (時計回りに上向きにアーク放電曲線矢印) | |
ui-icon-gear | ギヤ | |
ui-icon-grid | グリッド | |
ui-icon-heart | ハート/愛のシンボル | |
ui-icon-home | ホーム家 | |
ui-icon-info | 情報 | |
ui-icon-location | ロケーション | |
ui-icon-lock | ロック/南京錠 | |
ui-icon-mail | メール/手紙 | |
ui-icon-minus | マイナス記号 | |
ui-icon-navigation | ナビゲーション | |
ui-icon-phone | 電話 | |
ui-icon-power | 電源(オン/オフ) | |
ui-icon-plus | プラス記号 | |
ui-icon-recycle | リサイクル記号 | |
ui-icon-refresh | リフレッシュ - 円形矢印 | |
ui-icon-search | 検索/拡大鏡 | |
ui-icon-shop | ショップ/バッグ | |
ui-icon-star | 星 | |
ui-icon-tag | タグ | |
ui-icon-user | ユーザー/人 | |
ui-icon-video | ビデオカメラ |
テーマクラス
(灰色)とb(黒):jQueryのモバイルは、2つのテーマクラスを提供します。 しかし、あなたはまた、独自の、カスタムクラス値を作成することができます-すべての道を文字までの"z" (テーマの章を参照してください)。 以下の表は、使用可能なテーマのクラスを示します。 文字(az)あなたがAからZまでの文字を指定できることを意味します。 たとえば、次のようにui-bar-aまたはui-bar-bなど
クラス | 説明 |
---|---|
ui-bar-(a-z) | ヘッダー、フッター、およびその他のバー - バーの色を指定 |
ui-body-(a-z) | (バージョン1.4.0で非推奨)ページ・コンテンツ・ペイン、リストビュー項目、ポップアップ、collapsibles、ローダ、スライダー、およびパネル - コンテンツブロックの色を指定 |
ui-btn-(a-z) | ボタン(アイコン)の色を指定 |
ui-group-theme-(a-z) | controlgroups、リストビューと折りたたみ可能なセットの色を指定 |
ui-overlay-(a-z) | ダイアログは、ポップアップや他のページコンテナがの上に表示されるページの背景色を指定します。 |
ui-page-theme-(a-z) | ページの色を指定 |
グリッドクラス
グリッド内の列はノーボーダー、背景、マージンやパディングで、等しい幅(合計で広い100%)です。 使用することができる5つのレイアウトグリッドがあります。
グリッドクラス | コラム | 列幅 | に対応 | 例 |
---|---|---|---|---|
ui-grid-solo | 1 | 100% | ui-block-a | Try it |
ui-grid-a | 2 | 50% / 50% | ui-block-a|b | Try it |
ui-grid-b | 3 | 33% / 33% / 33% | ui-block-a|b|c | Try it |
ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-block-a|b|c|d | Try it |
ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-block-a|b|c|d|e | Try it |
グリッドの詳細については、当社の読みjQueryのモバイルグリッドの章を 。