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. selenium学习第三天，新建一个测试用例（运行失败）。

    今天的意外收获,在找SELENIUM实例的时候,发现一个JS实例,功能各类非常全演示及代码都有,谢谢大神的分享:http://www.miniui.com/demo/#src=datagrid/pag ...

  2. Android 网络图片查看器与网页源码查看器

    在AndroidManifest.xml里面先添加访问网络的权限: <uses-permission android:name="android.permission.INTERNET ...

  3. window下编写python脚本在linux下运行出错 usr/bin/python^M: bad interpreter: No such file or directory

    今天在windows下使用notepad++写了个python脚本,传到linux服务器执行后提示:-bash: ./logger.py: usr/bin/python^M: bad interpre ...

  4. Tcl之Math

    expr is for Tcl to do math operations. It takes all of its arguments ("2 + 2" for example) ...

  5. Linux文件排序和FASTA文件操作

    文件排序 seq: 产生一系列的数字; man seq查看其具体使用.我们这使用seq产生下游分析所用到的输入文件. # 产生从1到10的数,步长为1 $ seq 1 10 1 2 3 4 5 6 7 ...

  6. 14Oracle Database 高级事务，游标

    Oracle Database 高级事务,游标 隔离级别 脏读 不可重复读 虚读 读未提交 Read uncommitted 可以 可以 可以 读已提交 Read committed 不可以 可以 可 ...

  7. 微服务网关从零搭建——（七）更改存储方式为oracle

    资源准备: 下载开源项目 新建oracle表: -- ---------------------------- -- Table structure for OcelotGlobalConfigura ...

  8. 网络编程 - 简单的socket例子

    1.客户端 #客户端import socketclient=socket.socket() #生成socket连接对象client.connect(("localhost",696 ...

  9. <SpringMvc>入门三 参数绑定

    1.get请求 <%--请求参数的绑定--%> <%--get请求参数--%> <a href="/param/testParam1?username=tom& ...

  10. springboot+idea+jsp 404问题

    我是这么解决的 对于单一项目,加入以下jar包即可. <!--前台页面的支持--> <dependency> <groupId>javax.servlet</ ...