📅 最后修改于: 2023-12-03 15:32:11.630000 🧑 作者: Mango
jQuery UI 是一个由 jQuery 团队创建的用户界面库。它包含很多常见的用户界面组件和效果，如对话框、拖拽、排序、日期选择器、自动完成和选项卡等等。另外，由于它是基于 jQuery 的，因此具有与 jQuery 相同的跨浏览器支持和广泛的社区支持。
jQuery UI 的发展始于 2007 年，最初是由 Justin Meyer、Scott González 和 Jörn Zaefferer 创建的。其目的是为了提供一组常用的、具有一致性的用户界面组件，以及类似于 jQuery 的 API。
随着时间的推移，jQuery UI 越来越受欢迎，并吸引了更多的贡献者。它通过增加更多的效果和组件，如进度条、滚动条、可拆分窗格、菜单等等，来扩展其功能。
目前，jQuery UI 最新版本是1.12.1，于 2016 年 7 月发布，其中包含了许多的新特性和改进，如在无需复杂的 CSS 或 JavaScript 之前，自适应图标、触摸支持等等。
要使用 jQuery UI，您需要在页面上加载 jQuery 和 jQuery UI 的库文件，以及相应的 CSS 和 JavaScript 文件。您可以从以下链接中下载它们：
您也可以直接从 Content Delivery Network (CDN) 获取它们：
<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- jQuery UI library -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<!-- jQuery UI CSS -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
一旦您添加了这些文件，您就可以开始使用 jQuery UI 了。以下是一个使用 jQuery UI 对话框组件的简单示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery UI Dialog Example</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
$(function() {
$("#dialog").dialog();
});
</script>
</head>
<body>
<div id="dialog" title="Basic Dialog">
<p>This is a basic dialog.</p>
</div>
</body>
</html>
在这个例子中，我们首先加载了所需的库文件，然后创建了一个简单的 div 元素，并把它转换为一个对话框，设置对话框的标题和内容。最后，我们在 $(function() { ... }) 函数中调用 $("#dialog").dialog() 来创建对话框。这是一个非常简单的例子，但它可以帮助您了解如何使用 jQuery UI 组件和 API。
总之，jQuery UI 是一个非常有用的用户界面库，它提供了许多常见的用户界面组件和效果，以及类似于 jQuery 的 API，可以轻松定制和扩展。如果您正在构建一个 Web 应用程序并需要一些用户界面组件和效果，那么 jQuery UI 可以为您提供帮助。