jQuery Mobile CSS 類
jQuery CSS 類
jQuery Mobile CSS 類來(lái)設(shè)置不同元素的樣式。
以下列表包含了通用的 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 | 定位圖標(biāo)在按鈕文本之上 |
| ui-btn-icon-right | 定位圖標(biāo)在按鈕文本的右邊 |
| ui-btn-icon-bottom | 定位圖標(biāo)在按鈕文本之下 |
| ui-btn-icon-left | 定位圖標(biāo)在按鈕文本的左邊 |
| ui-btn-icon-notext | 只顯示圖標(biāo) |
| ui-btn-a|b | 指定按鈕演示。"a" 是默認(rèn)的 (灰色背景黑色文本樣式), "b" 修改顏色為黑色背景白色文本 |
圖標(biāo)類
所有可用圖片的類用在 <a> 和 <button> 元素上 (查看 jQuery Mobile 圖標(biāo)參考手冊(cè) 了解如何在其他元素上使用):
| Class | 圖標(biāo)描述 | 圖標(biāo) |
|---|---|---|
| ui-icon-action | 動(dòng)作 (一般用于頁(yè)面跳轉(zhuǎn)切換) |  |
| ui-icon-alert | 三角形內(nèi)的感嘆號(hào) |  |
| 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 | 三條水平線，一般用于展示列表按鈕圖標(biāo) |  |
| ui-icon-bullets | 用于展示列表按鈕圖標(biāo) |  |
| ui-icon-calendar | 日歷 |  |
| ui-icon-camera | 相機(jī) |  |
| ui-icon-carat-d | 向下滑動(dòng)圖標(biāo) |  |
| ui-icon-carat-l | 向左滑動(dòng)圖標(biāo) |  |
| ui-icon-carat-r | 向右滑動(dòng)圖標(biāo) |  |
| ui-icon-carat-u | 向上滑動(dòng)圖標(biāo) |  |
| ui-icon-check | 勾選 |  |
| ui-icon-clock | 鬧鐘 |  |
| ui-icon-cloud | 云 |  |
| ui-icon-comment | 評(píng)論 / 消息 |  |
| ui-icon-delete | 刪除 |  |
| ui-icon-edit | 編輯 / 鉛筆 |  |
| ui-icon-eye | 眼睛 |  |
| ui-icon-forbidden | 禁用標(biāo)識(shí) sign |  |
| ui-icon-forward | 撤銷 - (返回上一步) |  |
| ui-icon-gear | 齒輪，一般用于設(shè)置按鈕圖標(biāo) |  |
| ui-icon-grid | 網(wǎng)格 |  |
| ui-icon-heart | 心型，可用于文章收藏 |  |
| ui-icon-home | 主頁(yè) |  |
| ui-icon-info | 信息 |  |
| ui-icon-location | 定位 |  |
| ui-icon-lock | 鎖 |  |
| ui-icon-mail | 郵件 / 信封 |  |
| ui-icon-minus | 減號(hào) |  |
| ui-icon-navigation | 導(dǎo)航 |  |
| ui-icon-phone | 電話 |  |
| ui-icon-power | 開(kāi)關(guān) (On/off) |  |
| ui-icon-plus | 加號(hào) |  |
| ui-icon-recycle | 循環(huán) 標(biāo)識(shí) |  |
| ui-icon-refresh | 刷新 |  |
| ui-icon-search | 搜索 / 放大鏡 |  |
| ui-icon-shop | 商店/購(gòu)物袋 |  |
| ui-icon-star | 星號(hào) |  |
| ui-icon-tag | 標(biāo)簽 |  |
| ui-icon-user | 用戶 / 人物 |  |
| ui-icon-video | 視頻 / 相機(jī) |  |
主題類 Classes
jQuery Mobile 提供了兩個(gè)主題類: a (灰) 和 b (黑)。 但是，你可以創(chuàng)建你自己的自定義類 - 可定義到字母 "z" （查看 jQuery Mobile 主題 ）。 下表列出了可用的主題類。 字母 (a-z) 意為樣式可以指定 a 到 z。例如 ui-bar-a 或 ui-bar-b等。
| Class | 描述 |
|---|---|
| ui-bar-(a-z) | 指定欄目演示 - 頭部，底部及其他欄目 |
| ui-body-(a-z) | 指定內(nèi)容塊的顏色 - 頁(yè)面內(nèi)容部分 ( 1.4.0 版本已廢棄), 列表視圖， 彈窗, 側(cè)欄，面板，加載，折疊。 |
| ui-btn-(a-z) | 指定按鈕顏色 |
| ui-group-theme-(a-z) | 定義了控制組的演示 listviews 和 collapsible 集合。 |
| ui-overlay-(a-z) | 定義了頁(yè)面背景顏色，包括對(duì)話框，彈窗和其他出現(xiàn)在最頂層的頁(yè)面容器 |
| ui-page-theme-(a-z) | 定義了頁(yè)面演示 |
網(wǎng)格類
網(wǎng)格中的列是等寬的（合計(jì)是 100%），沒(méi)有邊框、背景、margin 或 padding。 這里有四種布局網(wǎng)格可供使用：
| 網(wǎng)格類 | 列 | 列寬 | 對(duì)應(yīng) | 實(shí)例 |
|---|---|---|---|---|
| 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 網(wǎng)格 章節(jié)。