jQuery UI

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

jQuery UI

開發者	Paul Bakaus Scott González Jörn Zaefferer Felix Nagel Mike Sherov Rafael Xavier de Souza^[1]
当前版本	1.13.2 (2022年7月14日；穩定版本)^[2]^[3]
源代码库	github.com/jquery/jquery-ui
编程语言	JavaScript
类型	插件
许可协议	MIT許可證^[4]
网站	https://jqueryui.com/

功能

以1.9.0版本為例^[7]。

互動

• 拖曳（Draggable）–讓元素可以用滑鼠拖曳。
• 拖放（Droppable）–讓控制項可以接受其他拖曳進來的元素。
• 調整大小（Resizable）–讓元素可以調整大小^[8]。
• 選取（Selectable）–提供進階的大量元素選擇功能。
• 排序（Sortable）–讓列表可以更容易排序。

控制項

jQuery UI的所有控制項都能自訂主題樣式^[9]。

• 手風琴式選單（Accordion）–如手風琴般可伸縮的控制項。
• 自動完成（Autocomplete）–根據使用者的輸入來自動完成文字欄。
• 按鈕（Button）–增強按鈕外觀，將單選與複選控制項轉變成按鈕型式。
• 日期選擇器（Datepicker）–進階的日期選擇工具。
• 對話框（Dialog） –在頁面最上層顯示對話框。
• 選單（Menu） - 顯示多階層式的選單。
• 進度條（Progressbar） –動態與靜態的進度指示條。
• 滑動條（Slider）–完全可以自訂的滑動條與各種功能^[10]。
• 微調選擇器（Spinner） - 上下控制的數字微調輸入欄。
• 頁籤（Tabs）–頁籤切換控制項，可以內嵌或動態載入內容。
• 工具提示（Tooltip） - 彈出式提示框。

效果

• 顏色動畫（Color Animation）–產生顏色轉變的動畫效果。
• 切換Class、新增Class、移除Class、開關Class –讓頁面上元素樣式轉變時有動畫效果。
• 效果（Effects）–各種效果（顯示、下拉、爆炸、淡入等等）。
• 切換（Toggle）–切換效果開關。
• 隱藏、顯示 - 使用上述的效果。

工具

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

範例

// 讓#draggable可以拖曳 $(function() {  $("#draggable").draggable(); }); 

<div id="draggable" style="width:150px;height:150px;padding:0.5em" class="ui-widget-content"> <p>Drag me around</p> </div> 

這段程式碼會讓使用者的滑鼠游標可以拖曳ID為「draggable」的DIV元素。

参考文献

1. jQuery UI Team. jqueryui.com. The jQuery Foundation. [5 February 2016]. （原始内容存档于2012-02-29）. 
2. Release 1.13.2. 2022年7月14日 [2022年10月24日]. 
3. https://registry.npmjs.com/jquery-ui; 检索日期: 2023年3月3日.
4. License. jQuery.com. The jQuery Foundation. [2014-06-12]. （原始内容于2021-01-23）. 
5. John Resig. jQuery UI: Interractions and plug-ins. jQuery blog. 17 September 2007 [12 August 2012]. （原始内容于2012-08-18）. 
6. Build Your Download. [2012-09-02]. （原始内容于2021-02-04）. 
7. jQuery UI Demos. jQuery UI. [14 October 2012]. （原始内容存档于2012-05-13）. 
8. . Innovative PHP. 16 June 2011 [12 August 2012]. （原始内容存档于2011年12月13日）. 
9. jQuery UI: ThemeRoller. jQuery UI. [12 August 2012]. 
10. . Innovative PHP. 21 July 2011 [12 August 2012]. （原始内容存档于2012年7月27日）. 

外部連結

• 官方網站（页面存档备份，存于互联网档案馆）（英文）