摘要:覆盖默认值 $.fn.layout.defaults.   布局,最多可以有五个区域的容器:north(北), south(南), east(东), west(西) 和 center(中间),center 中间的区域是必须的,但是面板边缘区域的面板是可选的。

脚本宝典收集整理的这篇文章主要介绍了

javascript代码实例教程-jQuery EasyUI API – Layout – Layout[原创汉化官方API]

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 Layout

覆盖默认值 $.fn.layout.defaults.

 

  布局,最多可以有五个区域的容器:north(北), south(南), east(东), west(西) 和 center(中间),center 中间的区域是必须的,但是面板边缘区域的面板是可选的。

 

  每一个边缘区域面板都可以通过拖动边框来调整大小,他们还可以通过点击 收缩/展开 按钮将其 收缩/展开。

 

  布局可以嵌套,从而使用户可以构建自己需要的复杂的布局。

 

 

 

依赖关系

panel

resizable

用法示例

创建布局

1. 通过HTML标记创建布局。

 

为<p/>标签添加 'easyui-layout' 类:

 

复制代码

1 <p id="cc" class="easyui-layout" style="width:600px;height:400px;">  

2     <p data-options="region:'north',title:'North Title',split:true" style="height:100px;"></p>  

3     <p data-options="region:'south',title:'South Title',split:true" style="height:100px;"></p>  

4     <p data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></p>  

5     <p data-options="region:'west',title:'West',split:true" style="width:100px;"></p>  

6     <p data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></p>  

7 </p>  

复制代码

 

 

2. 在整个页面创建Layout布局:

 

复制代码

1 <body class="easyui-layout">  

2     <p data-options="region:'north',title:'North Title',split:true" style="height:100px;"></p>  

3     <p data-options="region:'south',title:'South Title',split:true" style="height:100px;"></p>  

4     <p data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></p>  

5     <p data-options="region:'west',title:'West',split:true" style="width:100px;"></p>  

6     <p data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></p>  

7 </body> 

复制代码

 

 

3. 创建嵌套布局。

 

请注意,里面的 west(西部的) 布局是展开的:

 

复制代码

1 <body class="easyui-layout">  

2     <p data-options="region:'north'" style="height:100px"></p>  

3     <p data-options="region:'center'">  

4         <p class="easyui-layout" data-options="fit:true">  

5             <p data-options="region:'west',collapsed:true" style="width:180px"></p>  

6             <p data-options="region:'center'"></p>  

7         </p>  

8     </p>  

9 </body>  

复制代码

 

 

4. 使用Ajax加载内容。

 

Layout是基于 panel 面板创建的。各地区的panel面板提供了异步加载内容的URL支持。使用异步加载技术,用户可以使自己的布局页面显示地更加“快捷”。

 

1 <body class="easyui-layout">  

2     <p data-options="region:'west',href:'west_content.php'" style="width:180px" />  

3     <p data-options="region:'center',href:'center_content.php'" />  

4 </body>  

 

 

收起Layout布局面板

1 $('#cc').layout();   

2 // collapse the 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 });  

复制代码

 

布局选项

名称 类型 描述 默认值

fit boolean 设置为“true”来设置它布局大小,以适应它的父级容器。当在“body”标签上创建布局Layout布局时,它将会自动最大化到整个页面的大小。 false

 

区域面板选项

区域面板选项在panel面板中定义,一面是一些常用的属性值:

 

名称 类型 描述 默认值

title string Layout布局中panel面板的标题文字。 null

region string 定义Layout布局面板的位置,该值可以是下列之一:north(北), south(南), east(东), west(西), center(中).

border boolean 设置为“true”则显示Layout布局面板的边框。 true

split boolean 设置为“true”则显示分隔符以使用户可以改变panel面板的大小。 false

iconCls string 一个icon图标css的class类,用于在panel标题上显示指定的图标。 null

href string 一个从远程站点加载数据的URL。 null

 

方法

名称 参数 描述

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面板,该参数是一个配置对象,详细信息请参见Tab Panel属性。

remove region 删除指定的面板,“region” 参数可能的值有:‘north'(北),'south'(南),'east'(东),'west'(西)。

 

 

 

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

总结

以上是脚本宝典为你收集整理的

javascript代码实例教程-jQuery EasyUI API – Layout – Layout[原创汉化官方API]

全部内容,希望文章能够帮你解决

javascript代码实例教程-jQuery EasyUI API – Layout – Layout[原创汉化官方API]

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过