怎么在使用easyui layout 布局如何引用页面

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎么在使用easyui layout 布局如何引用页面相关的知识，希望对你有一定的参考价值。

参考技术A 第一步，打开eclipse IDE工具，创建web动态项目；在web项目目录WebContent下创建静态页面index.html，如下图所示：

第二步，引入EasyUI中的主题样式文件easyui.css、icon.css、demo.css，以及引入jQuery核心js和EasyUI相关的js文件，如下图所示：

第三步，创建EasyUI框架布局控件layout，并设置五个方向东南西北中的样式，如下图所示：

第四步，预览该静态页面，这时在浏览器看到页面被分成五个部分，每个部分都有一个标题，如下图所示：

第五步，在jquery初始化函数里编写某一部分折叠方法函数，调用layout()方法，如下图所示：

6
第六步，再次预览页面，会看到为“南”的部分被折叠起来了，如下图所示： 参考技术B layout就是一种布局控件，可用于页面级别的布局，也可以用于局部布局。API上写的很清楚，你自己看一下自带的DEMO就知道了，祝你好运！本回答被提问者采纳

easyUI layout

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
fit boolean 设置为true设置layout的大小适应父容器大小.当创建layout 在body标签上的时候,它将自动调整大小为最大填满整个页面. false

Region Panel 选项

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

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

方法

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

以上是关于怎么在使用easyui layout 布局如何引用页面的主要内容，如果未能解决你的问题，请参考以下文章

安卓layout布局，如何靠右

第二百零二节，jQuery EasyUI，Layout(布局)组件

easyUI layout布局

easyui Layout布局面板的一些功能

juery easyui 布局伸缩时怎么让 panel充满屏幕？求教

EasyUI---layout布局树形组件选项卡tabs