接触EasyUi也快一年了。非常多时候都把重心放在实现功能方面。要显示大量数据了就用DataGrid，要实现分页效果了就想着Tabs，如此等等，再接下来就是考虑CSS、js怎样让这个功能实现的更好。

我非常少去看其他“无关”功能的东西。每次总以没时间为由推迟对这些知识的了解、或者认为这些东西太简单遇到了看帮助文档就成。

然而一年了。我仅仅用过粘贴过来的Layout。在自己设计页面的时候都是用margin取代。这么简单又有用的东西。你是否也忽略了？

一、简单介绍Layout

Layout俗称布局面版，它最多可把页面分成五个部分：east、west、south、north、center（东西南北中）。每一个部分均可放入随意的页面控件，我们能够直接拖动它的边框进行伸缩调整，也能够折叠某些区域。最基本的是还能够在这些区域中再嵌套Layout，即整个页面都是被Layout承包的！

<html>

	<head>

		<title>test</title>

		<link href="jquery-easyui-1.3.2/demo/demo.css" rel="stylesheet" />

		<link href="jquery-easyui-1.3.2/themes/icon.css" rel="stylesheet" />

		<link href="jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet" />

		<script src="jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script>

		<script src="jquery-easyui-1.3.2/jquery.easyui.min.js"></script>

	</head>

	<body class="easyui-layout" style="font-size:46px;">

		<div data-options="region:'north',border:false" style="height:60px;background:#778899;padding:10px;font-size:26px;text-align:center">北部区域:可载入标题、logo等等</div>

		<div data-options="region:'west',split:true,title:'西部'" style="width:150px;padding:10px;">导航栏类的东西放在这里，如：tree、Accordion</div>

		<div data-options="region:'east',split:true,collapsed:true,title:'东部'" style="width:100px;padding:10px;"></div>

		<div data-options="region:'south',border:false" style="height:50px;background:#778899;padding:10px;text-align:center">南部区域:可显示作者、联系方式等等信息</div>

		<div data-options="region:'center',title:'中间'">这里放显示大量数据的控件、如DataGrid、Tabs等</div>

	</body>

</html>

二、使用

1.创建Layout

首先须要创建布局面版（Layout Options），即在<div>标签中引入easyui-layout类。这个就相当于告诉Web页面我要使用Layout了；接下来创建整个页面的区域面版（Region Panel Options），即把页面划分成哪些部分；假设有嵌套的布局。则可又一次从引入easyui-layout開始；最后把控件增加到各区域就可以。这样页面的总体设计就完毕了

2.属性

1）面版的样式

fit：它是在创建面版（Layout Options）的标签中。可定义的属性，值为boolean型，默认是false。比如：

fit为true时

<body>

    <div id="mainBody" class="easyui-layout" data-options="fit:true" style="width: 1154px; height: 553px;margin-top:40px; margin-left: 90px;">

        @*zTree树形结构*@

        <div data-options="region:'west',split:true,title:'导航栏'" style="width: 250px; height:auto">

        </div>

        @* 右側载入部分页面数据区域 *@

        <div id="Content" data-options="region:'center',title:'用户信息'" style="background: white; width: 800px">

        </div>

    </div>

</body>

页面显演示样例如以下。当中右边、下边一直延伸。好像没有边框一样，这种页面效果非常糟糕，好像是仅仅显示出来一部分一样（值为true的情况。一般用在嵌套面版中）

把fit设为false或者不设置时，例如以下（这样看起来才有头有尾）

2）区域面版

区域的控制面版选项data-options中定义的面版组件。它的属性一般也包含title、border等。特殊一点的有下边三个

region：定义面版的位置。即取值为east、west、south、north、center中的一个，表示东西南北中随意一部分

split：设置为true将显示一个分隔条，用户可拖动分隔条来改变区域的大小，默认值为false

iconCls：用来小时布局面版头部图标的css类

3.事件

一般的事件，如resize、add、remove等。它都拥有，此外还有三个我们须要知道的

1）panel：參数为region的属性值。返回特定的布局面板

2）collapse：參数为region的属性值。折叠特定的布局面板。设为true，则在载入后成折叠状态。默觉得false（打开状态）

3）expand：參数为region的属性值，延伸特定的布局面板

小结：

Layout非常easy有用，这次是由于页面显示出现了问题才来了解它，期间调了非常多次才知道原因在这儿，假设提前了解过Layout想必能够非常快就知道毛病在哪儿，也不用走那么多弯路了。 在咱们寻常学习中。非常多东西不怕不知道。就怕不知道。没有提前了解过的东西，在实际应用中非常少会想到它。

【EasyUi】页面设计必学之Layout的更多相关文章

  1. 如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites]

    如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites] 一.布局页面介绍[Abo ...

  2. 本人为项目组制定的一份页面优化指南（easyui页面优化方案）

    #本人为项目组制定的一份页面优化指南(easyui页面优化方案) ##背景 这是一篇我之前为项目组制定的页面优化指南,主要是面向表单页面,典型的像[注册用户](https://passport.cnb ...

  3. 使用Nginx SSI功能辅助HTML页面设计

    SSI,Server Side Include,支持html静态文件内以 <!--#include file="/layout/header.html"-->  的方式 ...

  4. Linux必学的60个命令

    inux必学的60个命令Linux提供了大量的命令,利用它可以有效地完成大量的工作,如磁盘操作.文件存取.目录操作.进程管理.文件权限设定等.所以,在Linux系统上工作离不开使用系统提供的命令.要想 ...

  5. Linux必学的命令

    Linux必学的命令Linux提供了大量的命令,利用它可以有效地完成大量的工作,如磁盘操作.文件存取.目录操作.进程管理.文件权限设定等.所以,在Linux系统上工作离不开使用系统提供的命令.要想真正 ...

  6. Linux必学的60个命令【转载】

    Linux提供了大量的命令,利用它可以有效地完成大量的工 作,如磁盘操作.文件存  [转载地址]http://blog.chinaunix.net/uid-16728139-id-3154272.ht ...

  7. Bootstrap每天必学之导航条

    http://www.jb51.net/article/75534.htm Bootstrap每天必学之导航条,本文向大家讲解了多种多样的导航条,以及导航条中元素的实现方法,感兴趣的小伙伴们可以参考一 ...

  8. Easyui入门视频教程 第06集---Layout初始化和属性方法使用

    目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标自定义   Easyui入门视频教程 第08集---登录实现 ajax button的使用  ...

  9. 2019 年软件开发人员必学的编程语言 Top 3

    AI 前线导读:这篇文章将探讨编程语言世界的现在和未来,这些语言让新一代软件开发者成为这个数字世界的关键参与者,他们让这个世界变得更健壮.连接更加紧密和更有意义.开发者要想在 2019 年脱颖而出,这 ...

随机推荐

  1. Fragment-Transaction 源码分析

    概述 这篇文章的简要分析了Activity中的Transaction和add,replace等操作以及backstack的工作原理. 分析transaction源码的原因是因为我在写一个测试代码的时候 ...

  2. hdp spark beeline

    thriftserver端口号10016 hdp所用端口号由10000改为10016 !connect jdbc:hive2://localhost:10016

  3. 【DRF频率】

    目录 使用自带的频率限制类 使用自定义的频率限制类 开发平台的API接口调用需要限制其频率,以节约服务器资源和避免恶意的频繁调用. DRF就为我们提供了一些频率限制的方法. DRF中的版本.认证.权限 ...

  4. bitset也挺好用的

    http://www.cplusplus.com/reference/bitset/bitset/bitset/ std::bitset<16> foo; std::bitset<4 ...

  5. 正确理解Widget::Widget(QWidget *parent) :QWidget(parent)这句话（初始化列表中无法直接初始化基类的数据成员，所以你需要在列表中指定基类的构造函数）

    最近有点忙,先发一篇我公众号的文章,以下是原文. /********原文********/ 最近很多学习Qt的小伙伴在我的微信公众号私信我,该如何理解下面段代码的第二行QWidget(parent) ...

  6. ListView- 最后一行添加控件

    今天在做一个功能的时候,要求必须是在一个listview下,有一段提示行的文字,自己的那个listview的adapter用的是cursoradapter,这样的话,处理布局的灵活性就大打折扣了.最开 ...

  7. 建堆是 O(n) 的时间复杂度证明。

    建堆的复杂度先考虑满二叉树,和计算完全二叉树的建堆复杂度一样. 对满二叉树而言,第 \(i\) 层(根为第 \(0\) 层)有 \(2^i\) 个节点. 由于建堆过程自底向上,以交换作为主要操作,因此 ...

  8. 暴力破解FTP服务器技术探讨与防范措施

    暴力破解FTP服务器技术探讨与防范措施 随着Internet的发展出现了由于大量傻瓜化黑客工具任何一种黑客攻击手段的门槛都降低了很多但是暴力破解法的工具制作都已经非常容易大家通常会认为暴力破解攻击只是 ...

  9. BZOJ4044: [Cerc2014] Virus synthesis（回文树+DP）

    Description Viruses are usually bad for your health. How about fighting them with... other viruses? ...

  10. Accelerated C++：通过演示样例进行编程实践——练习解答（第9章）

    我的Github地址:https://github.com/lanbeilyj/Accerlerated-C-plus-plus 9-0. Compile, execute, and test the ...