jQuery UI 使用指南
jQuery UI 的使用非常简单，主要步骤包括引入必要的文件，然后通过 jQuery 的选择器调用相应的小部件（Widgets）或交互方法。下面一步步说明如何开始使用。
1. 引入文件（推荐使用 CDN，最方便）
最新版本（截至 2025 年 12 月）：jQuery UI 1.14.1（2024 年 8 月发布），兼容 jQuery 3.7.x 等现代版本。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>jQuery UI 示例</title>
<!-- jQuery UI CSS（选择一个主题，如 smoothness） -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.14.1/themes/smoothness/jquery-ui.min.css">
<!-- jQuery 核心库（必须先引入） -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- jQuery UI JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.14.1/jquery-ui.min.js"></script>
</head>
<body>
<!-- 你的 HTML 内容 -->
</body>
</html>- 其他 CDN 选项：
- Google CDN：
https://ajax.googleapis.com/ajax/libs/jqueryui/1.14.1/jquery-ui.min.js - 如果需要中文本地化（如 Datepicker），额外引入语言包：
https://code.jquery.com/ui/1.14.1/i18n/jquery-ui-i18n.min.js
2. 基本使用模式
jQuery UI 的小部件使用统一模式：
$(function() { // 等文档加载完成
$("#元素ID").widgetName({ // 调用小部件
option1: value1, // 可选配置
option2: value2
});
});3. 常见示例
示例1：日期选择器（Datepicker）
常用于表单日期输入，支持中文本地化。
<input type="text" id="datepicker">
<script>
$(function() {
$("#datepicker").datepicker({
dateFormat: "yy-mm-dd", // 日期格式：2025-12-18
changeMonth: true, // 显示月份下拉
changeYear: true, // 显示年份下拉
yearRange: "1900:2030" // 年份范围
});
// 中文本地化（需额外引入语言包）
// $.datepicker.setDefaults($.datepicker.regional['zh-CN']);
});
</script>示例2：标签页（Tabs）
<div id="tabs">
<ul>
<li><a href="#tab1">标签1</a></li>
<li><a href="#tab2">标签2</a></li>
<li><a href="#tab3">标签3</a></li>
</ul>
<div id="tab1">内容1：这里是第一个标签页的内容。</div>
<div id="tab2">内容2：这里是第二个标签页的内容。</div>
<div id="tab3">内容3：这里是第三个标签页的内容。</div>
</div>
<script>
$(function() {
$("#tabs").tabs();
});
</script>示例3：对话框（Dialog）
<div id="dialog" title="提示对话框">
<p>这是一个模态对话框的内容。</p>
</div>
<button id="openDialog">打开对话框</button>
<script>
$(function() {
$("#dialog").dialog({
autoOpen: false, // 默认不打开
modal: true, // 模态（遮罩背景）
buttons: {
"确定": function() { $(this).dialog("close"); },
"取消": function() { $(this).dialog("close"); }
}
});
$("#openDialog").click(function() {
$("#dialog").dialog("open");
});
});
</script>示例4：可拖拽（Draggable）和可放置（Droppable）
<div id="draggable" style="width:100px;height:100px;background:red;">拖拽我</div>
<div id="droppable" style="width:200px;height:200px;background:green;">放到这里</div>
<script>
$(function() {
$("#draggable").draggable();
$("#droppable").droppable({
drop: function() {
alert("放置成功！");
}
});
});
</script>4. 其他常用小部件
- Accordion（折叠面板）：
$("#accordion").accordion(); - Autocomplete（自动完成）：需提供数据源数组。
- Slider（滑块）：
$("#slider").slider(); - Progressbar（进度条）：
$("#progressbar").progressbar({ value: 50 });
学习资源
- 中文教程：
- 菜鸟教程（推荐，实例丰富）：https://www.runoob.com/jqueryui/jqueryui-tutorial.html
- w3cschool：https://www.w3cschool.cn/jqueryui/
- 官方演示：https://jqueryui.com/demos/
- API 文档：https://api.jqueryui.com/
注意：jQuery UI 已进入维护模式，主要用于遗留项目。新项目建议使用现代框架（如 Bootstrap、Element UI 或 React 组件库）。
如果您想看某个具体组件的完整代码、配置选项，或遇到问题，请提供更多细节，我可以帮您调试或扩展示例！
