jQuery EasyUI 布局 - 在面板中创建复杂布局

jQuery EasyUI 布局 - 在面板中创建复杂布局

jQuery EasyUI支持布局的嵌套（nested layout），允许在panel（面板）或其他区域内放置另一个easyui-layout，从而构建非常复杂的界面布局。这种方式常用于创建自定义组件、模拟 MSN 消息框、复杂表单、仪表盘子模块等。

官方教程参考：https://www.jeasyui.com/tutorial/layout/panel.php（Complex layout on Panel）
在线 Demo：https://www.jeasyui.com/demo/main/index.php?plugin=Layout&pitem=Complex+Layout

本教程将演示：

• 在一个主panel内嵌套layout。
• 创建类似 MSN 消息框的复杂布局：顶部搜索栏 + 右侧头像，中间可拖动分割的联系人列表 + 聊天区。

步骤 1: 引入 EasyUI 资源

<linkrel="stylesheet"type="text/css"href="https://www.jeasyui.com/easyui/themes/default/easyui.css"><linkrel="stylesheet"type="text/css"href="https://www.jeasyui.com/easyui/themes/icon.css"><scripttype="text/javascript"src="https://code.jquery.com/jquery-1.12.4.min.js"></script><scripttype="text/javascript"src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

步骤 2: 创建主 Panel 并嵌套 Layout

使用fit:true让内部 layout 自动填充 panel。

<divclass="easyui-panel"title="复杂面板布局示例（模拟消息框）"iconCls="icon-search"collapsible="true"style="width:600px;height:400px;padding:10px;"><divclass="easyui-layout"data-options="fit:true"><!-- 北部：搜索栏 + 右侧头像 --><divdata-options="region:'north',border:false"style="height:60px;padding:10px;"><divstyle="float:left;"><label>搜索:</label><inputclass="easyui-searchbox"style="width:200px;"></div><divstyle="float:right;"><imgsrc="https://www.jeasyui.com/tutorial/layout/images/man.png"style="width:40px;height:40px;"></div><divstyle="clear:both;"></div></div><!-- 中部：可拖动分割的左右区域 --><divdata-options="region:'center'"><divclass="easyui-layout"data-options="fit:true"><!-- 左侧：联系人列表（可折叠） --><divdata-options="region:'west',split:true,title:'联系人',iconCls:'icon-group'"style="width:200px;"><ulclass="easyui-tree"><liiconCls="icon-user">张三</li><liiconCls="icon-user">李四</li><liiconCls="icon-user">王五</li><liiconCls="icon-user">赵六</li></ul></div><!-- 右侧：聊天内容区 --><divdata-options="region:'center',title:'聊天窗口'"><divclass="easyui-tabs"data-options="fit:true,border:false"><divtitle="与 张三 聊天"style="padding:20px;">这里是聊天内容区域...<br><br>可以放置文本框、发送按钮等。</div><divtitle="群聊"></div></div></div></div></div><!-- 南部：状态栏（可选） --><divdata-options="region:'south',border:false"style="height:30px;text-align:center;line-height:30px;background:#fafafa;">在线状态：在线</div></div></div>

步骤 3: 更复杂的嵌套示例（多层布局）

在中心区域再嵌套一层 layout，实现更多分割。

<divclass="easyui-panel"title="多层嵌套复杂布局"style="width:800px;height:500px;"><divclass="easyui-layout"data-options="fit:true"><divdata-options="region:'west',split:true,title:'左侧菜单'"style="width:200px;"><!-- 左侧可放置 accordion 或 tree --><divclass="easyui-accordion"data-options="fit:true"><divtitle="菜单1">内容1</div><divtitle="菜单2">内容2</div></div></div><divdata-options="region:'center'"><!-- 中心再嵌套一层 --><divclass="easyui-layout"data-options="fit:true"><divdata-options="region:'north'"style="height:100px;background:#f0f0f0;padding:10px;">顶部工具栏</div><divdata-options="region:'center'"><divclass="easyui-tabs"data-options="fit:true"><divtitle="Tab1">主内容区</div><divtitle="Tab2">数据表格</div></div></div><divdata-options="region:'south'"style="height:50px;background:#f0f0f0;padding:10px;">底部状态栏</div></div></div></div></div>

关键说明

• 嵌套核心：在 panel 或 layout 的某个 region 内，再放一个<div class="easyui-layout">