jQuery UI CSS 框架

jQuery UI 包含了一個強大的 CSS 框架，為了創(chuàng)建自定義 jQuery 小部件而設(shè)計的。框架包含了通用的用戶界面所需的類，且可使用 jQuery UI ThemeRoller 進行維護。通過使用 jQuery UI CSS 框架創(chuàng)建您自己的 UI 組件。您需采用共享標記公約，以便在插件社區(qū)的代碼集成。

框架類

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

布局助手

• .ui-helper-hidden：對元素應(yīng)用 display: none。

• .ui-helper-hidden-accessible：對元素應(yīng)用訪問隱藏（通過頁面絕對定位）。

• .ui-helper-reset：UI 元素的基本樣式重置。重置的元素比如：padding、margin、text-decoration、list-style，等等。

• .ui-helper-clearfix：對父元素應(yīng)用浮動包裝屬性。

• .ui-helper-zfix：對 <iframe> 元素應(yīng)用 iframe "fix" CSS。

小部件容器

• .ui-widget：對所有小部件的外部容器應(yīng)用的 Class。對小部件應(yīng)用字體和字體尺寸，同時也對自表單元素應(yīng)用相同的字體和 1em 的字體尺寸，以應(yīng)對 Windows 瀏覽器中的繼承問題。

• .ui-widget-header：對標題容器應(yīng)用的 Class。對元素及其子元素的文本、鏈接、圖標應(yīng)用標題容器樣式。

• .ui-widget-content：對內(nèi)容容器應(yīng)用的 Class。對元素及其子元素的文本、鏈接、圖標應(yīng)用內(nèi)容容器樣式。（可應(yīng)用到標題的父元素或者同級元素）

交互狀態(tài)

• .ui-state-default：對可點擊按鈕元素應(yīng)用的 Class。對元素及其子元素的文本、鏈接、圖標應(yīng)用 "clickable default" 容器樣式。

• .ui-state-hover：當鼠標懸浮在可點擊按鈕元素上時應(yīng)用的 Class。對元素及其子元素的文本、鏈接、圖標應(yīng)用 "clickable hover" 容器樣式。

• .ui-state-focus：當鍵盤聚焦在可點擊按鈕元素上時應(yīng)用的 Class。對元素及其子元素的文本、鏈接、圖標應(yīng)用 "clickable hover" 容器樣式。

• .ui-state-active：當鼠標點擊可點擊按鈕元素上時應(yīng)用的 Class。對元素及其子元素的文本、鏈接、圖標應(yīng)用 "clickable active" 容器樣式。

交互提示 Cues

• .ui-state-highlight：對高亮或者選中元素應(yīng)用的 Class。對元素及其子元素的文本、鏈接、圖標應(yīng)用 "highlight" 容器樣式。

• .ui-state-error：對錯誤消息容器元素應(yīng)用的 Class。對元素及其子元素的文本、鏈接、圖標應(yīng)用 "error" 容器樣式。

• .ui-state-error-text：對只有無背景的錯誤文本顏色應(yīng)用的 Class?？捎糜诒韱螛撕?，也可以對子圖標應(yīng)用錯誤圖標顏色。

• .ui-state-disabled：對禁用的 UI 元素應(yīng)用一個暗淡的不透明度。意味著對一個已經(jīng)定義樣式的元素添加額外的樣式。

• .ui-priority-primary：對第一優(yōu)先權(quán)的按鈕應(yīng)用的 Class。應(yīng)用粗體文本。

• .ui-priority-secondary：對第二優(yōu)先權(quán)的按鈕應(yīng)用的 Class。應(yīng)用正常粗細的文本，對元素應(yīng)用輕微的透明度。

圖標

狀態(tài)和圖像

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

圖標類型

在聲明 .ui-icon class 之后，接著您可以聲明一個秒速圖標類型的 class。通常情況下，圖標 class 遵循語法 .ui-icon-{icon type}-{icon sub description}-{direction}。

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

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

其他視覺效果

圓角半徑助手

• .ui-corner-tl：對元素的左上角應(yīng)用圓角半徑。

• .ui-corner-tr：對元素的右上角應(yīng)用圓角半徑。

• .ui-corner-bl：對元素的左下角應(yīng)用圓角半徑。

• .ui-corner-br：對元素的右下角應(yīng)用圓角半徑。

• .ui-corner-top：對元素上邊的左右角應(yīng)用圓角半徑。

• .ui-corner-bottom：對元素下邊的左右角應(yīng)用圓角半徑。

• .ui-corner-right：對元素右邊的上下角應(yīng)用圓角半徑。

• .ui-corner-left：對元素左邊的上下角應(yīng)用圓角半徑。

• .ui-corner-all：對元素的所有四個角應(yīng)用圓角半徑。

覆蓋 & 陰影

• .ui-widget-overlay：對覆蓋屏幕應(yīng)用 100% 寬度和高度，同時設(shè)置背景顏色/紋理和屏幕不透明度。

• .ui-widget-shadow：對覆蓋應(yīng)用的 Class，設(shè)置了不透明度、上偏移/左偏移，以及陰影的 "厚度"。厚度是通過對陰影所有邊設(shè)置內(nèi)邊距（padding）進行應(yīng)用的。偏移是通過設(shè)置上外邊距（margin）和左外邊距（margin）進行應(yīng)用的（可以是正數(shù)，也可以是負數(shù)）。