Latest web development tutorials

jQuery UI CSS 框架API

jQuery UI CSS 框架

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

框架類

下面的CSS類根據樣式是否是固定的結構化的,或者是否是可主題化的(顏色、字體、背景等),分別定義在ui.core.cssui.theme.css兩個文件中。 這些類被設計來用於用戶界面元素,以便獲得整個應用程序的視覺一致性,可通過jQuery UI ThemeRoller 對組件進行主題化。

佈局助手

  • .ui-helper-hidden :對元素應用display: none
  • .ui-helper-hidden-accessible :對元素應用訪問隱藏(通過頁面絕對定位)。
  • .ui-helper-reset :UI元素的基本樣式重置。 重置的元素比如: paddingmargintext-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)進行應用的(可以是正數,也可以是負數)。