【EasyUi】页面设计必学之Layout

接触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想必可以很快就知道毛病在哪儿,也不用走那么多弯路了。 在咱们平常学习中,很多东西不怕不知道,就怕不知道。没有提前了解过的东西,在实际应用中很少会想到它。

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-31 01:47:36

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

Google官方架构MVP解析与实战进阶必学系列

1 前言 当然对于MVP的解说也是使用也是层出不穷,我也网络上也能看到各种版本的解说,之前博客也有文章的更新,里面有MVP的详细说明和项目代码--->Android中的MVP模式,带实例. 本篇文章将参考 google官方android MVP架构项目的实现,来实现自己的项目.或许看了这篇文章之后,你再去梳理一下google官方架构项目,会让你收获更多.官方的实例肯定具有更好的权威性. 推荐关注安卓各种架构相关文章合集github地址:AndroidArchitectureCollection

ASP.NET MVC +EasyUI 权限设计(二)环境搭建

请注明转载地址:http://www.cnblogs.com/arhat 今天突然发现博客园出问题了,老魏使用了PC,手机,平板都访问博客园了,都是不能正常的访问,原因是不能加载CSS,也就是不能访问common.cnblogs.com这个域名,一直出现"Aborted",非常的郁闷. 页面就是这样子的,不知道为什么,难道是不是我的3个终端有问题吧,还是园子的服务器有问题呢?还是路由器的问题呢?到现在这个问题还没解决,郁闷死了!弄得心情非常的不爽. 好吧,不在说这个问题了,开始我们的正

UI设计需要学什么?

UI这个概念,也许没有入行的朋友还是挺陌生,但是对于从事UI设计的设计师来说可以很火高薪的工作.其实UI设计囊括了很多方面,做网页也属于UI,做软件设计也属于UI,所以不要分的那么细致,在工作中逐渐找寻自己的方向,发展自己的爱好.选UI设计要看你选择的工作,一般都是具备一定的软件操作能力后,在工作中不断积累的. ui即User Interface(用户界面)的简称.UI设计则是指对软件的人机交互.操作逻辑.界面美观的整体设计.现在比较多的UI实际上就是GUI设计.也就是图形用户界面的设计,包括软

跨终端响应式页面设计入门

跨终端/响应式页面不外乎是让各种分辨率的屏幕都能顺利阅读你的页面,常规来讲一个跨终端页面,在宽屏的电脑上看和在小屏幕手机上看的布局是不同的,布局不同的原因是为了让读者更好地阅读你的页面,见下图: 这里有点要提到的是,我们常规会将PC版的页面和移动端设备的页面独立开来设计,这样会让PC端的页面布局更灵活和好维护.如果你希望你的页面能适配包括PC端在内的任何设备,那么下面几个小工具可以方便你顾及旧版本IE所存在的困扰: ⑴ IE8-不能识别HTML5的<hearder>.<article&g

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

Linux提供了大量的命令,利用它可以有效地完成大量的工 作,如磁盘操作.文件存  [转载地址]http://blog.chinaunix.net/uid-16728139-id-3154272.html 自己留着,用得着. Linux提供了大量的命令,利用它可以有效地完成大量的工作,如磁盘操作.文件存取.目录操作.进程管理.文件权限设定等.所以,在Linux系统上工作离不开使用系统提供的命令.要想真正理解Linux系统,就必须从Linux命令学起,通过基础的命令学习可以进一步理解Linux系统

Linux必学的60个命令

Linux提供了大量的命令,利用它可以有效地完成大量的工作,如磁盘操作.文件存取.目录操作.进程管理.文件权限设定等.所以,在Linux系统上工作离不开使用系统提供的命令. 要想真正理解Linux系统,就必须从Linux命令学起,通过基础的命令学习可以进一步理解Linux系统.不同Linux发行版的命令数量不一样,但Linux发行版本最少的命令也有200多个.这里把比较重要和使用频率最多的命令,按照它们在系统中的作用分成下面六个部分一一介绍.◆ 安装和登录命令:login.shutdown.ha

如何在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] 一.布局页面介绍[About Layout Pages] 很多网站有些内容需要显示在各个页面中,比如Header,Footer或者告诉用户已经登录的部分.ASP.NET允许你创建一个单独的文件来包含文本.标签和代码的内容块,从而搭建一个风格整齐的网站.接下来你就可以将这个内容块插入到任何你想要让它展示的页面中.采用这种方法

想转行做web前端工程师,必学这6大技能!你知道是那些吗?

web前端工程师是近几年才发展出来的新兴职业,也是目前火爆且高薪的职业. 大需求的市场环境下,出现了越来越多的人群转行做web前端工程师,如设计师.后台程序员.网虫.大学其他专业.策划.编辑等等. 要学习web前端开发,需要掌握哪些知识呢? 下面总结了转行必学的6大技能.  1.html 这个是最简单的,也是最基础的. 要熟练掌握div.form table.ul li .p.span.font这些标签,这些都是最常用的,特别是div和table,div用于布局.table也可以用于布局,但是不

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

SSI,Server Side Include,支持html静态文件内以 <!--#include file="/layout/header.html"-->  的方式引入其他html静态文件,这一功能特性有助于页面设计的碎片化和效率效果提升(设计页面主要关心content内容的设计,而且碎片不会在多个页面存在N个copy,而是一次性都可以修改更新),demo内容见附件qingbo_design_demo. demo目录文件结构: 设计页面目录在svn的同步管理下,可以使用