jQuery EasyUI 布局 - 为网页创建边框布局
jQuery EasyUI 布局 - 为网页创建边框布局（Border Layout）
jQuery EasyUI的layout组件是最常用的布局插件之一，它可以将整个页面（或某个容器）分为五个区域：north（北）、south（南）、east（东）、west（西）、center（中），类似于经典的边框布局（border layout）。非常适合构建后台管理系统、仪表盘等需要固定头部、侧边栏、主体内容的页面。
官方参考：
- 文档：https://www.jeasyui.com/documentation/layout.php
- 教程：https://www.jeasyui.com/tutorial/layout/layout1.php
- 在线 Demo：https://www.jeasyui.com/demo/main/index.php?plugin=Layout
步骤 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: 创建基本的边框布局
最简单的方式：在<body>或某个容器上添加class="easyui-layout"，然后用data-options="region:'xxx'"定义五个区域。
<bodyclass="easyui-layout"><!-- 北部：顶部导航/标题栏 --><divdata-options="region:'north'"style="height:60px;padding:10px;background:#3399FF;color:white;"><h1>我的管理系统 - jQuery EasyUI 边框布局示例</h1></div><!-- 南部：底部版权信息 --><divdata-options="region:'south'"style="height:50px;padding:10px;text-align:center;background:#eee;">© 2025 My Company. All rights reserved.</div><!-- 西部：左侧菜单栏 --><divdata-options="region:'west',split:true,title:'导航菜单'"style="width:200px;"><divclass="easyui-accordion"data-options="fit:true,border:false"><divtitle="系统管理"><ulclass="easyui-tree"><li>用户管理</li><li>角色管理</li><li>权限设置</li></ul></div><divtitle="内容管理"><ulclass="easyui-tree"><li>文章管理</li><li>分类管理</li></ul></div><divtitle="数据统计"><ulclass="easyui-tree"><li>销售报表</li><li>访问统计</li></ul></div></div></div><!-- 东部：可选的右侧面板（可隐藏） --><divdata-options="region:'east',split:true,collapsed:true,title:'日历与待办',iconCls:'icon-calendar'"style="width:250px;padding:10px;"><divclass="easyui-calendar"style="width:100%;"></div><divstyle="margin-top:20px;"><h3>今日待办</h3><ul><li>完成项目文档</li><li>回复客户邮件</li></ul></div></div><!-- 中部：主内容区域（必须存在） --><divdata-options="region:'center',title:'主内容区'"><divclass="easyui-tabs"data-options="fit:true,border:false"><divtitle="欢迎页"style="padding:20px;"><h2>欢迎使用 jQuery EasyUI 管理系统！</h2><p>这是一个使用 EasyUI Layout 构建的经典后台布局示例。</p></div><divtitle="数据表格"data-options="href:'datagrid.html'"></div><divtitle="关于"></div></div></div></body>步骤 3: 关键属性说明
| 属性 | 说明 |
|---|---|
region:'north' | 顶部区域，高度固定，通常放 logo、导航栏 |
region:'south' | 底部区域，高度固定，通常放版权信息 |
region:'west' | 左侧区域，宽度可调，常放菜单树（accordion + tree） |
region:'east' | 右侧区域，可选，常放快捷工具、日历等（可折叠） |
region:'center' | 中心区域，必须存在，会自动填充剩余空间，通常放 tabs 或 datagrid |
split:true | 允许用户拖动调整区域大小 |
collapsed:true | 初始折叠（常用于 east/west） |
title:'标题' | 区域标题栏 |
iconCls | 标题栏图标 |
fit:true | 让子组件（如 tabs、accordion）自动填充父容器高度/宽度 |
步骤 4: 完整可运行示例（推荐复制运行）
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>jQuery EasyUI 边框布局</title><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></head><bodyclass="easyui-layout"><divregion="north"style="height:70px;padding:15px;background:#4183c4;color:white;overflow:hidden;"><h1style="margin:0;">jQuery EasyUI 后台管理系统</h1></div><divregion="south"style="height:40px;line-height:40px;text-align:center;background:#f4f4f4;">© 2025 All Rights Reserved.</div><divregion="west"split="true"title="主菜单"style="width:220px;"><divclass="easyui-accordion"fit="true"border="false"><divtitle="系统设置"iconCls="icon-setting"><ulclass="easyui-tree"><liiconCls="icon-user">用户管理</li><liiconCls="icon-group">角色管理</li></ul></div><divtitle="内容管理"iconCls="icon-folder"><ulclass="easyui-tree"><li>文章列表</li><li>评论审核</li></ul></div></div></div><divregion="center"><divclass="easyui-tabs"fit="true"border="false"><divtitle="首页"style="padding:30px;font-size:18px;">欢迎来到管理系统！<br><br>这是一个使用 EasyUI Layout 创建的经典边框布局。</div><divtitle="数据展示"></div></div></div></body></html>优势与常见组合
- center 区域：几乎总是放
easyui-tabs，实现多标签页内容切换。 - west 区域：常用
easyui-accordion+easyui-tree实现折叠菜单。 - north 区域：可放工具栏按钮（linkbutton、menubutton）。
- 支持响应式：区域大小可拖动调整。
更多示例：
- 完整后台布局：https://www.jeasyui.com/tutorial/layout/layout2.php
- 嵌套布局：https://www.jeasyui.com/tutorial/layout/layout3.php
- 动态添加/移除区域
如果需要添加顶部工具栏按钮、左侧树形菜单点击切换中心 tabs、或完整后台模板示例，请继续提问！