在 Web 程序中，页面布局对应用程序的用户体验至关重要。

　　在一般的信息管理类的 Web 应用程序中，页面结构通常有一个主工作区，然后在工作区上下左右靠近边界的区域设置一些边栏，用于显示信息或放置一些功能选项的控件。比如下面这两个比较典型的例子：

　　 

　　EasyUI 提供了一种非常简单方便的实现该效果的方法，可以让用户很方便的在页面上实现矩形区域划分的功能，这就是 EasyUI 的布局组件（Layout）。

EasyUI 布局组件Layout

　　EasyUI 的布局组件允许用户在一个主工作区的四周各添加一个边栏，EasyUI 将自动为用户实现边界划分和边界位置控制功能。

　　EasyUI 的布局组件需要基于一个布局容器，比如一个<div>，当然也可以使用整个<body>。将一个容器设置为 EasyUI 布局容器的方法很简单，只需要添加一个控件样式类 easyui-layout 就行了。

　　然后，在布局容器中至少要添加一个主工作区 center。在主工作区四周，可以分别添加一个边栏，以上北、下南、左西、右东的规则，分别标记为nouth（上）、south（下）、west（左）、east（右）。工作区的名字标记为容器标签的 region 属性。

　　例如，下面代码实现将一个300*300的<div>划分为5个区，左右侧区域宽度各100，其它自动：

<div class="easyui-layout" style="width:300px; height:300px;">
    <div region="north">顶部</div>
    <div region="west" style="width:100px">左侧</div>
    <div region="center">主工作区</div>
    <div region="east" style="width:100px">右侧</div>
    <div region="south">底部</div>
</div>

　　显示效果如图：

　　

（IE11）

　　如果将页面中 <body> 标签定义为布局容器，那么 EasyUI 可以将整个浏览器的工作区划分为5个区域。

　　需要注意的一点是，主工作区左侧和右侧的边栏必须要设置宽度，否则布局将不能正常显示。

Layout 常用属性

　　Layout 可以为工作区设置标题；也可以将工作区边栏设置为可变大小，以便用户使用鼠标拖动改变工作区大小。这两个功能分别是 title 属性（string）和 split 属性(bool)。

　　例如：下面代码将左侧边栏标题设置为“导航菜单”，并且大小可变：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="js/easyui-1.4.2/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="js/easyui-1.4.2/themes/icon.css" />
    <script type="text/javascript" src="js/easyui-1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/easyui-1.4.2/jquery.easyui.min.js" ></script>
</head>

<body class="easyui-layout">
    <div region="north">顶部</div>
    <div region="west" style="width:100px" title="导航菜单" split="true">左侧</div>
    <div region="center">主工作区</div>
    <div region="east" style="width:100px">右侧</div>
    <div region="south">底部</div>
</body>
</html>

　　在浏览器执行效果如图：

（IE11）

　　当然，如果需要设置上侧或下侧边栏的大小，设置相应的<div>标签的高度即可。

　　示例源码：http://files.cnblogs.com/files/zhhh/EasyUI-2.zip

前端框架 EasyUI （2）页面布局 Layout的更多相关文章

  1. 前端框架Easyui学习积累

    前端框架Easyui学习积累 1.easyui textbox 赋值:$("#id").textbox("setValue","xx"); ...

  2. 前端框架easyui layout， Tabs，tree

    一.三大前端框架的 1.easyui=jquery+html4(用来做后台的管理界面) 不要钱,开发速度快,不好看,不支持响应式 2.bootstrap=jquery+html5 好看,开发速度快,部 ...

  3. 前端框架 EasyUI （0） 重新温习（序言）

    几年前,参与过一个项目.那算是一个小型的信息管理系统,BS 结构的,前端用的是基于 jQuery 的 EasyUI 框架. 我进 Team 的时候,项目已经进入开发阶段半个多月了.听说整个项目的框架是 ...

  4. 前端框架bootstrap(响应式布局)入门

    Bootstrap,是基于HTML,CSS.javascript的前端框架 该框架已经预定义了一套CSS样式和与样式相对应的js代码(对应的样式有对应的特效.) 开发人员只需要编写HTML结构,添加b ...

  5. web前端（12）—— 页面布局2

    本篇博文,主要就讲定位的问题,也就是页面布局里最重要的,本篇博文不出意外的话,也是css的最后一篇博文了 定位,position属性 定位有三种: 相对定位 绝对定位 固定定位 相对定位,positi ...

  6. Web前端代码规范与页面布局

    一.    规范目的: 为提高工作效率,便于后台人员添加功能及前端后期优化维护,输出高质量的文档,在网站建设中,使结构更加清晰,代码简明有序,有一个更好的前端架构,有利于SEO优化.   二.     ...

  7. web前端（11）—— 页面布局1

    要说页面布局的话,那就必须说说margin,padding,和background.这三个属性其实都是前面讲过的,这里还是再次讲解以下,为什么呢?因为是这样的,光靠前面的css样式来设置,你很可能会遇 ...

  8. 前端框架 EasyUI （1）熟悉一下EasyUI

    jQuery EasyUI 官方网站 http://www.jeasyui.com/ .去年新开了个中文网 http://www.jeasyui.net/,不知道是不是官方的,不过看着挺像样.但是,广 ...

  9. Jqurey实现相似EasyUI的页面布局

    截图例如以下:(可通过移动中间蓝色的条.来改变左右两边div的宽度) watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWFuZ21pbmd4aW5nOTgw ...

随机推荐

  1. 记一次SQLServer的分页优化兼谈谈使用Row_Number()分页存在的问题

    最近有项目反应,在服务器CPU使用较高的时候,我们的事件查询页面非常的慢,查询几条记录竟然要4分钟甚至更长,而且在翻第二页的时候也是要这么多的时间,这肯定是不能接受的,也是让现场用SQLServerP ...

  2. XStream将java对象转换为xml时，对象字段中的下划线“_”，转换后变成了两个的解决办法

            在前几天的一个项目中,由于数据库字段的命名原因 其中有两项:一项叫做"市场价格"一项叫做"商店价格" 为了便于区分,遂分别将其命名为market ...

  3. Android调用微信登陆、分享、支付

    前言:用了微信sdk各种痛苦,感觉比qq sdk调用麻烦多了,回调过于麻烦,还必须要在指定包名下的actvity进行回调,所以我在这里写一篇博客,有这个需求的朋友可以借鉴一下,以后自己别的项目有用到也 ...

  4. Tesseract-OCR字符识别简介

    OCR(Optical Character Recognition):光学字符识别,是指对图片文件中的文字进行分析识别,获取的过程.Tesseract:开源的OCR识别引擎,初期Tesseract引擎 ...

  5. kafka源码分析之一server启动分析

    0. 关键概念 关键概念 Concepts Function Topic 用于划分Message的逻辑概念,一个Topic可以分布在多个Broker上. Partition 是Kafka中横向扩展和一 ...

  6. dagger2系列之依赖方式dependencies、包含方式(从属方式)SubComponent

    本篇是实战文章,从代码的角度分析这两种方式.本文参考自下列文章: http://www.jianshu.com/p/1d42d2e6f4a5 http://www.jianshu.com/p/94d4 ...

  7. 【腾讯Bugly干货分享】Android Linker 与 SO 加壳技术

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57e3a3bc42eb88da6d4be143 作者:王赛 1. 前言 Andr ...

  8. Ajax使用WCF实现小票pos机打印源码

    通过ajax跨域方式调用WCF服务,实现小票pos机的打印,源码提供web方式,客户端方式测试,服务驻留右侧底部任务栏,可控制服务开启暂停,用户可自定义小票打印模板,配合零售录入. qq  22945 ...

  9. jquery中的$(document).ready(function() {});

    当文档载入时执行function函数里的代码, 这部分代码主要声明,页面加载后 "监听事件" 的方法.例如: $(document).ready( $("a") ...

  10. 微服务与Docker介绍

    什么是微服务 微服务应用的一个最大的优点是,它们往往比传统的应用程序更有效地利用计算资源.这是因为它们通过扩展组件来处理功能瓶颈问题.这样一来,开发人员只需要为额外的组件部署计算资源,而不需要部署一个 ...