jQueryEasyUI基础教程之创建简单布局.docxVIP

jQuery-EasyUI基础教程之创建简单布局课程目标掌握Layout的使用方法LayoutLayout简介使用Layout控件可以简单、快速的为后台管理系统的页面布局。布局容器有5个区域：北、南、东、西和中间。中间区域面板是必须的，边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小，也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套，用户可以通过组合布局构建复杂的布局结构。效果如图：开发Layout程序divid=ccclass=easyui-layoutstyle=width:600px;height:400px;divdata-options=region:north,title:NorthTitle,split:truestyle=height:100px;/divdivdata-options=region:south,title:SouthTitle,split:truestyle=height:100px;/divdivdata-options=region:east,iconCls:icon-reload,title:East,split:truestyle=width:100px;/divdivdata-options=region:west,title:West,split:truestyle=width:100px;/divdivdata-options=region:center,title:center titlestyle=padding:5px;background:#eee;/div/div对于后台管理系统，通常会将整个body标签当作layout来布局。代码如下：divid=ccclass=easyui-layoutstyle=width:600px;height:400px;divdata-options=region:north,title:NorthTitle,split:truestyle=height:100px;/divdivdata-options=region:south,title:SouthTitle,split:truestyle=height:100px;/divdivdata-options=region:east,iconCls:icon-reload,title:East,split:truestyle=width:100px;/divdivdata-options=region:west,title:West,split:truestyle=width:100px;/divdivdata-options=region:center,title:center titlestyle=padding:5px;background:#eee;/div/divLayout常用属性属性名属性值类型描述默认值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参考jQueryEasyUI的API。代码如下：divdata-options=region:north,title:North Title,split:false,border:false,iconCls:icon-add,href:top.html,collapsible:falsestyle=height:100px;/div效果如下图：JS代码这样编写：var $southPanel = $(body).layout(panel,south);$southPanel.panel({split:false,border:false,iconCls:icon-add}); 效果如下图：Layout常用方法方法名方法参数描述resizenone设置布局大小。pan