接触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很简单实用,这次是因为页面显示出现了问题才来了解它,期间调了很多次才知道原因在这儿,如果提前了解过Layout想必可以很快就知道毛病在哪儿,也不用走那么多弯路了。 在咱们平常学习中,很多东西不怕不知道,就怕不知道。没有提前了解过的东西,在实际应用中很少会想到它。
版权声明:本文为博主原创文章,未经博主允许不得转载。