1. 确保您已经引入了 jQuery 和 EasyUI 的相关文件。您可以从官方网站（[EasyUI 官网](http://www.jeasyui.com/)）下载并引入这些文件。
2. 在 HTML 中创建一个容器用于布局：
<div id="layout" class="easyui-layout" style="width:800px;height:500px;">
<div data-options="region:'west',split:true" style="width:200px;">
<!-- 这是左侧区域，可以放置其他组件 -->
左侧区域
</div>
<div data-options="region:'center'" style="padding:10px;">
<!-- 这是中间区域，可以放置窗口组件 -->
<button id="openWindowBtn">打开窗口</button>
</div>
</div>
在这个例子中，我们使用 easyui-layout 类创建了一个布局容器，并定义了左侧和中间两个区域。左侧区域可以用于放置其他组件，中间区域将用于放置窗口组件。
3. 在 JavaScript 中使用 EasyUI 的 window 方法初始化窗口，并在布局中的中间区域打开：
<script>
$(document).ready(function(){
// 初始化窗口
$('#myWindow').window({
title: '我的窗口', // 窗口标题
width: 300, // 窗口宽度
height: 200, // 窗口高度
closed: true, // 初始时窗口是否关闭
modal: true, // 是否模态对话框
onClose: function(){
// 窗口关闭时的回调函数
console.log('窗口已关闭');
}
});
// 绑定按钮点击事件
$('#openWindowBtn').click(function(){
// 打开窗口
$('#myWindow').window('open');
});
});
</script>
4. 在 HTML 中创建一个用于容纳窗口内容的 div：
<div id="myWindow">窗口内容可以在这里添加</div>
在这个例子中，我们通过布局将窗口放置在中间区域。您可以根据实际需求调整窗口的配置参数和布局结构。
请确保在使用 EasyUI 组件时正确引入相应的样式表和脚本文件，并根据实际需要进行定制。
转载请注明出处：http://www.zyzy.cn/article/detail/13130/jQuery EasyUI