jQuery UI 是一个基于 jQuery 的官方用户界面库，它包含以下主要特性：
使用 jQuery UI 需要先引入 jQuery，然后引入 jQuery UI：
<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 引入 jQuery UI CSS -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<!-- 引入 jQuery UI JS -->
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>Datepicker 允许用户方便地选择日期。
// 基本日期选择器
$("#datepicker").datepicker();
// 带选项的日期选择器
$("#datepicker").datepicker({
dateFormat: "yy-mm-dd",
changeMonth: true,
changeYear: true,
yearRange: "c-10:c+10"
});// 完整的选项配置
$("#datepicker").datepicker({
dateFormat: "yy-mm-dd", // 日期格式
showAnim: "fadeIn", // 显示动画
showButtonPanel: true, // 显示按钮面板
changeMonth: true, // 可切换月份
changeYear: true, // 可切换年份
yearRange: "1900:2025", // 年份范围
minDate: 0, // 最小日期（0表示今天）
maxDate: "+1m +1w", // 最大日期
beforeShowDay: function(date) { // 自定义日期显示
return [true, ""];
}
});Dialog 用于创建模态或非模态的对话框窗口。
<!-- HTML 结构 -->
<div id="dialog" title="对话框标题">
<p>对话框内容...</p>
</div>
<button id="open-btn">打开对话框</button>// JavaScript 代码
// 初始化对话框
$("#dialog").dialog({
autoOpen: false, // 初始不显示
modal: true, // 模态对话框
width: 400, // 宽度
height: 300, // 高度
buttons: {
"确定": function() {
$(this).dialog("close");
},
"取消": function() {
$(this).dialog("close");
}
}
});
// 点击按钮打开对话框
$("#open-btn").click(function() {
$("#dialog").dialog("open");
});<div id="progressbar"></div>// 初始化进度条
$("#progressbar").progressbar({
value: 0, // 初始值
max: 100 // 最大值
});
// 设置进度值
$("#progressbar").progressbar("value", 50);
// 动画更新进度
var progress = 0;
var interval = setInterval(function() {
progress += 10;
$("#progressbar").progressbar("value", progress);
if (progress >= 100) {
clearInterval(interval);
}
}, 500);滑块值: 50
范围滑块: 20 - 80
<div id="slider"></div>
<div id="range-slider"></div>// 单滑块
$("#slider").slider({
value: 50,
min: 0,
max: 100,
slide: function(event, ui) {
$("#slider-value").text(ui.value);
}
});
// 范围滑块
$("#range-slider").slider({
range: true,
min: 0,
max: 100,
values: [20, 80],
slide: function(event, ui) {
$("#range-values").text(ui.values[0] + " - " + ui.values[1]);
}
});<div id="tabs">
<ul>
<li><a href="#tabs-1">选项卡1</a></li>
<li><a href="#tabs-2">选项卡2</a></li>
</ul>
<div id="tabs-1">
<p>内容1...</p>
</div>
<div id="tabs-2">
<p>内容2...</p>
</div>
</div>// 初始化选项卡
$("#tabs").tabs();
// 带选项的选项卡
$("#tabs").tabs({
active: 0, // 默认激活的选项卡
collapsible: true, // 可折叠
heightStyle: "fill", // 高度样式
show: { effect: "fade", duration: 400 },
hide: { effect: "fade", duration: 400 }
});
// 切换到指定选项卡
$("#tabs").tabs("option", "active", 1);这是第一部分的内容...
这是第二部分的内容...
这是第三部分的内容...
// 初始化手风琴
$("#accordion").accordion({
collapsible: true, // 可折叠所有
active: false, // 默认全部折叠
heightStyle: "content", // 高度适应内容
animate: 300 // 动画时间
});
// 事件处理
$("#accordion").accordion({
activate: function(event, ui) {
console.log("激活的面板:", ui.newHeader.text());
}
});// 数据源
var availableTags = [
"北京", "上海", "广州", "深圳", "杭州",
"南京", "成都", "重庆", "武汉", "西安"
];
// 初始化自动完成
$("#autocomplete").autocomplete({
source: availableTags,
minLength: 1, // 输入多少个字符开始提示
delay: 300, // 延迟时间
select: function(event, ui) {
console.log("选择了: " + ui.item.value);
}
});
// 使用远程数据源
$("#autocomplete").autocomplete({
source: function(request, response) {
$.ajax({
url: "/api/search",
data: { term: request.term },
success: function(data) {
response(data);
}
});
},
minLength: 2
});jQuery UI 支持使用 ThemeRoller 创建自定义主题：