Layout

通过$.fn.layout.defaults可以重写Layout.

layout是一个具有五个区域的容器。只有中间区域面板是必须的，其余的都是边界面板。每一个边界面板都可以通过拖动它的边界来改变尺寸，还可以通过面板上的收缩\展开按钮来收缩或者展开面板。另外，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 是否显示收缩\展开按钮 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
Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生