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 | 左下角箭头 | |
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 | 三条水平线,一般用于展示列表按钮图标 | |
ui-icon-bullets | 用于展示列表按钮图标 | |
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 | 禁用标识 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 | 视频 / 相机 |
トピックカテゴリクラス
(灰色)と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のモバイルグリッドセクション。