最新のWeb開発のチュートリアル
 

jQuery Mobile CSSクラス


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のモバイルグリッドの章を