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）進行應用的（可以是正數，也可以是負數）。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！