jQuery Mobile CSS 類
jQuery CSS 類
jQuery Mobile CSS 類來設置不同元素的樣式。
以下列表包含了通用的CSS 樣式:
全局類
以下類可以在jQuery Mobile 小工具中使用(按鈕,工具條,面板,表格,列表等。):
Class | 描述 |
---|---|
ui-corner-all | 為元素添加圓角 |
ui-shadow | 為元素添加陰影 |
ui-overlay-shadow | 為元素添加多層陰影 |
ui-mini | 讓元素變小 |
按鈕類
除了全局類外,你可以向<a> 或<button> 元素添加以下類(不是<input> 按鈕):
Class | 描述 |
---|---|
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>元素上(查看jQuery Mobile圖標參考手冊了解如何在其他元素上使用):
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 | 视频 / 相机 |
主題類Classes
jQuery Mobile 提供了兩個主題類: a (灰) 和b (黑)。 但是,你可以創建你自己的自定義類-可定義到字母"z" (查看jQuery Mobile主題 )。 下表列出了可用的主題類。 字母(az) 意為樣式可以指定a 到z。 例如ui-bar-a 或ui-bar-b等。
Class | 描述 |
---|---|
ui-bar-(az) | 指定欄目演示- 頭部,底部及其他欄目 |
ui-body-(az) | 指定內容塊的顏色- 頁面內容部分( 1.4.0 版本已廢棄), 列表視圖, 彈窗, 側欄,面板,加載,折疊。 |
ui-btn-(az) | 指定按鈕顏色 |
ui-group-theme-(az) | 定義了控制組的演示listviews 和collapsible 集合。 |
ui-overlay-(az) | 定義了頁面背景顏色,包括對話框,彈窗和其他出現在最頂層的頁面容器 |
ui-page-theme-(az) | 定義了頁面演示 |
網格類
網格中的列是等寬的(合計是100%),沒有邊框、背景、margin 或padding。 這裡有四種佈局網格可供使用:
網格類 | 列 | 列寬 | 對應 | 實例 |
---|---|---|---|---|
ui-grid-solo | 1 | 100% | ui-block-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網格章節。