第一章  介绍

                   EasyUI -- Layout（布局）将布局容器分成了5个区域，分别是：east（东）、west（西）、south（南）、north（北）和center（中）。center（中）区域是必须的，其他边缘区域都是可选的。每个边缘区域都可以通过拖拽的方式改变大小，也可以点击折叠按钮将面板折叠起来。EasyUI 的布局是很灵活的，可以根据用户的需求，使用不同的嵌套，构建复杂的布局。

第二章  创建布局的几种方法

1.为<div/>标签增加名为'easyui-layout'的类ID。  

<div id="cc" class="easyui-layout" fit="true" style="overflow:hidden;">   
    <div data-options="region:'north',title:'North'" style="height:100px;overflow:hidden;"></div>   
    <div data-options="region:'south',title:'South'" style="height:100px;overflow:hidden;"></div>   
    <div data-options="region:'east',title:'East'" style="width:100px;overflow:hidden;"></div>   
    <div data-options="region:'west',title:'West'" style="width:100px;overflow:hidden;"></div>   
    <div data-options="region:'center',title:'center'" style="padding:5px;overflow:hidden;"></div>
	</div>   
    </div>

2. 使用完整页面创建布局

<pre name="code" class="java"><pre name="code" class="java"><pre name="code" class="java" style="font-size: 18px;"><body class="easyui-layout">   	
    <div data-options="region:'north',title:'North'" style="height:100px;overflow:hidden;"></div>   
    <div data-options="region:'south',title:'South'" style="height:100px;overflow:hidden;"></div>   
    <div data-options="region:'east',title:'East'" style="width:100px;overflow:hidden;"></div>   
    <div data-options="region:'west',title:'West'" style="width:100px;overflow:hidden;"></div>   
    <div data-options="region:'center',title:'center'" style="padding:5px;overflow:hidden;"></div>
</body>

这两种布局方法实现的效果都是一样，下面这张图片就是效果图


第三章 嵌套的使用方法

<body class="easyui-layout">   	
    <div data-options="region:'north',title:'North'" style="height:100px;overflow:hidden;"></div>   
    <div data-options="region:'south',title:'South'" style="height:100px;overflow:hidden;"></div>   
    <div data-options="region:'east',title:'East'" style="width:100px;overflow:hidden;"></div>   
    <div data-options="region:'west',title:'West'" style="width:100px;overflow:hidden;"></div>   
    <div data-options="region:'center',title:'center'" style="padding:5px;overflow:hidden;">
	    <div class="easyui-layout" data-options="fit:true">   
        <div data-options="region:'north',title:'North'" style="height:100px;overflow:hidden;"></div>   
        <div data-options="region:'south',title:'South'" style="height:100px;overflow:hidden;"></div>   
        <div data-options="region:'east',title:'East'" style="width:100px;overflow:hidden;"></div>   
        <div data-options="region:'west',title:'West'" style="width:100px;overflow:hidden;"></div>   
        <div data-options="region:'center',title:'center'" style="padding:5px;overflow:hidden;"></div>
		</div>
	</div>
</body>
 
  
效果图
 
  
 
    
  
 
  
 
  
第四章 小结
 
  
以上EasyUI -- Layout（布局）的简单介绍，写此篇博客主要记录我的学习过程，也希望对阅读此博客的人有点帮助。
 
  
 
  
  
 
  
 
  
 
 
 
 
 
  
  
 
 
 
 

 

 
  
 

 
 
 
 

 

 
 
  

 
  

        # easyui
      
  
 
 Logo 
向您推荐>>Eolink开发者社区
 
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
 
 
  
更多推荐
  
 
深入理解 Mocha 测试框架：从零实现一个 Mocha
 
前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集
 
avatar 云原生
 
 
ELK实现containerd的容器日志采集展示【基于logging的全栈监测】
 
企业级ELK Stack构建介绍
 
avatar 云原生
 
 
(20200916 Solved)docker-compose up创建容器自动退出
 
问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...
 
avatar 云原生