首页 > 代码库 > easyUI layout

easyUI layout

2024-08-14 09:24:32   222人阅读

layout是一个容器,它有5个区域:north(北丐),south(南帝),east(东邪),west(西毒),center(中神通),像不像金庸的天龙八部,中间区域的panel是必须的,

周边区域panel是可选项,所有周边区域的panel可以改变大小通过拖动边框,他们也可以折叠(collapse)通过点击触发折叠事件,布局可以嵌套,因此用户

可以创建你想要的复杂布局;

技术分享

 

使用示例

创建 Layout
1.通过标记创建layout.
 记得添加"easyui-layout"样式给div标记.
  1. <div id="cc" class="easyui-layout" style="width:600px;height:400px;">    
  2.     <div data-options="region:‘north‘,title:‘North Title‘,split:true" style="height:100px;"></div>    
  3.     <div data-options="region:‘south‘,title:‘South Title‘,split:true" style="height:100px;"></div>    
  4.     <div data-options="region:‘east‘,iconCls:‘icon-reload‘,title:‘East‘,split:true" style="width:100px;"></div>    
  5.     <div data-options="region:‘west‘,title:‘West‘,split:true" style="width:100px;"></div>    
  6.     <div data-options="region:‘center‘,title:‘center title‘" style="padding:5px;background:#eee;"></div>    
  7. </div>    
2.创建一个layout在整个页面.
  1. <body class="easyui-layout">    
  2.     <div data-options="region:‘north‘,title:‘North Title‘,split:true" style="height:100px;"></div>    
  3.     <div data-options="region:‘south‘,title:‘South Title‘,split:true" style="height:100px;"></div>    
  4.     <div data-options="region:‘east‘,iconCls:‘icon-reload‘,title:‘East‘,split:true" style="width:100px;"></div>    
  5.     <div data-options="region:‘west‘,title:‘West‘,split:true" style="width:100px;"></div>    
  6.     <div data-options="region:‘center‘,title:‘center title‘" style="padding:5px;background:#eee;"></div>    
  7. </body>    
3.创建嵌套layout
注意那个west panel的内部的布局是折叠的.
  1. <body class="easyui-layout">    
  2.     <div data-options="region:‘north‘" style="height:100px"></div>    
  3.     <div data-options="region:‘center‘">    
  4.         <div class="easyui-layout" data-options="fit:true">    
  5.             <div data-options="region:‘west‘,collapsed:true" style="width:180px"></div>    
  6.             <div data-options="region:‘center‘"></div>    
  7.         </div>    
  8.     </div>    
  9. </body>    
4.通过ajax加载内容.
这个layout的创建是基于panel的,所有内部区域panel提供内置支持通过"URL"异步加载内容,使用异步加载技术,用户可以是他们的layout页面显示快了很多.
  1. <body class="easyui-layout">    
  2.     <div data-options="region:‘west‘,href:‘west_content.php‘" style="width:180px" ></div>    
  3.     <div data-options="region:‘center‘,href:‘center_content.php‘" ></div>    
  4. </body>    
折叠 Layout Panel
  1. $(‘#cc‘).layout();    
  2. // 折叠west panel  
  3. $(‘#cc‘).layout(‘collapse‘,‘west‘);    
添加west 区域panel 工具按钮
  1. $(‘#cc‘).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.         handler:function(){alert(‘remove‘)}    
  12.     }]    
  13. });    

Layout 选项

NameTypeDescriptionDefault
fitboolean设置为true设置layout的大小适应父容器大小.当创建layout 在body标签上的时候,它将自动调整大小为最大填满整个页面.false

Region Panel 选项

region panel 选项 是定义在panel组件, 下面是一些常用和新增的属性:

NameTypeDescriptionDefault
titlestring layout panel标题文本.null
regionstring定义 layout panel 位置, 这个值是下面其中的一个: north, south, east, west, center. 
borderbooleanTrue 显示 layout panel 的边框(border).true
splitbooleanTrue 显示分割条,通过此属性用户可以改变panel的大小.false
iconClsstring一个 icon CSS 样式,用来展示一个icon在panel的头部.null
hrefstring一个URL从一个远程的站点加载数据.null

方法

NameParameterDescription
resizenone设置 layout 大小.
panelregion返回特性的 panel, 这个 ‘region‘参数的可用值有:‘north‘,‘south‘,‘east‘,‘west‘,‘center‘.
collapseregion折叠特定的panel,这个 ‘region‘参数的可用值有:‘north‘,‘south‘,‘east‘,‘west‘.
expandregion展开一个特定的 panel, 这个 ‘region‘ 参数的可用值有:‘north‘,‘south‘,‘east‘,‘west‘.
addoptions添加一个定义panel, 这个options参数是一个配置对象, 请见tab panel 属性得到更多详细信息.
removeregion移除一个特定的 panel, 这个‘region‘ 参数的可用值有:‘north‘,‘south‘,‘east‘,‘west‘.

easyUI layout


联系
我们