本文详细介绍如何使用 jQuery EasyUI 创建简单窗口。通过 HTML 标记即可实现基础窗口，无需编写 JavaScript。同时演示如何设置窗口初始隐藏状态并通过 open 方法调用，以及构建包含表单的登录窗口实例，帮助开发者快速掌握 EasyUI 窗口组件的核心用法。
EasyUI 窗口效果预览
jQuery EasyUI 的窗口（Window）组件提供了丰富的 UI 交互功能。通过简单的 HTML 配置，即可在页面上渲染出具有标题栏、边框、可拖拽和可调整大小功能的窗口。以下是三种常见场景的最终效果：
前置准备与基础窗口创建
在开始之前，请确保您的项目中已正确引入 jQuery 和 jQuery EasyUI 的核心 CSS 及 JavaScript 文件。创建窗口最简单的方式是利用 HTML 标记（Markup），这种方式无需编写任何 JavaScript 代码即可生成一个标准的窗口组件。
第1步：定义基础窗口 HTML 结构
在页面中创建一个 div 元素，并为其添加 class="easyui-window" 属性。EasyUI 会自动识别该标记并将其初始化为窗口组件。
- 操作目的：创建一个可见的、具有基本样式的窗口。
- 具体动作：编写 HTML 代码，设置窗口的 ID、标题、宽高等属性。
Some Content.
完成判断：刷新页面后，您应该能看到一个标题为 "My Window" 的窗口显示在屏幕左上角，尺寸为 300x100 像素，且内容区域有 5px 的内边距。
实现隐藏窗口与动态打开
在实际开发中，我们往往需要窗口默认隐藏，仅在特定操作（如点击按钮）时才显示。EasyUI 提供了 closed 属性来控制窗口的初始状态。
第2步：配置窗口初始隐藏状态
在 div 标签中添加 closed="true" 属性。这将使窗口在页面加载时不可见，但组件实例依然存在于 DOM 中。
Some Content.
第3步：编写 JavaScript 打开窗口
通过 EasyUI 提供的 API，调用 window('open') 方法即可显示之前隐藏的窗口。这通常绑定在按钮的点击事件或其他触发器上。
$('#win').window('open');完成判断：页面加载时窗口不显示。当执行上述 JavaScript 代码（例如在控制台或按钮点击事件中）后，窗口应立即出现在屏幕上。
构建登录窗口实例
除了基础展示，窗口常用于承载复杂的表单内容，例如用户登录界面。下面演示如何创建一个包含用户名、密码输入框和确认/取消按钮的登录窗口。
第4步：设计登录窗口 HTML 结构
在窗口内部嵌入一个 form 元素，并添加必要的输入框和按钮。使用 EasyUI 的 linkbutton 类来美化按钮，并指定图标。
完成判断：窗口应显示为标题 "Login"，尺寸为 300x180。内部包含两个输入框和两个带有图标的按钮（Ok 和 Cancel）。布局整齐，符合登录界面的视觉规范。
常见问题与调整建议
- 窗口无法显示或样式错乱：检查是否正确引入了
jquery.easyui.min.js和对应的 CSS 文件。确保 jQuery 版本与 EasyUI 版本兼容。 - 窗口内容溢出：如果窗口内容较多，建议设置
collapsible="true"属性以允许用户折叠窗口，或调整minimizable和maximizable属性以提供缩放功能。 - 动态内容更新：如果需要在窗口打开后动态加载内容，可以在
onOpen事件中发起 AJAX 请求并更新 DOM。
总结
通过本文的三个实例，我们掌握了 jQuery EasyUI 窗口组件的核心用法：从最简单的 HTML 标记创建，到通过 closed 属性和 open() 方法控制显示状态，再到构建复杂的登录表单窗口。这些技巧足以应对大多数后台管理系统中的弹窗需求。开发者可根据实际场景，进一步探索窗口的拖拽、调整大小、模态框等高级属性。
以上就是 jQuery EasyUI 创建简单窗口的详细内容，更多关于 jQuery EasyUI 窗口组件的资料请关注本站其它相关文章！
