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. 下载github项目

    两种方法:通过https或者ssh地址 找一个放置项目的文件夹,右键git bash here 输入 $ git clone https://项目地址 通过https 项目地址可以直接复制网页地址,或 ...

  2. ElasticSearch学习笔记--安装

    1.安装ElasticSearch https://www.elastic.co/guide/en/elasticsearch/reference/current/docs-index_.html 这 ...

  3. Farseer.net轻量级开源框架 中级篇：动态数据库访问

    导航 目   录:Farseer.net轻量级开源框架 目录 上一篇:Farseer.net轻量级开源框架 中级篇: 自定义配置文件 下一篇:Farseer.net轻量级开源框架 中级篇: 数据库切换 ...

  4. （转）淘淘商城系列——使用Spring来管理Redis单机版和集群版

    http://blog.csdn.net/yerenyuan_pku/article/details/72863323 我们知道Jedis在处理Redis的单机版和集群版时是完全不同的,有可能在开发的 ...

  5. 生成count个[0-n)不重复的随机数

    代码来自:https://www.cnblogs.com/ningvsban/p/3590722.html,感觉实现的方式不错(做了一点小小修改) public static ArrayList ge ...

  6. 【转】上传并解析excel

    [转载自]http://blog.csdn.net/u011563331/article/details/51322523 通过解析excel,将数据存储到数据库中.现在将方法保存下来. 使用的是ap ...

  7. struts2源码下载链接

    http://blog.csdn.net/qq_qun_247286682/article/details/6975298

  8. 这份Koa的简易Router手敲指南请收下

    上一期链接--也就是本文的基础,参考KOA,5步手写一款粗糙的web框架 本文参考仓库:点我 Router其实就是路径匹配,通过匹配路径,返回给用户相应的网站内容. 以下方例子为例,主要通过提取req ...

  9. [angular2]解决安装 angular-cli 报错：Cannot find module 'github-url-from-git'

    1.运行:sudo rm -rf /usr/local/lib/node_modules/npm 2.重新安装最新版本的node,最新版本的node已经集成了npm,所以无需另外安装. 3.运行:su ...

  10. UVA12118 Inspector's Dilemma（欧拉路径）

    题目: 某个国家有V(V≤1000)个城市,每两个城市之间都有一条双向道路直接相连,长度为T(每条边的长度都是T).你的任务是找一条最短的道路(起点和终点任意), 使得该道路经过E条指定的边.输出这条 ...