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)進行應用的(可以是正數,也可以是負數)。