Layout

通过$.fn.layout.defaults能够重写Layout.

layout是一个具有五个区域的容器。仅仅有中间区域面板是必须的，其余的都是边界面板。每个边界面板都能够通过拖动它的边界来改变尺寸。还能够通过面板上的收缩\展开button来收缩或者展开面板。另外，layout还能够嵌套。因此我们能够用它来创建一个复杂的layout。



依赖

  • panel
  • resizable

使用 演示样例

创建Layout
1、加入一个'easyui-layout'的class来创建Layout
<div id="cc" class="easyui-layout" style="width:600px;height:400px;">

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

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

    <div data-options="region:'east',title:'East',split:true" style="width:100px;"></div>

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

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

</div>

2、创建一个全屏的Layout

<body class="easyui-layout">

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

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

    <div data-options="region:'east',title:'East',split:true" style="width:100px;"></div>

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

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

</body>

3、创建一个嵌套的Layout

<body class="easyui-layout">

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

    <div data-options="region:'center'">

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

            <div data-options="region:'west'" style="width:180px"></div>

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

        </div>

    </div>

</body>

4、通过ajax来加载内容

<body class="easyui-layout">

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

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

</body>

Layout 属性

Name Type Description Default
fit boolean 是否填充满父容器 false

区域面板的属性

区域面板的非常多选项都定义在panel组件中了，以下列出的是区域面板中添加的一些经常使用选项

Name Type Description Default
title string 区域面板的标题 null
region string 定义区域面板的位置。值域为: north, south, east, west, center.  
border boolean 是否显示边框 true
split boolean 是否隔开两块区域面板。并能够resize false
iconCls string 显示在区域面板标题之前的图标 null
href string ajax加载内容的地址 null
collapsible boolean 是否显示收缩\展开button true
minWidth number 区域面板的最小宽 10
minHeight number 区域面板的最小高 10
maxWidth number 区域面板的最大宽 10000
maxHeight number 区域面板的最大高 10000

方法

Name Parameter Description
resize param 设置layout的尺寸. 'param'有两个属性:width,height

代码举例:

$('#cc').layout('resize', {

	width:'80%',

	height:300

})
panel region 返回指定的面板,參数取值能够是:'north','south','east','west','center'.
collapse region 收缩指定的面板, 參数取值能够是:'north','south','east','west'.
expand region 展开指定的面板,參数取值能够是, the 'region' parameter possible values:'north','south','east','west'.
add options 添加一块面板,options即为上面介绍的区域面板的属性
remove region 移除指定的面板, 參数取值能够是:'north','south','east','west'.

easyUI中的layout的更多相关文章

  1. easyui中datagrid+layout布局

    1.掌握layout布局 首先,layout布局的具体使用可参考官网http://www.jeasyui.net/plugins/162.html layout布局分为东南西北中五个区域,如图我们将其 ...

  2. PHP 使用编码树，生成easyui中的tree样式

    生成树的时候,数据库中一般设计的都为无级数,即为:父子节点的树,例如:基本的数据表设计为: nodecode 节点编码 parentnodecode 父节点编码 nodename  节点名称 这样的形 ...

  3. EasyUI 中 DataGrid 控件 列 如何绑定对象中的属性

    EasyUI 中 DataGrid 控件 是我们经常用到的控件之一, 但是 DataGrid 控件 在绑定显示列时却不支持对象属性绑定. 模型如下: public class Manager impl ...

  4. 在easyui中如何修改combobox的下拉框的高度为自适应高度

    在easyui中,有时候easyui下拉框的高度比较高,如果我们的值比较少,而下拉框的高度很高的话看起来不好看,修改前效果如下所示: 要修改下拉框的高度和我们的值自适应的 话,只要添加一个panelH ...

  5. SpringMVC结合easyUI中datagird实现分页

    SpringMVC结合easyUI中datagird实现分页 DataGrid以表格形式展示数据,并提供了丰富的选择.排序.分组和编辑数据的功能支持.轻量级,单元格合并.多列标题.冻结列和页脚只是其中 ...

  6. Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法

    Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法 2014-03-27 11:44:46|  分类: Easy UI|举报|字号 订阅     可以使用$.parser.pa ...

  7. EasyUI中datagrid控件的使用 设置多行表头(两行或多行)

    EasyUI中的datagrid控件十分强大,能生成各种复杂的报表,现在因为项目需要,需要生成一个表头两行的表,找了一些说明文档,以下用一个实例来说明一下: 第一种方法: $('#divData'). ...

  8. EasyUI中在表单提交之前进行验证

    使用EasyUi我们可以在客户端表单提交之前进行验证,过程如下:只需在onSubmit的时候使用return  $("#form1").form('validate')方法即可,E ...

  9. EasyUI中动态生成标签页

    这是最近学到的内容,当时是有思路但是不知道怎么获取当前的点击对象,就没有实现功能,通过更深入的学习,我知道了不仅仅是Java,Oracle中有一个this,同样的EasyUI中也存在一个this,来获 ...

随机推荐

  1. Elasticsearch--地理搜索

    目录 地理位置索引 空间搜索映射定义 示例 基于距离的排序 边界框过滤 距离的限制 任意地理形状搜索 点 包络线 多边形 多个多边形 把形状保存到索引中 地理位置索引 空间搜索映射定义 elastic ...

  2. 百度地图API在vue-cli中路径错误的问题

    在使用百度地图的时候,需要使用自定义的icon图片,百度的案例中使用的是线上地址,但当替换为本地图片路径的时候,错误出现了 这是本地图片地址 ) // 设置覆盖物大小 ); 这里有一点需要注意,这里路 ...

  3. Python自动监控错误日志

    平时在查看日志的时候打开满屏的日志,看上去有点凌乱.于是写个Python脚本过滤出想要看的错误的日志.直接上脚本 脚本示例 def read_log(logname,keyword): tell = ...

  4. C++为什么抓不到除0错“异常”?

    http://blog.csdn.net/nanyu/article/details/6475555 有人问这个问题: try { std::cout << 10/0 << s ...

  5. JSON字符串的生成

    public class Corporation { public string remark { get; set; } public string version { get; set; } pu ...

  6. C: 当字符数组首指针转化成char *指针，sizeof(*ptr)不为array的size

    #include <stdio.h> #include <string.h> int main() { char a[10] = "\0"; char *p ...

  7. Spring Boot 与任务

    一.任务 1.异步任务 package com.yunche.task.service; import org.springframework.stereotype.Service; /** * @C ...

  8. C++ CEF 浏览器中显示 Tooltip(标签中的 title 属性)

    在 Windows 中将 CEF 集成到 C++ 客户端以后,默认是无法显示 tooltip 的,比如图片标签中的 title 属性. 实现的方式其实很简单,按下面的步骤操作就可以: 创建一个文本文件 ...

  9. linux初步学习有感

    经过了一段时间对linux的接触,从最开始接触到的deepin到后来我最喜欢的KaliLinux,感受到了这个我曾经并不了解的操作系统的独特魅力. 我是到了大学才知道linux这个系统的,但是在小时候 ...

  10. win10 ubuntu 子系统安装php

    apt-get install python-software-propertiesadd-apt-repository ppa:ondrej/phpapt-get updateapt-get ins ...