一个基于 EasyUI 的前台架构(1)页面布局

前段时间进了一个项目,接触了这个完全使用 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 效果:

一个基于 EasyUI 的前台架构(1)页面布局_第1张图片

 

Chrome 效果:

一个基于 EasyUI 的前台架构(1)页面布局_第2张图片

 

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

你可能感兴趣的:(一个基于 EasyUI 的前台架构(1)页面布局)