【EasyUi】页面设计必学之Layout

最新推荐文章于 2022-04-05 18:45:57 发布

xjCherie

最新推荐文章于 2022-04-05 18:45:57 发布

阅读量3k

点赞数 2

分类专栏：【Web开发】

本文链接：https://blog.csdn.net/wangjingna/article/details/47810999

版权

【Web开发】专栏收录该内容

44 篇文章 2 订阅

订阅专栏

接触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的情况，一般用在嵌套面版中）