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)切換)action
ui-icon-alert三角形內(nèi)的感嘆號(hào)alert
ui-icon-audio音響/音箱audio
ui-icon-arrow-d-l左下角箭頭arrow-d-l
ui-icon-arrow-d-r右下角箭頭arrow-d-r
ui-icon-arrow-u-l左上角箭頭arrow-u-l
ui-icon-arrow-u-r右上角箭頭arrow-u-r
ui-icon-arrow-l左角箭頭arrow-l
ui-icon-arrow-r右角箭頭arrow-r
ui-icon-arrow-u向上箭頭arrow-u
ui-icon-arrow-d向下箭頭arrow-d
ui-icon-back返回back
ui-icon-bars三條水平線,一般用于展示列表按鈕圖標(biāo)bars
ui-icon-bullets用于展示列表按鈕圖標(biāo)bullets
ui-icon-calendar日歷calendar
ui-icon-camera相機(jī)camera
ui-icon-carat-d向下滑動(dòng)圖標(biāo)carat-d
ui-icon-carat-l向左滑動(dòng)圖標(biāo)carat-l
ui-icon-carat-r向右滑動(dòng)圖標(biāo)carat-r
ui-icon-carat-u向上滑動(dòng)圖標(biāo)carat-u
ui-icon-check勾選check
ui-icon-clock鬧鐘clock
ui-icon-cloudcloud
ui-icon-comment評(píng)論 / 消息comment
ui-icon-delete刪除delete
ui-icon-edit編輯 / 鉛筆edit
ui-icon-eye眼睛eye
ui-icon-forbidden禁用標(biāo)識(shí) signforbidden
ui-icon-forward撤銷 - (返回上一步)forward
ui-icon-gear齒輪,一般用于設(shè)置按鈕圖標(biāo)gear
ui-icon-grid網(wǎng)格grid
ui-icon-heart心型,可用于文章收藏heart
ui-icon-home主頁(yè)home
ui-icon-info信息info
ui-icon-location定位location
ui-icon-locklock
ui-icon-mail郵件 / 信封mail
ui-icon-minus減號(hào)minus
ui-icon-navigation導(dǎo)航navigation
ui-icon-phone電話phone
ui-icon-power開(kāi)關(guān) (On/off)power
ui-icon-plus加號(hào)plus
ui-icon-recycle循環(huán) 標(biāo)識(shí)recycle
ui-icon-refresh刷新refresh
ui-icon-search搜索 / 放大鏡search
ui-icon-shop商店/購(gòu)物袋shop
ui-icon-star星號(hào)star
ui-icon-tag標(biāo)簽tag
ui-icon-user用戶 / 人物user
ui-icon-video視頻 / 相機(jī)camera1


主題類 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-solo1100%ui-block-a嘗試一下
ui-grid-a250% / 50%ui-block-a|b嘗試一下
ui-grid-b333% / 33% / 33%ui-block-a|b|c 嘗試一下
ui-grid-c425% / 25% / 25% / 25%ui-block-a|b|c|d嘗試一下
ui-grid-d520% / 20% / 20% / 20% / 20%ui-block-a|b|c|d|e嘗試一下

更多信息可以查看 jQuery Mobile 網(wǎng)格  章節(jié)。