EasyUI -- Layout（布局）

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

标签增加名为’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>

使用完整页面创建布局

<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 -- Layout（布局）相关推荐

EasyUI中layout布局的简单使用
场景效果布局选项(Layout Options) 名称类型描述默认值 fit boolean 当设置为 true 时,就设置布局(layout)的尺寸适应它的父容器.当在 'body' 标签 ...
php layout布局文件,layout（布局） - jQuery EasyUI中文文档 - EasyUI中文站
Layout(布局) 使用$.fn.layout.defaults重写默认值对象. 布局容器有5个区域:北.南.东.西和中间.中间区域面板是必须的,边缘的面板都是可选的.每个边缘区域面板都可以通过拖拽 ...
JQuery EasyUI Layout 在from布局自适应窗口大小
在JQuery EasyUI中,如果直接在form上布局时当窗口大小调整布局不会改变,将布局应用于body时中间隔着一个form,横竖不好弄. 网上有多个解决方案,一般都是写代码,在窗口大小改变时设置 ...
EasyUI之Layout布局
视频课:https://edu.csdn.net/course/play/7621 Layout布局,是按照上北,下南,左西右东,center居中的布局方式.主要属性:region设置布局的方向,st ...
Asp.net WebForm中应用Jquery EasyUI Layout
Asp.net WebForm中应用Jquery EasyUI Layout 按照EasyUI文档中的示例,编写layout代码: <body class="easyui-layout ...
Springboot 使用thymeleaf模板layout布局
使用layout布局前应该在pom文件中导入thymeleaf(dialect)依赖:如下 <properties><project.build.sourceEncoding> ...
Android开发中遇到的问题(二)——新建android工程的时候eclipse没有生成MainActivity和layout布局...
2019独角兽企业重金招聘Python工程师标准>>> 一.新建android工程的时候eclipse没有生成MainActivity和layout布局最近由于工作上的原因,开始学 ...
一天搞定CSS：支持IE的Layout布局--16
1.BFC和Layout区别: BFC和Layout的作用是一样的,只是对浏览器的支持不同而已. BFC- -标准浏览器所具有的 Layout- -IE浏览器所具有的 BFC详解地址:http://b ...
【-】WebKit Layout (布局)
WebKit 在渲染页面之前,需要确定各个元素的位置.大小,而这个过程就是layout(布局).下面,我们对layout的主要过程进行一番说明. 一.FrameView::layout方法 Frame ...

EasyUI -- Layout（布局）

EasyUI -- Layout（布局）相关推荐

最新文章

热门文章