本文详细介绍如何使用 jQuery EasyUI 创建功能完整的对话框（Dialog）。通过配置 HTML 结构，您可以轻松添加顶部工具栏和底部操作按钮，并支持调整大小。文章提供标准代码示例，涵盖内容、工具栏及按钮的完整实现步骤，帮助开发者快速掌握 EasyUI 对话框的高级用法。
EasyUI 对话框效果预览
对话框（Dialog）是 jQuery EasyUI 中一种特殊的窗口组件。与基础窗口不同，对话框默认在顶部提供工具栏（Toolbar），在底部提供操作按钮（Buttons）。默认情况下，对话框不可调整大小，但通过设置 resizable 属性为 true，用户可以自由调整窗口尺寸。
创建对话框的前置准备
在开始编写代码之前，请确保您的项目已正确引入 jQuery 和 jQuery EasyUI 的核心文件（CSS 和 JS）。这是所有 EasyUI 组件正常运行的基础。
实现步骤：构建对话框结构
第1步：定义对话框主体与内容
首先，我们需要在 HTML 中创建一个 div 元素，并为其添加 easyui-dialog 类。EasyUI 会自动将该元素初始化为对话框组件。
- class: 设置为
easyui-dialog，这是启用组件的关键。 - style: 设置初始宽度和高度（例如
width:400px; height:200px;）。 - title: 设置对话框顶部的标题文本。
- iconCls: 指定标题栏左侧的图标类名（如
icon-ok）。 - toolbar: 指定顶部工具栏的容器 ID。
- buttons: 指定底部按钮容器的 ID。
以下是完整的 HTML 结构代码：
Dialog Content.
第2步：配置顶部工具栏（Toolbar）
对话框顶部的工具栏通常包含一组快捷操作按钮。我们需要创建一个独立的 div 容器，并为其分配 ID（如 dlg-toolbar），然后在其中放置链接按钮（LinkButton）。
在工具栏中，我们使用了 iconCls 属性来显示图标，并通过 onclick 事件绑定具体的 JavaScript 逻辑（此处为简单的 alert 提示）。
第3步：配置底部操作按钮（Buttons）
对话框底部的按钮通常用于确认或取消操作。与工具栏类似，我们创建一个 ID 为 dlg-buttons 的容器，并放置确认（Ok）和取消（Cancel）按钮。
关键区别在于：取消按钮的 onclick 事件中调用了 EasyUI 对话框的方法 .dialog('close')，以实现点击后关闭窗口的功能。
完成结果与验证
将上述三段代码整合到同一个 HTML 页面中并运行，您将看到一个标准的 EasyUI 对话框。该对话框具备以下特征：
- 顶部显示标题和图标。
- 顶部工具栏包含“Add”和“Save”按钮，点击会触发弹窗提示。
- 底部包含“Ok”和“Cancel”按钮，点击“Cancel”会关闭对话框。
- 内容区域显示“Dialog Content.”。
您可以尝试调整浏览器窗口大小或拖动对话框边缘（如果设置了 resizable="true"）来验证其交互性。
常见问题与调整
对话框无法显示或样式错乱
原因：未正确引入 jQuery 和 EasyUI 的 CSS/JS 文件，或者 DOM 加载顺序错误。
解决方法：确保