jQuery UI CSS 框架 API

jQuery UI CSS 框架 API

jQuery UI CSS 框架

jQuery UI的CSS框架功能強(qiáng)大，它是為了創(chuàng)建自定義jQuery小部件而設(shè)計(jì)的。框架包括很多適合多數(shù)用戶(hù)界面需要的CSS類(lèi)，且可使用jQuery UI ThemeRoller進(jìn)行維護(hù)。通過(guò)使用jQuery UI CSS框架創(chuàng)建您自己的UI組件。您需采用共享標(biāo)記公約，以便在插件社區(qū)的代碼集成。

框架類(lèi)

以下的CSS類(lèi)根據(jù)樣式是否是固定的結(jié)構(gòu)化的，或者是否是可主題化的（顏色、字體、背景等），來(lái)分別定義在ui.core.css和ui.theme.css兩個(gè)文件中。這些類(lèi)被設(shè)計(jì)來(lái)用于用戶(hù)界面元素，以便獲得整個(gè)應(yīng)用程序的視覺(jué)一致性，可通過(guò)jQuery UI ThemeRoller對(duì)組件進(jìn)行主題化。

布局助手

• .ui-helper-hidden：對(duì)元素應(yīng)用display: none。
• .ui-helper-hidden-accessible：對(duì)元素應(yīng)用訪(fǎng)問(wèn)隱藏（通過(guò)頁(yè)面絕對(duì)定位）。
• .ui-helper-reset：UI元素的基本樣式重置。重置的元素比如：padding、margin、text-decoration、list-style等等。
• .ui-helper-clearfix：對(duì)父元素應(yīng)用浮動(dòng)包裝屬性。
• .ui-helper-zfix：對(duì)<iframe>元素應(yīng)用iframe "fix" CSS。

小部件容器

• .ui-widget：對(duì)所有小部件的外部容器應(yīng)用的Class。對(duì)小部件應(yīng)用字體和字體尺寸，同時(shí)也對(duì)自表單元素應(yīng)用相同的字體和1em的字體尺寸，以應(yīng)對(duì) Windows瀏覽器中的繼承問(wèn)題。
• .ui-widget-header：對(duì)標(biāo)題容器應(yīng)用的Class。對(duì)元素及其子元素的文本、鏈接、圖標(biāo)應(yīng)用標(biāo)題容器樣式。
• .ui-widget-content：對(duì)內(nèi)容容器應(yīng)用的Class。對(duì)元素及其子元素的文本、鏈接、圖標(biāo)應(yīng)用內(nèi)容容器樣式。（可應(yīng)用到標(biāo)題的父元素或者同級(jí)元素）

交互狀態(tài)

• .ui-state-default：對(duì)可點(diǎn)擊按鈕元素應(yīng)用的Class。對(duì)元素及其子元素的文本、鏈接、圖標(biāo)應(yīng)用"clickable default"容器樣式。
• .ui-state-hover：當(dāng)鼠標(biāo)懸浮在可點(diǎn)擊按鈕元素上時(shí)應(yīng)用的Class。對(duì)元素及其子元素的文本、鏈接、圖標(biāo)應(yīng)用"clickable hover"容器樣式。
• .ui-state-focus：當(dāng)鍵盤(pán)聚焦在可點(diǎn)擊按鈕元素上時(shí)應(yīng)用的Class。對(duì)元素及其子元素的文本、鏈接、圖標(biāo)應(yīng)用"clickable hover"容器樣式。
• .ui-state-active：當(dāng)鼠標(biāo)點(diǎn)擊可點(diǎn)擊按鈕元素上時(shí)應(yīng)用的Class。對(duì)元素及其子元素的文本、鏈接、圖標(biāo)應(yīng)用"clickable active"容器樣式。

交互提示 Cues

• .ui-state-highlight：對(duì)高亮或者選中元素應(yīng)用的Class。對(duì)元素及其子元素的文本、鏈接、圖標(biāo)應(yīng)用"highlight"容器樣式。
• .ui-state-error：對(duì)錯(cuò)誤消息容器元素應(yīng)用的Class。對(duì)元素及其子元素的文本、鏈接、圖標(biāo)應(yīng)用"error"容器樣式。
• .ui-state-error-text：對(duì)只有無(wú)背景的錯(cuò)誤文本顏色應(yīng)用的Class?？捎糜诒韱螛?biāo)簽，也可以對(duì)子圖標(biāo)應(yīng)用錯(cuò)誤圖標(biāo)顏色。
• .ui-state-disabled：對(duì)禁用的UI元素應(yīng)用一個(gè)暗淡的不透明度。意味著對(duì)一個(gè)已經(jīng)定義樣式的元素添加額外的樣式。
• .ui-priority-primary：對(duì)第一優(yōu)先權(quán)的按鈕應(yīng)用的Class。應(yīng)用粗體文本。
• .ui-priority-secondary：對(duì)第二優(yōu)先權(quán)的按鈕應(yīng)用的Class。應(yīng)用正常粗細(xì)的文本，對(duì)元素應(yīng)用輕微的透明度。

圖標(biāo)

狀態(tài)和圖像

• .ui-icon：對(duì)圖標(biāo)元素應(yīng)用的基本Class。設(shè)置尺寸為16px方塊，隱藏內(nèi)部文本，對(duì)"content"狀態(tài)的精靈圖像設(shè)置背景圖像。注意： .ui-iconclass將根據(jù)它的父容器得到一個(gè)不同的精靈背景圖像。例如，ui-state-default容器內(nèi)的ui-icon元素將根據(jù)ui-state-default的圖標(biāo)顏色進(jìn)行著色。

圖標(biāo)類(lèi)型

在聲明.ui-iconclass之后，接著您可以聲明一個(gè)秒速圖標(biāo)類(lèi)型的class。通常情況下，圖標(biāo)class遵循語(yǔ)法 .ui-icon-{icon type}-{icon sub description}-{direction}。

例如，一個(gè)指向右側(cè)的三角形圖標(biāo)，如下所示：.ui-icon-triangle-1-e

jQuery UI的ThemeRoller在它的預(yù)覽一欄中提供了全套的CSS框架圖標(biāo)。將鼠標(biāo)懸浮在圖標(biāo)上可查看class名稱(chēng)。

其他視覺(jué)效果

圓角半徑助手

• .ui-corner-tl：對(duì)元素的左上角應(yīng)用圓角半徑。
• .ui-corner-tr：對(duì)元素的右上角應(yīng)用圓角半徑。
• .ui-corner-bl：對(duì)元素的左下角應(yīng)用圓角半徑。
• .ui-corner-br：對(duì)元素的右下角應(yīng)用圓角半徑。
• .ui-corner-top：對(duì)元素上邊的左右角應(yīng)用圓角半徑。
• .ui-corner-bottom：對(duì)元素下邊的左右角應(yīng)用圓角半徑。
• .ui-corner-right：對(duì)元素右邊的上下角應(yīng)用圓角半徑。
• .ui-corner-left：對(duì)元素左邊的上下角應(yīng)用圓角半徑。
• .ui-corner-all：對(duì)元素的所有四個(gè)角應(yīng)用圓角半徑。

覆蓋 & 陰影

• .ui-widget-overlay：對(duì)覆蓋屏幕應(yīng)用100%寬度和高度，同時(shí)設(shè)置背景顏色/紋理和屏幕不透明度。
• .ui-widget-shadow：對(duì)覆蓋應(yīng)用的Class，設(shè)置了不透明度、上偏移/左偏移，以及陰影的 "厚度"。厚度是通過(guò)對(duì)陰影所有邊設(shè)置內(nèi)邊距（padding）進(jìn)行應(yīng)用的。偏移是通過(guò)設(shè)置上外邊距（margin）和左外邊距（margin）進(jìn)行應(yīng)用的（可以是正數(shù)，也可以是負(fù)數(shù)）。