一、前言
在我的后台管理系统中我选择了easyui 的layout控件来实现主页的布局。通过layout可以实现简单使用的布局，布局容器有5个区域：北、南、东，西和中间。中间区域面板是必须的，边缘面板都是可选的。每个区域面板都可以通过拖拽其边框改变大小，也可以点击折叠按钮将区域面板折叠起来。布局可以进行嵌套，用户可以通过组合布局来构建复杂的布局结构。
二、使用举例
创建布局
1、使用完整页面创建布局，我在系统中就是通过这种方式来实现的。
<body class="easyui-layout"> <form runat="server" > <div id="banner" data-options="region:'north'" > <img src="themes/default/images/hdlogo.png" /> <span >多项目管理平台后台管理系统</span> </div> <div id="left" data-options="region:'west',title:'导航菜单',split:true" style=" 15%;"> <div id="left_content" class="easyui-accordion" data-options="fit:true"> <div title="基础数据"> <ul class="easyui-tree" data-options="lines: true"> <li>组织分解结构</li> <li>岗位分解结构</li> <li>用户管理</li> </ul> </div> <div title="权限管理"> <ul class="easyui-tree" data-options="lines: true"> <li>角色管理</li> <li>用户权限分配</li> <li> <span>数据权限管理</span> <ul> <li>数据权限关联配置</li> <li>数据权限批量处理</li> </ul> </li> </ul> </div> <div title="流程管理"> <ul class="easyui-tree" data-options="lines: true"> <li>流程预定义</li> <li>流程监控</li> </ul> </div> <div title="系统集成管理" data-options="lines: true"> <ul class="easyui-tree"> <li>手动同步数据</li> <li>数据同步日志</li> </ul> </div> </div> </div> <div id="Content" data-options="region:'center'" style=" 84%;"> <div id="top"> <span> <input id="ProjectTree" style=" 300px;" /> </span> <span>用户：<asp:Label ID="LoginName" runat="server" Text=""></asp:Label> <strong> <asp:LinkButton ID="UserLogout" runat="server" OnClick="UserLogout_Click" >【 注销 】</asp:LinkButton> </strong> </span> </div> <div id="center" style="height: 90%;"> center </div> <div id="footer" > XXX版权所有 © 2013 </div> </div> </form> </body>
至于嵌套布局等使用到了在做总结。
布局属性
| 属性名 | 属性值类型 | 描述 | 默认值 |
|---|---|---|---|
| fit | boolean | 如果设置为true，布局组件将自适应父容器。当使用'body'标签创建布局的时候，整个页面会自动最大。 | false |
区域面板属性
区域面板属性定义与panel组件类似，下面的是公共的和新增的属性：
| 属性名 | 属性值类型 | 描述 | 默认值 |
|---|---|---|---|
| title | string | 布局面板标题文本。 | null |
| region | string | 定义布局面板位置，可用的值有：north, south, east, west, center。 | |
| border | boolean | 为true时显示布局面板边框。 | true |
| split | boolean | 为true时用户可以通过分割栏改变面板大小。 | false |
| iconCls | string | 一个包含图标的CSS类ID，该图标将会显示到面板标题上。 | null |
| href | string | 用于读取远程站点数据的URL链接 | null |
| collapsible | boolean | 定义是否显示折叠按钮。（该属性自1.3.3版开始可用） | true |
| minWidth | number | 最小面板宽度。（该属性自1.3.3版开始可用） | 10 |
| minHeight | number | 最小面板高度。（该属性自1.3.3版开始可用） | 10 |
| maxWidth | number | 最大面板宽度。（该属性自1.3.3版开始可用） | 10000 |
| maxHeight | number | 最大面板高度。（该属性自1.3.3版开始可用） | 10000 |
三、总结
不积跬步，无以至千里！