# CSS 框架(CSS Framework)
下面是 jQuery UI 使用的 Class 名稱列表。這些 Class 用來創建跨應用程序的視覺一致性,且允許組件通過 [jQuery UI ThemeRoller](http://jqueryui.com/themeroller/) 進行主題化。下面的 CSS 類根據樣式是否是固定的結構化的,或者是否是可主題化的(顏色、字體、背景等),分別定義在 ui.core.css 和 ui.theme.css 兩個文件中。
### 布局助手
* `.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-front`:應用 z-index 來管理屏幕上多個小部件的堆疊,如需了解更多詳情,請查看 [堆疊元素(Stacking Elements)](/jqueryui/api-stacking-elements.html) 頁面。
### 小部件容器
* `.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](http://jqueryui.com/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)進行應用的(可以是正數,也可以是負數)。
- 索引
- Effects
- .addClass()
- Blind Effect
- Bounce Effect
- Clip Effect
- Color Animation
- Drop Effect
- Easings
- .effect()
- Explode Effect
- Fade Effect
- Fold Effect
- .hide()
- Highlight Effect
- Puff Effect
- Pulsate Effect
- .removeClass()
- Scale Effect
- Shake Effect
- .show()
- Size Effect
- Slide Effect
- .switchClass()
- .toggle()
- .toggleClass()
- Transfer Effect
- Effect Core
- .addClass()
- Color Animation
- .effect()
- .hide()
- .removeClass()
- .show()
- .switchClass()
- .toggle()
- .toggleClass()
- Interactions
- Draggable Widget
- Droppable Widget
- Mouse Interaction
- Resizable Widget
- Resizable Widget
- Selectable Widget
- Sortable Widget
- Method Overrides
- .addClass()
- .focus()
- .hide()
- .position()
- .removeClass()
- .show()
- .toggle()
- .toggleClass()
- Methods
- .disableSelection()
- .effect()
- .enableSelection()
- .focus()
- .hide()
- .position()
- .removeUniqueId()
- .scrollParent()
- .show()
- .toggle()
- .uniqueId()
- .zIndex()
- Selectors
- :data() Selector
- :focusable Selector
- :tabbable Selector
- Theming
- CSS 框架(CSS Framework)
- Icons
- Stacking Elements
- UI Core
- :data() Selector
- .disableSelection()
- .enableSelection()
- .focus()
- :focusable Selector
- .removeUniqueId()
- .scrollParent()
- :tabbable Selector
- .uniqueId()
- .zIndex()
- Utilities
- Easings
- Widget Factory
- Widget Plugin Bridge
- Mouse Interaction
- .position()
- Widgets
- Accordion Widget
- Autocomplete Widget
- Button Widget
- Datepicker Widget
- Dialog Widget
- Menu Widget
- Progressbar Widget
- Slider Widget
- Spinner Widget
- Tabs Widget
- Tooltip Widget