Latest web development tutorials

jQueryのモバイルCSSクラス

jQueryのCSSクラス

異なる要素のスタイルを設定するためのjQueryのモバイルCSSクラス。

以下のリストは、一般的なCSSスタイルが含まれています。


グローバルクラス

以下のクラスは、jQueryのモバイルガジェットに(ボタン、ツールバー、パネル、テーブル、リストなど)を使用することができます:

クラス 説明
UI-コーナーすべて 要素のフィレットを追加します
UI-影 影の要素を追加するには
UI-オーバーレイ影 素子の多層影を追加
UI-ミニ 小さい要素をしてみましょう


Buttonクラス

グローバルクラスに加えて、以下のクラス(いない<入力>ボタン)<a>にまたは<ボタン>要素を追加することができます。

クラス 説明
UI-BTN ボタンやディスプレイなどの<a>要素を追加します。
UI-BTN-インライン 同じ行に表示ボタン
UI-BTN-アイコントップ ボタンのテキストの上にターゲットアイコン
UI-BTN-アイコン右 ボタンのテキストの右側にあるターゲットアイコン
UI-BTN-アイコン下 ボタンのテキストの下にターゲットアイコン
UI-BTN-アイコン左 ボタンのテキストの左にターゲットアイコン
UI-BTN-アイコンnotext アイコンだけを表示します
UI-BTN-A | B 指定ボタンのデモ。 「A」は、白いテキストと黒の背景の色を変更するには、デフォルト(グレーの背景スタイルに黒のテキスト)、「B」であります


Iconクラス

<A>と<ボタン>要素で使用されているすべての利用可能なイメージのクラス(参照jQueryのモバイルアイコンのリファレンスマニュアルを他の要素に使用する方法を学ぶために):

Class 图标描述 图标
ui-icon-action 动作 (一般用于页面跳转切换) アクション
ui-icon-alert 三角形内的感叹号 アラート
ui-icon-audio 音响/音箱 オーディオ
ui-icon-arrow-d-l 左下角箭头 矢印D-L
ui-icon-arrow-d-r 右下角箭头 矢印D-R
ui-icon-arrow-u-l 左上角箭头 矢印-U-L
ui-icon-arrow-u-r 右上角箭头 矢印-U-R
ui-icon-arrow-l 左角箭头 矢印リットル
ui-icon-arrow-r 右角箭头 矢印-R
ui-icon-arrow-u 向上箭头 矢印-U
ui-icon-arrow-d 向下箭头 矢印-D
ui-icon-back 返回 バック
ui-icon-bars 三条水平线,一般用于展示列表按钮图标 バー
ui-icon-bullets 用于展示列表按钮图标 弾丸
ui-icon-calendar 日历 カレンダー
ui-icon-camera 相机 カメラ
ui-icon-carat-d 向下滑动图标 カラット-D
ui-icon-carat-l 向左滑动图标 カラット-リットル
ui-icon-carat-r 向右滑动图标 カラット-R
ui-icon-carat-u 向上滑动图标 カラット-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 禁用标识 sign 禁じられました
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 开关 (On/off) パワー
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 视频 / 相机 CAMERA1


トピックカテゴリクラス

(灰色)とb(黒):jQueryのモバイルテーマは、2つのクラスを提供します。 ただし、独自のカスタムクラスを作成することができます- (参照文字「Z」を定義するためのjQueryモバイルテーマを )。 次の表は、利用可能なテーマのクラスを示しています。 文字(AZ)は、zのにスタイルを指定できることを意味します。 たとえば、UI-バー-AまたはUI-バー-B等のため。

クラス 説明
UI-バー - (AZ) 列のデモを指定 - ヘッダー、フッター、および他のセクション
UI-body-(AZ) コンテンツのピースの色を指定します - コンテンツセクションページ(バージョン1.4.0廃止された)、リストビュー、ポップ、サイドバー、パネル、負荷は、崩壊しました。
UI-btn-(AZ) ボタンの色を指定します
UI-グループTHEME-(AZ) これは、対照群のプレゼンテーションリストビューと折りたたみ可能なコレクションを定義します。
UI-overlay-(AZ) ダイアログボックスを含むページの背景色を定義し、ポップアップや他のトップレベル・ページは、コンテナ内に表示されます
UI-ページTHEME-(AZ) ページのデモを定義します。


グリッドクラス

グリッド列は同一の幅(合計100%)、無境界線、背景、マージンやパディングです。 4レイアウトグリッドがあり利用できます。

グリッドクラス 列幅 対応
UI-グリッドソロ 1 100% UI-ブロック-A 試します
UI-グリッド-A 2 / 50%、50% UI-ブロック| B 試します
UI-グリッド-B 3 33%/ 33%/ 33% UI - ブロック - | B | C 試します
UI-グリッド-C 4 25%/ 25%/ 25%/ 25% UI - ブロック - | B | C | D 試します
UI-グリッド-D 5 20%/ 20%/ 20%/ 20%/ 20% UI - ブロック - | B | C | D | E 試します

さらに詳しい情報は入手可能ですjQueryのモバイルグリッドセクション。