jQuery UI

jQuery UI是一套JavaScript 函式库，提供抽象化、可自订主题的GUI控制项与动画效果。基于jQuery JavaScript函式库，可用来建构互动式的网际网路应用程式。在2007年9月约翰·雷西格于jquery.com部落格里的一篇文章里正式公诸于世^[7]。最新的版本需要jQuery 2.1.1或更新的版本。^[8]

jQuery UI

开发者	Paul Bakaus Scott González Jörn Zaefferer Felix Nagel Mike Sherov Rafael Xavier de Souza[1]
当前版本	1.14.1[2][3][4][5]（2024年10月30日，5个月前）
源代码库	github.com/jquery/jquery-ui
编程语言	JavaScript
类型	插件
许可协议	MIT许可证[6]
网站	https://jqueryui.com/

功能

以1.9.0版本为例^[9]。

互动

• 拖曳（Draggable）–让元素可以用滑鼠拖曳。
• 拖放（Droppable）–让控制项可以接受其他拖曳进来的元素。
• 调整大小（Resizable）–让元素可以调整大小^[10]。
• 选取（Selectable）–提供进阶的大量元素选择功能。
• 排序（Sortable）–让列表可以更容易排序。

控制项

jQuery UI的所有控制项都能自订主题样式^[11]。

• 手风琴式选单（Accordion）–如手风琴般可伸缩的控制项。
• 自动完成（Autocomplete）–根据使用者的输入来自动完成文字栏。
• 按钮（Button）–增强按钮外观，将单选与复选控制项转变成按钮型式。
• 日期选择器（Datepicker）–进阶的日期选择工具。
• 对话框（Dialog） –在页面最上层显示对话框。
• 选单（Menu） - 显示多阶层式的选单。
• 进度条（Progressbar） –动态与静态的进度指示条。
• 滑动条（Slider）–完全可以自订的滑动条与各种功能^[12]。
• 微调选择器（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元素。