jQuery UI 中文參考手冊

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

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

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

jQuery UI的優缺點：

優點：

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

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

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

4、強力支持，Google 為發布代碼提供 CDN 內容分發網路支援。

缺點：

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

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

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

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

jQuery UI功能

以1.9.0版本為例。

互動

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

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

• 調整大小（Resizable）–讓元素可以調整大小。

• 選取（Selectable）–提供進階的大量元素選擇功能。

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

控制項

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

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

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

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

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

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

• 選單（Menu） - 顯示多層次結構式的選單。

• 進度列（Progressbar） –動態與靜態的進度指示條。

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

• 微調選擇器（Spinner） - 上下控制的數位微調輸入列。

• 頁籤（Tabs）–頁籤切換控件，可以內嵌或動態載入內容。

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

效果

• 顏色動畫（Color Animation）–產生顏色轉換的動畫效果。

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

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

• 切換（Toggle）–切換效果開關。

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

工具

位置（Position） –根據另一個元素來設定目標元素的位置（對齊）。

本jQuery UI教學手冊涵蓋的內容

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

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

其它jQuery UI相關學習參考資源

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

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