前端框架 EasyUI (2)页面布局 Layout

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

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

  前端框架 EasyUI (2)页面布局 Layout 前端框架 EasyUI (2)页面布局 Layout

  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>

  显示效果如图:

  前端框架 EasyUI (2)页面布局 Layout

(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>

  在浏览器执行效果如图:

前端框架 EasyUI (2)页面布局 Layout

(IE11)

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

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

上一篇:(一 ) 天猫精灵接入Home Assistant-服务器搭建


下一篇:Java 集合 - LinkedList