jqueryEasyUI页面布局1

JQueryEasyUI 提供的一种非常便捷的方法来完成对系统页面的整体布局。它将页面分为北(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 属性即可。

===========================================================================================================================================

前提引入js：

代码部分：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5 <title>EasyUI Demo</title>
 6 
 7     <link rel="stylesheet" type="text/css" href="js/themes/default/easyui.css"/>
 8     <link rel="stylesheet" type="text/css" href="js/themes/icon.css"/>
 9     <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
10     <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
11 
12     <script type="text/javascript">
13  
14     </script>
15     </head>
16 
17 <!--1. 在整个页面创建布局面板-->
18 <body class="easyui-layout">
19 
20 <!--1.1 egion="north"，指明高度，可以自适应-->
21 <div region="north" style="height:80px;"><center> <h1>管理系统</h1></center></div>
22 
23 <!--1.2 region="west",必须指明宽度-->
24 <div region="west"  title="导航菜单" split="true" style="220px" >页面左侧</div>
25 
26 <!--1.3region="center",这里的宽度和高度都是由周边决定，不用设置-->
27 <div region="center">
28 
29 <!--2. 对<div>标签引用'easyui-layout'类,fit="true"自动适应父窗口,这里我们指定了宽度和高度-->
30 <div id="cc"  class="easyui-layout" style="600px;height:400px;">  
31     <div region="north" title="North Title" split="true" style="height:100px;"></div>  
32     <div region="south" title="South Title" split="true" style="height:100px;"></div>  
33     <div region="east" iconCls="icon-reload" title="East" split="true" style="100px;"></div>  
34     <div region="west" split="true" title="West" style="100px;"></div>  
35     <div region="center" title="center title" style="padding:5px;background:#eee;"></div>  
36 </div>  
37 
38 </div>
39 
40 <!--1.4 region="east",必须指明宽度-->
41 <div region="east"  style="100px;">页面右侧</div>
42 
43 <!--1.5 region="south"，指明高度，可以自适应-->
44 <div region="south" style="height:50px;"><center> <h3>页面底部</h3></center></div>
45 </body>
46 </html>

效果图：

布局面板属性

名称	类型	描述	默认值
title（标题）	string（字符串）	布局面板的标题。	null
region（区域）	string（字符串）	定义布局面板的位置（方向），可以取下列值的其中之一：north, south, east, west, center。
border（边框）	boolean（布尔型）	设置为true将显示布局面板的边框。	true
split（分隔条）	boolean（布尔型）	如果设置为true将显示一个分隔条，用户可以拖动分隔条来改变布局面板的尺寸。	false
iconCls（图标CSS类）	string（字符串）	一个用来显示布局面板头部图标的css类。	null
href（超链接）	string（字符串）	一个用来从远程站点载入数据的超链接。	null

方法

名称	参数	描述
resize	none	设置布局面板的尺寸大小。
panel	region	返回特定的布局面板，'region'参数的可取值为：'north','south','east','west','center'。
collapse	region	折叠特定的布局面板，'region'参数的可取值为：'north','south','east','west'。
expand	region	延伸特定的布局面板，'region'参数的可取值为：'north','south','east','west'。