在《jQuery UI 中文參考手冊》中，jQuery UI 是建立在 jQuery JavaScript 函式庫上的一組使用者介面互動、特效、小工具及主題。無論您是建立高度互動的 Web 應用程式還是僅向窗體控制項新增一個日期選擇器，jQuery UI 都是一個完美的選擇。 jQuery UI 包含了許多維持狀態(tài)的小部件（Widget），因此，它與典型的 jQuery 外掛程式使用模式略有不同。

jQuery UI是一套JavaScript?函式庫，提供抽象化、可自訂主題的GUI控制與動畫效果?；秊Query?JavaScript庫，可用來建構(gòu)互動式的網(wǎng)路應用程式。在2007年9月約翰·雷西格於jquery.com部落格裡的一篇文章裡正式公諸於世。最新的版本需要jQuery?2.1.1或更新的版本。

提示：在開始學習?jQuery UI之前，您需要具備HTML、CSS、JavaScript#基礎(chǔ)知識。

jQuery UI的優(yōu)缺點：

優(yōu)點：

#1、簡單易用，繼承jQuery 簡易使用特性，提供高度抽象接口，短期改善網(wǎng)站易用性。

2、輕巧快捷，元件間相對獨立，可按需加載，避免浪費頻寬拖慢網(wǎng)頁開啟速度。

3、標準先進，支援 WAI-ARIA，透過標準 XHTML 程式碼提供漸進增強，保證低階環(huán)境可訪問性。

4、強力支持，Google 為發(fā)布代碼提供 CDN 內(nèi)容分發(fā)網(wǎng)路支援。

缺點：

1、程式碼不夠健壯：缺乏全面的測試案例，部分元件 Bugs 較多，無法達到企業(yè)級產(chǎn)品開發(fā)要求。

2、架構(gòu)規(guī)劃不足：組件間 API 缺乏協(xié)調(diào)，缺乏配合使用協(xié)助。

3、控制較少：相對於 Dojo、YUI、Ext JS 等成熟產(chǎn)品，可用控制項較少，無法滿足複雜介面功能需求。

提示：我們的jQuery?UI教學將協(xié)助您逐步學習如何掌握並使用jQuery?UI，如果您有任何疑問，請前往PHP中文網(wǎng)jQuery?UI社群提出你的問題，會有熱心網(wǎng)友為你解答。

jQuery UI功能

以1.9.0版本為例。

互動

• 拖曳（Draggable）–讓元素可以用滑鼠拖曳。

• 拖曳（Droppable）–讓控制項可以接受其他拖曳進來的元素。

• 調(diào)整大?。≧esizable）–讓元素可以調(diào)整大小。

• 選?。⊿electable）–提供進階的大量元素選擇功能。

• 排序（Sortable）–讓清單可以更容易排序。

控制項

• jQuery UI的所有控制項都能自訂主題樣式。

• 手風琴式選單（Accordion）–如手風琴般可伸縮的控制。

• 自動完成（Autocomplete）–依照使用者的輸入來自動完成文字列。

• 按鈕（Button）–增強按鈕外觀，將單選與複選控制轉(zhuǎn)換成按鈕類型。

• 日期選擇器（Datepicker）–進階的日期選擇工具。

• 對話方塊（Dialog） –在頁面最上層顯示對話方塊。

• 選單（Menu） - 顯示多層次結(jié)構(gòu)式的選單。

• 進度列（Progressbar） –動態(tài)與靜態(tài)的進度指示條。

• 滑動條（Slider）–完全可以自訂的滑動條與各種功能。

• 微調(diào)選擇器（Spinner） - 上下控制的數(shù)位微調(diào)輸入列。

• 頁籤（Tabs）–頁籤切換控件，可以內(nèi)嵌或動態(tài)載入內(nèi)容。

• 工具提示（Tooltip） - 彈出式提示框。

效果

• 顏色動畫（Color Animation）–產(chǎn)生顏色轉(zhuǎn)換的動畫效果。

• 切換Class、新增Class、移除Class、開關(guān)Class –讓頁面上元素樣式轉(zhuǎn)換時有動畫效果。

• 效果（Effects）–各種效果（顯示、下拉、爆炸、淡入等等）。

• 切換（Toggle）–切換效果開關(guān)。

• 隱藏、顯示 - 使用上述的效果。

工具

位置（Position） –根據(jù)另一個元素來設(shè)定目標元素的位置（對齊）。

本jQuery UI教學手冊涵蓋的內(nèi)容

本jQuery UI教學手冊涵蓋所有jQuery UI初級到高級知識，包含了jQuery UI入門、jQuery UI主、jQuery UI零件庫等知識。

提示：本教學的每一章都包含了很多jQuery UI實例，您可以直接點擊?"運行實例"?按鈕在線查看結(jié)果或直接使用線上編輯器進行測試。這些範例將幫助您更好地理解和使用jQuery UI。

其它jQuery UI相關(guān)學習參考資源

除了本頁面右邊的知識拓展，也為大家精選了以下資源

• 獨孤九賤(6)_jQuery影片教學