jQuery UI 参考手册学习笔记
什么是 jQuery UI
jQuery UI 是一个基于 jQuery JavaScript 库的用户界面插件集合。它提供了丰富的交互特效、多种主题风格、可定制的组件和易用的 API，可以轻松地为 Web 应用程序添加各种交互功能和用户体验。
如何使用 jQuery UI
首先，需要在 HTML 页面中引入 jQuery 和 jQuery UI 的脚本文件：
htmlCopy Code<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
</head>
然后，就可以使用 jQuery UI 提供的组件和特效了。下面是一些常用的组件和特效：
对话框（Dialog）
对话框是一个弹出窗口，可以用于显示消息、获取用户输入等。
javascriptCopy Code// 创建一个简单的对话框
$("#my-dialog").dialog({
autoOpen: false,
title: "My Dialog",
modal: true
});
// 打开对话框
$("#my-dialog").dialog("open");
拖拽（Draggable）
拖拽可以让元素随着鼠标的移动而移动。
javascriptCopy Code// 启用拖拽
$("#my-element").draggable();
缩放（Resizable）
缩放可以让元素的大小随着鼠标的拖动而改变。
javascriptCopy Code// 启用缩放
$("#my-element").resizable();
选择（Selectable）
选择可以让用户通过鼠标或键盘选择元素。
javascriptCopy Code// 启用选择
$("#my-list").selectable();
示例
下面是一个简单的示例，演示了如何使用 jQuery UI 的对话框组件：
htmlCopy Code<html>
<head>
<title>jQuery UI Dialog Example</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
<script>
$(function() {
// 创建对话框
$("#my-dialog").dialog({
autoOpen: false,
title: "My Dialog",
modal: true
});
// 显示对话框
$("#my-button").on("click", function() {
$("#my-dialog").dialog("open");
});
});
</script>
</head>
<body>
<button id="my-button">Open Dialog</button>
<div id="my-dialog">This is my dialog.</div>
</body>
</html>
这个示例会在页面上显示一个按钮，点击按钮后会弹出一个对话框。