jQuery UI 是基于 jQuery 的用户界面交互库，提供丰富的组件（如小部件、交互、特效和主题）。虽然官方版本已进入维护模式（最新为 1.13.x 或 1.14），但仍广泛用于旧项目。官方演示地址：https://jqueryui.com/demos/（可查看源代码、切换主题）。
推荐中文教程资源：
- 菜鸟教程（Runoob）：https://www.runoob.com/jqueryui/jqueryui-examples.html（包含大量实例和代码）
- w3cschool：https://www.w3cschool.cn/jqueryui/
下面列出几个经典实例，包括完整可运行代码（使用 CDN 引入）。你可以复制到 HTML 文件中直接测试。
1. Accordion（折叠面板）
常用于 FAQ 或菜单导航。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Accordion 示例</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="//code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
</head>
<body>
<div id="accordion">
<h3>部分 1</h3>
<div><p>这是第一个面板的内容。</p></div>
<h3>部分 2</h3>
<div><p>这是第二个面板的内容。</p></div>
<h3>部分 3</h3>
<div><p>这是第三个面板的内容。</p></div>
</div>
<script>
$(function() {
$("#accordion").accordion();
});
</script>
</body>
</html>2. Datepicker（日期选择器）
常用于表单日期输入。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker 示例</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="//code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
</head>
<body>
<p>选择日期: <input type="text" id="datepicker"></p>
<script>
$(function() {
$("#datepicker").datepicker({
dateFormat: "yy-mm-dd", // 日期格式
changeMonth: true, // 可切换月份
changeYear: true // 可切换年份
});
});
</script>
</body>
</html>3. Draggable & Droppable（拖拽与放置）
实现拖拽交互，常用于排序或游戏。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable & Droppable 示例</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="//code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<style>
#draggable { width: 100px; height: 100px; padding: 0.5em; background: #ccc; }
#droppable { width: 200px; height: 200px; padding: 0.5em; border: 2px dashed #000; }
</style>
</head>
<body>
<div id="draggable" class="ui-widget-content">拖我</div>
<div id="droppable" class="ui-widget-header">放到这里</div>
<script>
$(function() {
$("#draggable").draggable();
$("#droppable").droppable({
drop: function() {
alert("放置成功！");
}
});
});
</script>
</body>
</html>4. Dialog（模态对话框）
用于弹出提示或表单。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog 示例</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="//code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
</head>
<body>
<button id="openDialog">打开对话框</button>
<div id="dialog" title="对话框标题">
<p>这是对话框的内容。</p>
</div>
<script>
$(function() {
$("#dialog").dialog({
autoOpen: false,
modal: true, // 模态
buttons: {
"确定": function() { $(this).dialog("close"); },
"取消": function() { $(this).dialog("close"); }
}
});
$("#openDialog").click(function() {
$("#dialog").dialog("open");
});
});
</script>
</body>
</html>其他常见组件：Tabs（标签页）、Autocomplete（自动完成）、Slider（滑块）等。可在官方 demos 或菜鸟教程中查看更多。如果你需要特定组件的实例或自定义主题，请提供更多细节！
