jQuery UI

jQuery UI 是建立在 jQuery JavaScript 庫上的一組用戶界面交互、特效、小部件及主題。無論您是創建高度交互的 Web 應用程序還是僅僅向窗體控件添加一個日期選擇器，jQuery UI 都是一個完美的選擇。

jQuery UI 包含了許多維持狀態的小部件（Widget），因此，它與典型的 jQuery 插件使用模式略有不同。所有的 jQuery UI 小部件（Widget）使用相同的模式，所以，只要您學會使用其中一個，您就知道如何使用其他的小部件（Widget）。

:::::::::::::::::::::::::::::::::::::::::::::::::

jQuery UI 簡介

jQuery UI 是一個建立在 jQuery JavaScript 庫上的小部件和交互庫，您可以使用它創建高度交互的 Web 應用程序。

。。。。。。。。

jQuery UI 特性

簡單易用：繼承 jQuery 簡易使用特性，提供高度抽象接口，短期改善網站易用性。

開源免費：采用 MIT & GPL 雙協議授權，輕松滿足自由產品至企業產品各種授權需求。

廣泛兼容：兼容各主流桌面瀏覽器。包括IE 6+、Firefox 2+、Safari 3+、Opera 9+、Chrome 1+。

輕便快捷：組件間相對獨立，可按需加載，避免浪費帶寬拖慢網頁打開速度。

標準先進：支持 WAI-ARIA，通過標準 XHTML 代碼提供漸進增強，保證低端環境可訪問性。

美觀多變：提供近 20 種預設主題，并可自定義多達 60 項可配置樣式規則，提供 24 種背景紋理選擇。

開放公開：從結構規劃到代碼編寫，全程開放，文檔、代碼、討論，人人均可參與。

強力支持：Google 為發布代碼提供 CDN 內容分發網絡支持。

完整漢化：開發包內置包含中文在內的 40 多種語言包。

http:/ /www.iis7.com/b/wzjk/

缺點、不足：

1.代碼不夠健壯：缺乏全面的測試用例，部分組件 Bugs 較多，不能達到企業級產品開發要求。

2.構架規劃不足：組件間 API 缺乏協調，缺乏配合使用幫助。

3.控件較少：相對于 Dojo、YUI、Ext JS 等成熟產品，可用控件較少，無法滿足復雜界面功能要求。

:::::::::::::::::::::::::::::::::::::::::::::::::::

jQuery UI 下載

一旦您對 jQuery UI 有了基本了解，您就可以親自嘗試一下。請從 jQuery UI 網站上的 Download Builder（下載生成器） 頁面下載 jQuery UI 的副本。

。。。。。。。。。

創建自定義 jQuery UI 下載

jQuery UI 的下載生成器（Download Builder）允許您選擇您需要下載的組件，為項目獲取一個自定義的庫版本。創建自定義 jQuery UI 下載需要以下三個步驟：

步驟 1：選擇您需要的組件

下載生成器（Download Builder）頁面的第一欄列出了 jQuery UI 所有的 JavaScript 組件分類：核心（UI Core）、交互部件（Interactions）、小部件（Widgets）和效果庫（Effects）。jQuery UI 中的一些組件依賴于其他組件，當選中這些組件時，它所依賴的其他組件也都會自動被選中。您所選的組件將會合并到一個 jQuery UI JavaScript 文件。

步驟 2：選擇一個主題或者自定義一個主題

在下載生成器（Download Builder）頁面，您將看到一個文本框，列出了一系列為 jQuery UI 小部件預先設計的主題。您可以從這些提供的主題中選擇一個，也可以使用 ThemeRoller 自定義一個主題（詳見后面章節的講解）。

高級主題設置： 下載生成器（Download Builder）的主題部分也為主題提供了一些高級配置設置。如果您打算在一個頁面上使用多個主題，這些字段會派上用場。如果您打算在一個頁面上只使用一個主題，那么您完全可以跳過這些設置。

步驟 3：選擇 jQuery UI 的版本

在下載生成器（Download Builder）中，最后一步是選擇一個版本號。這個步驟很重要，因為 jQuery UI 的版本是配合特定的 jQuery 版本設計的。目前的版本有：

jQuery UI 1.10.2 – 要求 jQuery 1.6 及以上版本。

jQuery UI 1.9.2 – 要求 jQuery 1.6 及以上版本。

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

jQuery UI 使用

一旦您下載了 jQuery UI，您將得到一個 zip 壓縮包，包含下列文件：

/css/

/development-bundle/

/js/

index.html

。。。。。。。。

在網頁上使用 jQuery UI

在文本編輯器中打開 index.html，您將看到引用了一些外部文件：主題、jQuery 和 jQuery UI。通常情況下，您需要在頁面中引用這三個文件，以便使用 jQuery UI 的窗體小部件和交互部件

<link rel="stylesheet" href="css/themename/jquery-ui.custom.css" />

<script src="js/jquery.min.js"></script>

<script src="js/jquery-ui.custom.min.js"></script>

一旦您引用了這些必要的文件，您就能向您的頁面添加一些 jQuery 小部件。

:::::::::::::::::::::::::::::::::::::::::::::::::::::::

jQuery UI 定制

jQuery UI 提供了多種定制方式。您已經看到下載生成器（Download Builder）如何定制一個值包含您所需選項的自定義版本，這里還提供了其他定制方式。

。。。。。。。。

jQuery UI 基礎：使用選項

jQuery UI 中的每個插件都有一個默認配置，默認配置值一般是根據最基本最常見的使用情況設置的。如果您想要讓某個插件設置成非默認值，您可以使用 "options" 重寫它的默認設置。選項是一組屬性，作為參數傳遞給 jQuery UI 小部件。請記得選項需放在大括號 { } 內。

。。。。。。。。

視覺定制：設計一個 jQuery UI 主題

如果您想要設計自己的主題，jQuery UI 提供了一個非常完美的用于主題定制的應用程序，這就是 ThemeRoller。

ThemeRoller 為所有使用 jQuery UI 小部件設計的元素提供了一個自定義接口。當您調整左欄中的"levers"，右欄中的小部件將根據您的設計進行顯示。ThemeRoller 的 Gallery 選項卡提供了一些與設計主題，與下載生成器（Download Builder）頁面提供的一樣。您可以基于這些主題做調整，或者直接下載。

:::::::::::::::::::::::::::::::::::::::::::::::::::::

jQuery UI 工作原理

jQuery UI 包含了許多維持狀態的小部件（Widget），因此，它與典型的 jQuery 插件使用模式略有不同。其安裝方式與大部分 jQuery 插件的安裝方式類似，jQuery UI 的小部件是基于 部件庫（Widget Factory） 創建的，小部件庫提供了通用的 API。所以，只要您學會使用其中一個，您就知道如何使用其他的小部件（Widget）。

。。。。。。。。

安裝

為了跟蹤部件的狀態，我們首先介紹一下小部件的全生命周期。當小部件安裝時，生命周期開始。我們只需要在一個或多個元素上調用插件，即安裝了小部件。

。。。。。。。。

方法

既然小部件已經初始化，我們就可以查詢它的狀態，或者在小部件上執行動作。所有初始化后的動作都以方法調用的形式進行。為了在小部件上調用一個方法，我們可以向 jQuery 插件傳遞方法的名稱。

。。。。。。。。

公共的方法，每個小部件都有它自己的一套基于小部件所提供功能的方法。然而，有一些方法是所有小部件都共同具有的。

option

disable，disable 方法禁用小部件，調用 disable 方法等同于設置 disabled 選項為 true。

enable，enable 方法是 disable 方法的對立面。，調用 enable 方法等同于設置 disabled 選項為 false。

如果您不再需要小部件，那么可以銷毀它，返回到最初的標記。這意味著小部件生命周期的終止。

一旦您銷毀了一個小部件，您就不能在該部件上調用任何方法，除非您再次初始化這個小部件。如果您要移除元素，可以直接通過 .remove()，也可以通過 .html() 或 .empty() 來實現，小部件會自動銷毀。

widget，一些小部件生成包裝器元素，或與原始元素斷開連接的元素。

。。。。。。。。

事件，所有的小部件都有跟他們各種行為相關的事件，用于在狀態改變時通知您。對于大多數的小部件，當事件被觸發時，名稱以小部件名稱為前綴。

每個事件都有一個相對應的回調，作為選項進行呈現。

。。。。。。。。

公共的事件，大多數事件是針對特定的小部件，所有的小部件都有一個公共的 create 事件。該事件在小部件被創建時即被觸發。

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

jQuery UI 主題

所有的 jQuery UI 插件都允許開發人員無縫集成 UI 小部件到他們網站或應用程序的外觀和感觀。每個插件通過 CSS 定義樣式，且包含了兩層樣式信息：標準的 jQuery UI CSS 框架 樣式和具體的插件樣式。

jQuery UI CSS 框架提供了語義表示的類，用來表明小部件內元素的角色，比如標題、內容或可點擊區域。這些在所有的小部件中都是一致的，一個可點擊的 tab（標簽頁）、accordion（折疊面板）或 button（按鈕）都有相同的 ui-state-default class，用來表明它們是可點擊的。當用戶鼠標懸浮在這些元素上面時，這個 class 就變成 ui-state-hover，當選中這些元素時則變成 ui-state-active。這些 class 的一致性使得所有部件中具有相似角色或交互狀態的元素在外觀表現上一致。

CSS 框架樣式封裝在一個單獨的文件中，名為 ui.theme.css。這個文件時通過 ThemeRoller 應用程序來修改的。框架樣式只包含影響外觀和感觀的屬性，只要是顏色、背景圖像、圖標等。所以這些是 "安全的" 樣式，不會影響到插件的功能。這種分隔意味著開發人員可以通過在 theme.css 文件中修改顏色和圖像來創建一個自定義的外觀和感觀。由于未來的插件或者 bug 修復將是可用的，這些不通過修改即可與主題一起使用。

由于框架樣式只覆蓋了外觀和感觀，所以還需要包含具體的插件樣式表，這些樣式表包括了所有額外的讓小部件具有功能性的結構樣式規則，比如尺寸、內邊距、外邊距、定位、浮動。每個插件的樣式表位于 themes/base 文件夾內，且配合插件進行命名，比如 "jquery.ui.accordion.css"。這些樣式必須認真編輯，因為它們與腳本一起提供了框架樣式的覆蓋。

我們鼓勵所有的開發人員創建 jQuery 插件，jQuery UI CSS 框架使得最終用戶更容易定制主題和使用插件。

。。。。。。。。。

主題化

下面列出了三種主題化 jQuery UI 插件的一般方法：

1.下載 ThemeRoller 主題：最早的創建主題的方式是使用 ThemeRoller 來生成和下載一個主題。這個應用程序將創建一個新的 ui.theme.css 文件和一個包含了所有必需的背景圖像及圖標精靈的 images 文件夾。這個方法是最早的創建和維護主題的方式，但是它對 ThemeRoller 中提供的選項限制了自定義。

2.修改 CSS 文件：為了對外觀和感觀做進一步的控制，您可以選擇從默認主題（Smoothness）開始，或者從一個由 ThemeRoller 生成的主題開始，然后調整 ui.theme.css 文件，或者任意一個獨立插件的樣式表。例如，您可以很容易地調整所有按鈕的角半徑為不同于其他 UI 組件的值，或者使用自定義設置為圖標精靈改變路徑。通過一點點的樣式范圍，您甚至可以在一個 UI 中同時使用多個主題。為了易于維護，建議只更改 ui.theme.css 文件和圖像。

3.重新編寫自定義的 CSS：為了最大程度地控制外觀和感觀，可以重新開始編寫每個插件的 CSS，而不使用框架類或者特定的插件樣式表。如果想要的外觀和感觀不能通過修改 CSS 來實現或者使用高度自定義的標記，那么就可以采用這個方法。這個方法要求在 CSS 方面有深厚的專業知識，且要求手動更新未來的插件。

。。。。。。。。。。

jQuery UI ThemeRoller

ThemeRoller 簡介

ThemeRoller 是一個 Web 應用程序，為 jQuery UI 設計和下載自定義主題提供了直觀的界面。您可以訪問 jQuery UI ThemeRoller 進行主題定制。

jQuery UI ThemeRoller 是由波士頓的 Filament Group, Inc 設計和開發的。

。。。。。。。。。

ThemeRoller 界面

ThemeRoller 的界面分為不同面板，各面板分別是全局字體和圓角半徑設置、小部件容器樣式、可點擊元素的互動狀態，及覆蓋和陰影的各種樣式。這些面板允許配置各種 CSS 屬性，比如字體尺寸、顏色、粗細、背景顏色和紋理、邊框顏色、文本顏色、圖標顏色、圓角半徑，等等。

。。。。。。。。

主題館（Gallery）：預先設計主題

ThemeRoller 主題可以通過永久鏈接 URL 進行查看，它包含一些預先設計的主題可供選擇。主題館（Gallery）可以通過位于應用程序界面頂端的標簽欄進行訪問。從主題館（Gallery）中，您可以預覽和下載主題，甚至可以選擇一個主題，然后切換到 "Roll Your Own" 標簽頁進行調整。

。。。。。。。。

下載主題

當您設計完主題后，您可以下載主題以便在項目中進行使用。ThemeRoller 在頂部有一個 "Download theme（下載主題）" 按鈕，可以生成一個 zip 壓縮包，包含了所有的主題相關文件。下載文件中的圖像是按照您的規格進行生成的，并保存為高質量的 PNG 文件。

您的主題將包含圖像和 CSS，組成了 jQuery UI CSS 框架的自定義版本，包含了所有插件的圖像和 CSS。

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

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-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 設計主題

。。。。。。。。。

文件結構

主題是以特定的方式來增加他們的易用性。通常，文件目錄結構如下所示：

themename/ – 您的主題必須完全包含在一個單獨的以主題名稱命名的文件夾內。

themename/themename.css – 這是基本的 CSS 文件。無論使用了哪個插件，該文件都必須在每個使用主題的頁面中引用。該文件應該是輕量級的，只包括要點。

themename/themename.pluginname.css – 您支持的每個插件都需要一個 CSS 文件。插件的名稱應直接包含在文件名中。例如，如果您為 tabs（標簽頁）插件進行主題化，則有：themename.tabs.js。

themename/img.png – 您的主題可以包含圖像。它們可以根據您的喜好進行命名，這里沒有特定的命名慣例。

。。。。。。。。。

定義樣式

為主題編寫樣式是非常簡單的，這是因為主題的靈活性。

所有的主題都應該有一個基本的 CSS class。這個主要的 class 允許用戶啟用禁用主題。您的根 class 的格式應該是 .ui-themename。

請注意，themename.css 文件只包括全局通用的樣式信息，特定插件的樣式信息不在這里進行定義。這里的樣式對所有主題都是適用的。不用擔心一個主題會占據多個文件 - 這些會在創建和下載的過程被簡化。

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

jQuery UI 部件庫（Widget Factory）

jQuery UI 部件庫（Widget Factory）是一個可擴展的基礎，所有的 jQuery UI 小部件都是在上面進行創建的。使用部件庫（Widget Factory）來創建插件，提供了方便的狀態管理，同時也為一些常見的任務提供了便捷，比如暴露插件方法，實例化后改變選項等。

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

jQuery UI 通過部件庫（Widget Factory）擴展小部件

jQuery UI 的部件庫（Widget Factory）使得創建小部件變得更加容易，這些小部件擴展了已有小部件的功能。這樣子您就能在已有的基礎上創建出功能強大的小部件，也可以在已有的小部件功能上做細微的調整。

為了支持擴展，$.widget() 可選性地接受作為父部件使用的小部件的構造函數。當指定一個父部件時，把它作為第二個參數進行傳遞，放在小部件名稱后面，在小部件原型對象前面。

。。。。。。。。。。。

擴展已有的方法

有時候，您需要調整或添加已有部件方法的行為。您可以把方法名稱指定為原型對象上需要重載的方法名稱。

。。。。。。。。。。。

使用 _super() 和 _superApply() 來訪問父部件

_super() 和 _superApply() 在父部件中調用了同樣的方法。

。。。。。。。。。。。

重定義小部件

jQuery UI 1.9 添加了重定義小部件的功能。因此，可以不用創建一個新的小部件，我們只需要傳遞 $.widget() 這樣一個已有的小部件名稱和構造函數即可。

。。。。。。。。。。。

小部件（Widgets）和多態性（Polymorphism）

當在小部件擴展及它們的插件之間進行交互時候，有一點值得注意，父部件的插件不能用來調用子部件元素上的方法

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

jQuery UI 小部件（Widget）方法調用

小部件（Widget）是通過 部件庫（Widget Factory） 使用方法來改變他們初始化后的狀態和執行動作而被創建的。有兩種調用小部件方法的方式 - 通過部件庫（Widget Factory）創建的插件，或者通過調用元素實例對象上的方法。

。。。。。。。。。。。

插件調用，使用小部件的插件調用方法，把方法名稱以字符串形式進行傳遞。如果方法要求參數 ，請作為額外的參數傳遞給插件。

。。。。。。。。。。。

返回類型，大多數通過小部件的插件調用的方法將返回一個 jQuery 對象，所以方法調用可以通過額外的 jQuery 方法鏈接。

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

jQuery UI 為什么使用部件庫（Widget Factory）

編寫 jQuery 插件與向 jQuery.prototype（通常顯示為 $.fn）添加方法一樣簡單，且需要遵循一些簡單的規則，比如返回 this。所以為什么會存在部件庫（Widget Factory）？

。。。。。。。。。。。

無狀態 vs. 有狀態插件

大多數 jQuery 插件是無狀態的，它們執行一些動作即完成了它們的任務。例如，如果您使用 .text( "hello" ) 設置元素的文本，沒有安裝階段，結果都是一樣的。對于這種類型的插件，它只是擴展了 jQuery 的原型。

然而，一些插件是有狀態的，它們有全生命周期、維持狀態以及對變化的反應。這些插件需要大量專門的代碼來初始化和狀態管理（有時是銷毀）。這就導致出現了用于創建有狀態插件的模板。更糟糕的是，每個插件的作者按照不同的方式進行管理插件的生命周期和狀態，這就導致了不同的插件有不同的 API 樣式。部件庫（Widget Factory）旨在解決這些問題，它移除了模板，并為插件創建了一個一致的 API。

。。。。。。。。。。。

一致的 API

部件庫（Widget Factory）定義了如何創建和銷毀小部件，獲取和設置選項，調用方法，以及監聽小部件觸發的事件。通過使用部件庫（Widget Factory）來創建有狀態的插件，會自動符合定義的標準，讓新用戶更容易使用您的插件。另外，部件庫（Widget Factory）還能實現定義接口的功能。如果您對部件庫（Widget Factory）提供的 API 還不熟悉

。。。。。。。。。。。

在初始化時設置選項

當您創建一個接受選項的插件時，您應該為盡可能多的選項定義 defaults。然后在初始化時，把用戶提供的選項與 defaults 進行合并。您也可以暴露 defaults，這樣用戶就可以更改默認值。

。。。。。。。。。。。