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

来源：互联网发布：kettle7.1源码搭建编辑：程序博客网时间：2024/05/21 17:59

前段时间进了一个项目，接触了这个完全使用 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。。。一些常用的效果都介绍完了，看一个简单的例子。废话不说，贴代码：

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

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

IE8 效果：

Chrome 效果：

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