jQuery UI CSS 框架 API

jQuery UI CSS 框架

jQuery UI 包含了一個強大的 CSS 框架，為了創建自訂 jQuery 小部件而設計的。框架包含了通用的使用者介面所需的類，且可使用 jQuery UI ThemeRoller 進行維護。透過使用 jQuery UI CSS 框架來建立您自己的 UI 元件。您需採用共享標記公約，以便在插件社群的程式碼整合。

框架類別

下面的CSS 類別根據樣式是否是固定的結構化的，或者是否是可主題化的（顏色、字體、背景等），分別定義在 ui.core.css 和ui.theme.css 兩個檔案中。這些類別被設計來用於使用者介面元素，以便獲得整個應用程式的視覺一致性，可透過 jQuery UI ThemeRoller 對元件進行主題化。

佈局助手

.ui-helper-hidden：對元素應用 display: none。
.ui-helper-hidden-accessible：對元素應用程式存取隱藏（透過頁面絕對定位）。
.ui-helper-reset：UI 元素的基本樣式重設。重置的元素例如：padding、margin、text-decoration、list-style，等等。
.ui-helper-clearfix：對父元素套用浮動包裝屬性。
.ui-helper-zfix：對 <iframe> 元素應用 iframe "fix" CSS。

小部件容器

.ui-widget：對所有小部件的外部容器應用的 Class。對小工具套用字體和字體尺寸，同時也對自表單元素套用相同的字體和 1em 的字體尺寸，以應對 Windows 瀏覽器中的繼承問題。
.ui-widget-header：對標題容器套用的 Class。對元素及其子元素的文字、連結、圖示套用標題容器樣式。
.ui-widget-content：內容容器所應用的 Class。對元素及其子元素的文字、連結、圖示套用內容容器樣式。（可應用到標題的父元素或同級元素）

互動狀態

.ui-state-default：可點選按鈕元素套用的Class。對元素及其子元素的文字、連結、圖示套用 "clickable default" 容器樣式。
.ui-state-hover：當滑鼠懸浮在可點擊按鈕元素上時套用的 Class。對元素及其子元素的文字、連結、圖示套用 "clickable hover" 容器樣式。
.ui-state-focus：當鍵盤聚焦在可點選按鈕元素上時所套用的 Class。對元素及其子元素的文字、連結、圖示套用 "clickable hover" 容器樣式。
.ui-state-active：當滑鼠點擊可點選按鈕元素上時套用的 Class。對元素及其子元素的文字、連結、圖示套用 "clickable active" 容器樣式。

互動提示 Cues

.ui-state-highlight：對高亮或選取元素所應用的 Class。對元素及其子元素的文字、連結、圖示套用 "highlight" 容器樣式。
.ui-state-error：對錯誤訊息容器元素所應用的 Class。對元素及其子元素的文字、連結、圖示套用 "error" 容器樣式。
.ui-state-error-text：對只有無背景的錯誤文字顏色所應用的 Class。可用於表單標籤，也可以對子圖示套用錯誤圖示顏色。
.ui-state-disabled：對已停用的 UI 元素套用一個暗淡的不透明度。意味著對一個已經定義樣式的元素添加額外的樣式。
.ui-priority-primary：對第一優先權的按鈕套用的 Class。應用粗體文字。
.ui-priority-secondary：對第二優先權的按鈕套用的 Class。應用正常粗細的文本，對元素應用輕微的透明度。

圖示

狀態與圖片

#.ui-icon：對圖示元素套用的基本Class。設定尺寸為 16px 方塊，隱藏內部文本，對 "content" 狀態的精靈圖片設定背景圖片。 注意： .ui-icon class 將根據它的父容器得到一個不同的精靈背景影像。例如，ui-state-default 容器內的 ui-icon 元素將根據 ui-state-default 的圖示顏色進行著色。

圖示類型

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

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

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

其他視覺效果

圓角半徑助手

#.ui-corner-tl：對元素的左上角應用圓角半徑。
.ui-corner-tr：對元素的右上角套用圓角半徑。
.ui-corner-bl：對元素的左下角套用圓角半徑。
.ui-corner-br：對元素的右下角套用圓角半徑。
.ui-corner-top：對元素上邊的左右角套用圓角半徑。
.ui-corner-bottom：對元素下邊的左右角套用圓角半徑。
.ui-corner-right：對元素右邊的上下角套用圓角半徑。
.ui-corner-left：對元素左邊的上下角套用圓角半徑。
.ui-corner-all：對元素的所有四個角落套用圓角半徑。

覆蓋& 陰影

.ui-widget-overlay：對覆蓋螢幕套用100% 寬度和高度，同時設定背景顏色/紋理和螢幕不透明度。
.ui-widget-shadow：對覆蓋應用的Class，設定了不透明度、上偏移/左偏移，以及陰影的"厚度" 。厚度是透過對陰影所有邊設置內邊距（padding）進行應用的。偏移是透過設定上外邊距（margin）和左外邊距（margin）進行應用的（可以是正數，也可以是負數）。

jQuery UI CSS 框架 API