jQuery UI 简介

jQuery UI 简介

jQuery UI 是基于 jQuery JavaScript 库构建的一套官方用户界面交互组件库。它提供了丰富的交互小部件（Widgets）、视觉特效（Effects）、拖拽/放置等功能，以及一套可自定义的 CSS 主题框架，帮助开发者快速构建美观、交互性强的 Web 页面。

核心特点

• 构建在 jQuery 之上：必须先引入 jQuery 才能使用 jQuery UI。
• 组件化设计：提供现成的小部件，无需自己从零实现复杂交互。
• 主题支持：内置 ThemeRoller 工具，可以在线自定义外观主题（颜色、圆角、阴影等）。
• 跨浏览器兼容：在当时（2010 年代）解决了各大浏览器间的 UI 差异问题。
• 轻量且模块化：可以只下载需要的组件，减少文件体积。

主要组成部分

1. Interactions（交互）

• Draggable（可拖拽）
• Droppable（可放置）
• Resizable（可调整大小）
• Selectable（可选择）
• Sortable（可排序）

1. Widgets（小部件）

• Accordion（手风琴/折叠面板）
• Autocomplete（自动完成）
• Button（美化按钮）
• Datepicker（日期选择器）
• Dialog（对话框/模态窗）
• Menu（菜单）
• Progressbar（进度条）
• Slider（滑块）
• Spinner（数值微调器）
• Tabs（标签页）
• Tooltip（工具提示）

1. Effects（特效）

• 颜色动画、类切换、显示/隐藏特效、爆炸、抖动、缩放等。

1. Utilities（工具）

• Position（定位工具）
• Widget Factory（小部件工厂，用于自定义组件）

当前状态（截至 2025 年 12 月）

• 最后一个主要版本是 1.13.2（2022 年发布）。
• 项目已进入维护模式（maintenance mode），不再添加新功能，只修复严重 bug。
• 官方推荐在新项目中使用现代前端框架（如 React、Vue、Angular）配合组件库（如 Material UI、Ant Design、Bootstrap）。
• 对于遗留系统维护或简单页面增强，jQuery UI 仍然是一个稳定可靠的选择。

典型使用场景

• 快速给表单添加日期选择器
• 实现标签页切换
• 创建可拖拽排序的列表
• 弹出模态对话框
• 美化按钮和进度条

简单示例（Datepicker）

<!-- 引入文件 -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

<!-- HTML -->
<input type="text" id="datepicker">

<!-- JS -->
<script>
$(function() {
    $("#datepicker").datepicker();
});
</script>

总之，jQuery UI 是 jQuery 时代（约 2009-2015 年）最流行的 UI 库之一，它极大降低了前端交互开发的门槛。虽然现在已被更现代的方案取代，但其代码依然稳定，适合学习 jQuery 生态或维护老项目。

如果您想了解某个具体组件的用法或对比现代替代方案，欢迎继续提问！