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 资源

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

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

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

<div class="easyui-panel" title="复杂面板布局示例（模拟消息框）" iconCls="icon-search"
     collapsible="true" style="width:600px;height:400px;padding:10px;">
    <div class="easyui-layout" data-options="fit:true">

        <!-- 北部：搜索栏 + 右侧头像 -->
        <div data-options="region:'north',border:false" style="height:60px;padding:10px;">
            <div style="float:left;">
                <label>搜索:</label>
                <input class="easyui-searchbox" style="width:200px;">
            </div>
            <div style="float:right;">
                <img src="https://www.jeasyui.com/tutorial/layout/images/man.png" style="width:40px;height:40px;">
            </div>
            <div style="clear:both;"></div>
        </div>

        <!-- 中部：可拖动分割的左右区域 -->
        <div data-options="region:'center'">
            <div class="easyui-layout" data-options="fit:true">

                <!-- 左侧：联系人列表（可折叠） -->
                <div data-options="region:'west',split:true,title:'联系人',iconCls:'icon-group'" style="width:200px;">
                    <ul class="easyui-tree">
                        <li iconCls="icon-user">张三</li>
                        <li iconCls="icon-user">李四</li>
                        <li iconCls="icon-user">王五</li>
                        <li iconCls="icon-user">赵六</li>
                    </ul>
                </div>

                <!-- 右侧：聊天内容区 -->
                <div data-options="region:'center',title:'聊天窗口'">
                    <div class="easyui-tabs" data-options="fit:true,border:false">
                        <div title="与 张三 聊天" style="padding:20px;">
                            这里是聊天内容区域...<br><br>
                            可以放置文本框、发送按钮等。
                        </div>
                        <div title="群聊"></div>
                    </div>
                </div>

            </div>
        </div>

        <!-- 南部：状态栏（可选） -->
        <div data-options="region:'south',border:false" style="height:30px;text-align:center;line-height:30px;background:#fafafa;">
            在线状态：在线
        </div>

    </div>
</div>

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

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

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

关键说明

• 嵌套核心：在 panel 或 layout 的某个 region 内，再放一个 <div class="easyui-layout" data-options="fit:true">，即可实现无限嵌套。
• fit:true：非常重要，让内层 layout 自动填充外层区域。
• split:true：允许用户拖动边框调整大小。
• 优势：无需 JavaScript 代码，仅用 HTML 标记即可构建复杂界面，EasyUI 自动处理渲染和自适应。
• 常见应用：
• 自定义对话框/窗口（window/dialog 内嵌套 layout）。
• 仪表盘（多个 panel 内嵌套 layout + charts）。
• 复杂表单（顶部工具栏 + 左右分割编辑区）。

更多示例：

• 官方复杂面板布局：https://www.jeasyui.com/tutorial/layout/panel.php
• 嵌套布局 Demo：https://www.jeasyui.com/demo/main/index.php?plugin=Layout&pitem=Complex+Layout
• 窗口内嵌套布局：https://www.jeasyui.com/tutorial/win/win3.php

如果需要 XP 风格左侧面板、动态加载内容、或结合 datagrid/tabs 的更复杂示例，请提供更多要求！