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>