jQuery-EasyUI基础教程之创建简单布局.docx

jQuery-EasyUI基础教程之创建简单布局课程目标 掌握Layout的使用方法LayoutLayout简介使用Layout控件可以简单、快速的为后台管理系统的页面布局。布局容器有5个区域：北、南、东、西和中间。中间区域面板是必须的，边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小，也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套，用户可以通过组合布局构建复杂的布局结构。效果如图：开发Layout程序1. 2. 3. 4. 5. 6. 7. 对于后台管理系统，通常会将整个body标签当作layout来布局。代码如下：1. 2. 3. 4. 5. 6. 7. Layout常用属性属性名属性值类型描述默认值fitboolean如果设置为true，布局组件将自适应父容器。当使用body标签创建布局的时候，整个页面会自动最大。false区域面板常用属性属性名属性值类型描述默认值titlestring布局面板标题文本。nullregionstring定义布局面板位置，可用的值有：north, south, east, west, center。nullborderboolean为true时显示布局面板边框。truesplitboolean为true时用户可以通过分割栏改变面板大小。falseiconClsstring一个包含图标的CSS类ID，该图标将会显示到面板标题上。nullhrefstring用于读取远程站点数据的URL链接nullcollapsibleboolean定义是否显示折叠按钮。trueminWidthnumber最小面板宽度。10minHeightnumber最小面板高度。10maxWidthnumber最大面板宽度。10000maxHeightnumber最大面板高度。10000参考jQuery EasyUI的API。代码如下：1. 2.效果如下图：JS代码这样编写：1. var $southPanel = $(body).layout(panel,south);2. $southPanel.panel(3. split:false,4. border:false,5. iconCls:icon-add6. ); 7.效果如下图：Layout常用方法方法名方法参数描述resizenone设置布局大小。panelregion返回指定面板，region参数可用值有：north,south,east,west,center。collapseregion折叠指定面板。region参数可用值有：north,south,east,west。expandregion展开指定面板。region参数可用值有：north,south,east,west。addoptions添加指定面板。属性参数是一个配置对象，更多细节请查看选项卡面板属性。removeregion移除指定面板。region参数可用值有：north,south,east,west。代码如下：1. $(body).layout(add, 2. region: west, 3. width: 180, 4. title: West Title, 5. split: true, 6. tools: 7. iconCls:icon-add, 8. handler:function()alert(add) 9. , 10. iconCls:icon-remove, 11. ha