一个基于 EasyUI 的前台架构（1）页面布局

﹏ヽ暗。殇╰゛Y 2023-08-17 16:37 144阅读 0赞

前段时间进了一个项目，接触了这个完全使用 jQuery EasyUI 架构前台的应用程序。以前对 EasyUI只是有所耳闻，接触这个项目才觉得它非常强大。

在开发中，遇到不少关于 EasyUI 的问题，也亲手改过许多与之相关的问题。对这个系统的架构有所了解以后，才觉得这个系统架构的有点乱七八糟，用的很不顺手，就想把这个系统重新架构一下（这或许是不同 Coder 之间编码习惯上的差别吧，不算鄙视），也同时对 EasyUI 进行深入的研究一下，学习一些先进的东西。

在开发应用系统的时候，系统整体布局是很重要的。EasyUI 提供的一种非常便捷的方法，来完成对系统页面的整体布局。它将页面分为北(north)、东(east)、南(south)、西(west)、中(center)等五个部分，代表页面的上、右、下、左、中间（主工作区）等区域。

**搭建布局框架：**

在使用的时候只需要将 <body> 元素使用相应的样式，并在 <body> 中添加几个 <div> ，并把 <div> 指定一个 region 属性，值分别是 north\\east\\south\\west\\center 等即可。

**区域大小：**

不过，需要注意的是，主工作区（center 区域）左右两侧的区域（ east 和 west ）必需指定一个宽度，否则……（你可以试试看），当然，高度它们会自动适应。

上下两侧的区域（ north 和 south ）则可以根据需要指定或自动高度，当然，宽度也是自适应的，一般不需要设置。

**调整大小：**

如果需要在运行的时候手动调整某个区域的大小，可以给 <div> 添加 split 属性，设置其值为 true 即可。如果不需要，可以设为 false 或不设。（注：center 区域不必设置该属性，如果需要调整 center 区域那个边的大小，可以在相应方向的侧边区域设置即可。）

**区域标题：**

如果要给某个区域添加标题，只需要为要添加标题的区域的 <div> 标签添加 title 属性即可。

Over。。。一些常用的效果都介绍完了，看一个简单的例子。废话不说，贴代码：

![复制代码][copycode.gif]

<!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/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="js/themes/icon.css"/>
    <script type="text/javascript" src="js/jquery-1.6.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
    </head>
    
    <body class="easyui-layout">
    <div region="north" style="height:80px;">
        
        <h1>***管理系统</h1>
    </div>
    
    <div region="west" split="true" style="width:220px" title="导航菜单">
        页面左侧
    </div>
    
    <div region="center">
        页面主体内容区
    </div>
    
    <div region="east" style="width:100px;">
        页面右侧
    </div>
    
    <div region="south">
        页面底部 
    </div>
    </body>
    </html>

![复制代码][copycode.gif]

怎么样，页面结构非常简单，一句多余的代码都没写。运行，看效果，如图：

IE8 效果：

![2011112622170450.png][]

Chrome 效果：

![2011112622130070.png][]

从图中还可以看到鼠标拖动调整边栏区域的效果，非常简单。。

[copycode.gif]: /images/20230810/2fff09b0701b41919a5a1c9c2892708d.png
[2011112622170450.png]: /images/20230810/2f9f472b92394acd81d9b7d392ddac4f.png
[2011112622130070.png]: /images/20230810/ba353a469f5144c39e5108e6a52e1d4e.png