什么是 jQuery UI？
jQuery UI 是一个建立在 jQuery JavaScript 库之上的用户界面库，它提供了一系列预先构建好的、高度可定制的交互组件（如对话框、滑块、日期选择器）和视觉效果（如动画、主题），可以让你快速为网页添加丰富的功能和专业的界面。
（图片来源网络，侵删）
基础 HTML 结构（最常用）
这是一个包含所有必要元素的完整 HTML 模板，可以直接复制并使用。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">jQuery UI 示例</title>
<!-- 1. 引入 jQuery 核心库 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 2. 引入 jQuery UI 核心库 -->
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<!-- 3. 引入 jQuery UI 的 CSS 主题文件 -->
<!-- 你可以从 https://jqueryui.com/download/ 下载并使用自己的主题，或直接使用 CDN 的默认主题 -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<!-- 4. 引入 jQuery UI 的图标（可选，但推荐） -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui-icons.css">
<!-- 5. 你的自定义 CSS -->
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.container {
max-width: 800px;
margin: 0 auto;
border: 1px solid #ccc;
padding: 20px;
border-radius: 5px;
}
/* 为演示组件添加一些间距 */
.demo-section {
margin-bottom: 30px;
padding: 15px;
border: 1px dashed #ddd;
}
</style>
</head>
<body>
<div class="container">
<h1>jQuery UI 网页模板</h1>
<p>这是一个使用 jQuery UI 的基础模板，下面展示了几个常用组件。</p>
<!-- 示例 1: 按钮 -->
<div class="demo-section">
<h2>按钮</h2>
<button id="btn-dialog">打开对话框</button>
<button id="btn-accordion">切换手风琴</button>
</div>
<!-- 示例 2: 对话框 -->
<div id="my-dialog" title="这是一个对话框">
<p>这是一个通过 jQuery UI 创建的对话框，你可以点击右上角的 X 关闭它。</p>
</div>
<!-- 示例 3: 手风琴 -->
<div class="demo-section">
<h2>手风琴</h2>
<div id="accordion">
<h3>第一部分</h3>
<div>
<p>这是第一部分的内容，点击其他标题可以展开/折叠这部分。</p>
</div>
<h3>第二部分</h3>
<div>
<p>这是第二部分的内容，jQuery UI 使得创建这样的交互组件变得非常简单。</p>
</div>
<h3>第三部分</h3>
<div>
<p>这是第三部分的内容。</p>
</div>
</div>
</div>
<!-- 示例 4: 日期选择器 -->
<div class="demo-section">
<h2>日期选择器</h2>
<p>选择一个日期: <input type="text" id="datepicker"></p>
</div>
<!-- 示例 5: 进度条 -->
<div class="demo-section">
<h2>进度条</h2>
<div id="progressbar"></div>
<button id="start-progress">开始进度</button>
</div>
</div>
<!-- 6. 你的自定义 JavaScript 代码 -->
<script>
$( function() {
// 对话框
$( "#my-dialog" ).dialog({
autoOpen: false, // 页面加载时不自动打开
modal: true, // 模态对话框，背景变暗
buttons: {
"确定": function() {
$( this ).dialog( "close" );
},
"取消": function() {
$( this ).dialog( "close" );
}
}
});
$( "#btn-dialog" ).on( "click", function() {
$( "#my-dialog" ).dialog( "open" );
});
// 手风琴
$( "#accordion" ).accordion();
// 日期选择器
$( "#datepicker" ).datepicker();
// 进度条
$( "#progressbar" ).progressbar({
value: 0
});
$( "#start-progress" ).on( "click", function() {
var progressValue = $( "#progressbar" ).progressbar( "value" );
if ( progressValue < 100 ) {
progressValue += 10;
$( "#progressbar" ).progressbar( "value", progressValue );
}
});
} );
</script>
</body>
</html>
自定义主题
jQuery UI 的一大优点是可以通过其 ThemeRoller 工具轻松定制外观。
步骤：
- 访问 ThemeRoller：打开 jQuery UI ThemeRoller 页面。
- 选择主题：从右侧的下拉菜单中选择一个基础主题（如 "Base", "Black Tie", "Blitzer" 等）。
- 自定义样式：
- 字体：可以调整字体家族和大小。
- 颜色：可以调整组件的背景色、文字颜色、边框色、悬停效果等。
- 圆角：可以调整组件的圆角半径。
- 阴影：可以调整阴影效果。
- 下载：点击右上角的 "Download" 按钮。
- 替换文件：下载后，你会得到一个压缩包，解压后，将
jquery-ui.css和jquery-ui.min.js以及images文件夹（包含图标和背景图片）替换到你项目中对应的文件。
如何使用自定义主题？
（图片来源网络，侵删）
在你的 HTML 文件中，将 CDN 的 CSS 链接替换为你下载的本地 CSS 链接：
<!-- 替换掉这行 --> <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"> <!-- 改为使用你自己的主题文件 --> <link rel="stylesheet" href="path/to/your/custom-theme/jquery-ui.css">
按需加载（优化性能）
在生产环境中,为了减小文件体积，提高加载速度，建议只加载你需要的组件。
方法：使用 jQuery UI 官方的下载页面
- 访问 jQuery UI 下载页面。
- 在 Core 核心库部分，必须勾选
jQuery UI。 - 在 Widgets (组件) 部分，勾选你需要的组件，
Accordion,Datepicker,Dialog,Progressbar。 - 在 Interactions (交互) 部分，如果需要拖拽、排序等功能，也在这里勾选。
- 在 Effects (效果) 部分，可以勾选你需要的动画效果。
- 在 Theme 主题部分，选择你喜欢的主题。
- 点击 "Download" 按钮。
下载的压缩包会包含一个 定制好的 jquery-ui.js 文件，它只包含你选择的组件的代码，这样，你的项目就不再需要引入完整的 jquery-ui.min.js 了。
（图片来源网络，侵删）
优化后的模板结构：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">jQuery UI 按需加载示例</title>
<!-- 引入 jQuery 核心 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 引入你定制好的 CSS -->
<link rel="stylesheet" href="path/to/your/downloaded/jquery-ui.css">
<style>
/* ... 自定义样式 ... */
</style>
</head>
<body>
<!-- 你的 HTML 内容 ... -->
<div id="my-dialog" title="定制对话框">
<p>这个对话框只加载了必要的代码。</p>
</div>
</body>
<!-- 引入你定制好的 JS (这个文件很小) -->
<script src="path/to/your/downloaded/jquery-ui.js"></script>
<script>
$( function() {
// 你的初始化代码
$( "#my-dialog" ).dialog();
} );
</script>
</html>
关键组件和交互示例
在基础模板中,我们已经包含了几个常用组件，这里再补充一些重要的交互方式。
拖拽
<div id="draggable" class="ui-widget-content">
<p>拖拽我</p>
</div>
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script>
$( "#draggable" ).draggable();
</script>
排序
<ul id="sortable">
<li class="ui-state-default">项目 1</li>
<li class="ui-state-default">项目 2</li>
<li class="ui-state-default">项目 3</li>
<li class="ui-state-default">项目 4</li>
<li class="ui-state-default">项目 5</li>
</ul>
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 5px; padding: 5px; font-size: 1.2em; height: 1.5em; }
</style>
<script>
$( "#sortable" ).sortable();
</script>
标签页
<div id="tabs">
<ul>
<li><a href="#tabs-1">标签 1</a></li>
<li><a href="#tabs-2">标签 2</a></li>
<li><a href="#tabs-3">标签 3</a></li>
</ul>
<div id="tabs-1">
<p>这是标签 1 的内容。</p>
</div>
<div id="tabs-2">
<p>这是标签 2 的内容。</p>
</div>
<div id="tabs-3">
<p>这是标签 3 的内容。</p>
</div>
</div>
<script>
$( "#tabs" ).tabs();
</script>
总结与建议
- 从基础模板开始：使用第一个完整模板进行学习和快速原型开发。
- 善用 ThemeRoller：不要使用默认的 "Base" 主题花哨你的应用，花几分钟时间定制一个符合你网站风格的主题。
- 生产环境用按需加载：为了最佳性能，务必使用官方下载工具生成只包含所需组件的 JS 文件。
- 查阅官方文档：jQuery UI 的官方文档 (https://api.jqueryui.com/) 是最权威的参考，包含了所有组件的详细选项、方法和事件。
希望这些模板和示例能帮助你顺利地在项目中使用 jQuery UI！
