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. es6之Proxy，Reflect

    Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写. var proxy = new Proxy(ta ...

  2. 百度人脸识别AI实践.doc

    0, 前言 百度开放了很多AI能力,其中人脸识别就是其中之一. 本文对百度人脸识别AI进行实践检验,看看其使用效果如何. 鉴于是最为基础的实践,基本都是在其接口范例代码修改而来. 百度人脸识别AI网站 ...

  3. mfc按钮悬停显示文字

    .h CToolTipCtrl m_toopTip; .cpp oninitdialog void CDlgDwgLibMan::InitTooltips(){ EnableToolTips(); m ...

  4. 02网页<body></body>常用标记及属性

    网页<body></body>常用标记及属性 <body></body>标记表示的是在整个浏览器内容框架中显示的部分. text属性用于控制HTML文档 ...

  5. form表单中只有一个input时，按回车键后表单自动提交(form表单的一个小坑)

    form中只有一个input按回车键表单会自动提交 在一个form表单中,若只有一个input,按回车键表单会自动提交,但是当表单中存在多个input时,按回车键不会执行任何操作,这是form表单的一 ...

  6. 数组array的常用方法简介

    数组方法简介 数组总共有22种方法,本文将其分为以下几类来进行详细介绍. 原数组变化:push() pop() shift() unshift() reverse() sort() splice() ...

  7. Python使用Flask框架，结合Highchart处理jsonl数据

    1.html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  8. python3.x Day2 购物车程序练习

    购物车程序: 1.启动程序后,输入用户名密码后,如果是第一次登录,让用户输入工资,然后打印商品列表 2.允许用户根据商品编号购买商品 3.用户选择商品后,检测余额是否够,够就直接扣款,不够就提醒 4. ...

  9. Python学习：ModuleNotFoundError: No module named 'pygal.i18n' 的解决方法

    最近在学<Python编程:从入门到实践>,16.2小结中 from pygal.i18n import COUNTRIES 获取两个字母的国别码,我用的pygal的版本是2.4.0(终端 ...

  10. Hdu 4864(Task 贪心)（Java实现）

    Hdu 4864(Task 贪心) 原题链接 题意:给定n台机器和m个任务,任务和机器都有工作时间值和工作等级值,一个机器只能执行一个任务,且执行任务的条件位机器的两个值都大于等于任务的值,每完成一个 ...