五、性能优化清单
为了确保 jQuery UI 项目始终保持流畅，建议定期进行以下检查：
六、常用 API 与实用工具
6.1 交互组件（Interactions）API 详解
6.1.1 Draggable（拖拽）完整方法列表
draggable() 不仅是一个简单的初始化函数，它返回的 jQuery 对象还暴露了一系列实用的方法，允许在运行时动态调整拖拽行为。
实例：动态调整拖拽限制区域
// 初始化时限制在父容器内
$(".drag-box").draggable({ containment: "#parent-box" });
// 运行时解除限制
$(".drag-box").draggable("option", "containment", false);
6.1.2 Droppable（放置目标）方法详解
实例：根据条件动态禁用放置区域
<div id="dropzone" class="drop-area">拖拽到这里</div>
<script>
$("#dropzone").droppable({
accept: ".drag-item",
drop: (event, ui) => console.log("放置成功")
});
// 业务逻辑触发：暂时关闭此放置区
$("#disableBtn").on("click", () => {
$("#dropzone").droppable("disable");
$("#dropzone").css("opacity", "0.5");
});
</script>
6.2 微件组件（Widgets）API 详解
6.2.1 Accordion（手风琴）方法
实例：动态切换手风琴的激活面板
<div id="accordion">
<h3>面板 1</h3><div>内容 1</div>
<h3>面板 2</h3><div>内容 2</div>
</div>
<button id="nextBtn">展开下一个</button>
<script>
let activeIdx = 0;
$("#accordion").accordion();
$("#nextBtn").on("click", () => {
activeIdx = (activeIdx + 1) % 2;
$("#accordion").accordion("option", "active", activeIdx);
});
</script>
6.2.2 Datepicker（日期选择器）高级方法
实例：动态设置可选日期范围并刷新
$("#datepicker").datepicker({
dateFormat: "yy-mm-dd",
minDate: 0
});
$.get("/api/holidays").done((holidays) => {
// 假设后端返回不可选的日期数组，动态设置最大日期为 30 天后
$("#datepicker").datepicker("option", {
maxDate: "+30d",
beforeShowDay: (date) => {
const ymd = $.datepicker.formatDate("yy-mm-dd", date);
return [!holidays.includes(ymd)];
}
});
});
6.2.3 Dialog（对话框）高级使用方法
实例：动态设置 Dialog 标题和按钮
$("#confirmDialog").dialog({
autoOpen: false,
modal: true
});
function confirmAction(newTitle, confirmText, callback) {
const dialog = $("#confirmDialog");
dialog.dialog("option", {
title: newTitle,
buttons: [
{
text: confirmText,
click: () => {
callback();
dialog.dialog("close");
}
},
{ text: "取消", click: () => dialog.dialog("close") }
]
}).dialog("open");
}
$("#deleteBtn").on("click", () => {
confirmAction("确认删除", "删除", () => {
// 执行删除操作
console.log("执行删除...");
});
});
6.3 效果库（Effects）高级用法
6.3.1 内置效果与自定义效果
完整的内置效果列表：
自定义效果：通过 $.fn.effects.define 定义自己的动画。
$.fn.effects.define("flash", (options, element) => {
const opts = $.extend({}, options, { mode: "show" });
const $el = $(element);
$el.css("opacity", 0).show().animate({ opacity: 1 }, opts.duration, opts.easing, () => {
if ($.isFunction(opts.complete)) opts.complete.call(element);
});
});
$("#myDiv").show("flash", 1000);
6.4 高级实用工具
6.4.1 位置工具（Position）
.position() 是 jQuery UI 最强大的实用工具之一，几乎所有的微件都在内部使用它来精确定位元素。它允许将任意元素相对于另一个元素（或窗口/文档）进行精确定位，同时完美处理滚动偏移和边界碰撞。
$("#tooltip").position({
my: "left center", // 目标元素对齐方式
at: "right center", // 相对于定位元素的哪个位置
of: $("#targetElement"), // 参考元素
collision: "flip flip", // 碰撞检测（边缘溢出时自动翻转）
using: (pos, details) => {
// 自定义定位函数，可用 css 直接应用
$(this).css(pos);
}
});
对齐方式参数详解：
水平关键字：left、center、right
垂直关键字：top、center、bottom
碰撞检测：collision 配置决定了当定位元素超出视口边界时的行为，值通常是两个单词（水平 + 垂直）：
6.5 软依赖与组件优化
来源：http://oieaw.cn
