1.layout布局
layout在所有项目中都是至关重要的，layout直接影响到用户的使用习惯和使用心情。如果布局合理，用户会欣然接受，反之用户就会非常的反感。
layout的设计一般都是由产品经理根据用户习惯设计出来，然后交给我们开发页面。当然页面的变化多端，我们这里只简单讲解一下easyUI的一般布局。
1.1 layout布局划分
在上面一篇博客中我们讲到了一个简单的layout Demo，easyUI的布局分为上北，下南，左西，右东，中这五个部分。
上北：一般布置公司或者研发机构的logo图片，然后在右侧位置会布置一些按钮或者链接的功能按钮，比如，显示当前登录的用户，上一步，下一步，注销，帮助等菜单功能。
下南：一般布置版权说明，以及维护联系方式等。
左西：功能菜单，一般是折叠式的功能菜单。
右东：辅助功能菜单，比如辅助显示一些操作日志。
中：最关键的部分，包括展示数据，增删改查以及其他按需求的功能菜单。
1.2 layout代码实现
在前面我们引入了js文件，就可以使用代码来实现布局。
一般的js组件都会提供两种方式来生成我们需要的布局格式，一种是html的方式，一种是用js的方式。
我们看一下这段代码：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>springMVC</title>
<!-- 引入依赖jquery -->
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<!-- 引入easyUI js文件 -->
<script type="text/javascript" src="js/jquery-easyui-1.5.3/jquery.easyui.min.js"></script>
<!-- 引入EasyUI的样式文件-->
<link rel="stylesheet" href="js/jquery-easyui-1.5.3/themes/default/easyui.css" type="text/css"/>
<!-- 引入EasyUI的图标样式文件-->
<link rel="stylesheet" href="js/jquery-easyui-1.5.3/themes/icon.css" type="text/css"/>
<script type="text/javascript">
$(function(){
$('#dd').dialog({
title: 'Login',
width: 400,
height: 200,
closed: false,
cache: false,
modal: true,
buttons:[
{
text:"OK",
iconCls:"icon-save",
handler:function(){
//do something
}
},
{
text:"Cancel",
iconCls:"icon-save",
handler:function(){
//do something
}
}
]
});
})
</script>
</head>
<body class="easyui-layout">
<div data-options="region:'east',split:true" title="East" style="width:100px;"></div>
<div data-options="region:'west',split:true" title="West" style="width:100px;"></div>
<div data-options="region:'north',title:'',split:true" style="height:100px;">
<div style="width:100%;text-align:center;line-height:100px">
Welcome to Easy-UI Classroom !
</div>
</div>
<div data-options="region:'center',title:'',split:true" style="height:600px;">
<form id="form_user" action="login.do">
<div id="dd" class="easyui-dialog" title="Login" style="width:400px;height:200px;"
data-options="iconCls:'icon-save',resizable:true,modal:true">
User Name:<input type="text" style="width:100px;height:20px;"/><br>
Psssword:<input type="password" style="width:100px;height:20px;"/>
</div>
</form>
</div>
<div data-options="region:'south',title:''" style="padding:5px;background:#eee;">
<div style="width:100%;text-align:center">
@版权所有，转载请注明出处<br>
作者:不醉怎能入睡<br>
Emial:[email protected]<br>
QQ:846049243
</div>
</div>
</body>
</html>
其效果如下：
我们可以看到这是按照代码分为东南西北中五个部分，中间的部分我们增加了一个form表单，这个form表单，
我们使用了js的方式为其绑定了一个dialog，并定义了dialog中的一些属性，包括按钮操作等，dialog会在后面讲到。
从这里可以看出，我们的easyUI是html和js一起来实现我们想要的功能效果。而相比之下angularjs就分离的比较
彻底，他不会在js中对DOM元素进行操作，只会通过自定义指令系统来实现对元素控制。
布局是easyUI中最简单的，有时我们需要根据需求来设计layout，不是东南西北中我们都会用到的，最常见的就是右侧部分再很多时候是不需要的，一个简单的管理系统，上面是logo，底部是版权，左侧是功能菜单，中间是数据展示及操作，右侧基本上就会省略掉。怎么去掉右侧呢或者某一部分呢？聪明的你一定想到了，只要html中没有右侧这部分的代码就行了，是的就是这样。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>springMVC</title>
<!-- 引入依赖jquery -->
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<!-- 引入easyUI js文件 -->
<script type="text/javascript" src="js/jquery-easyui-1.5.3/jquery.easyui.min.js"></script>
<!-- 引入EasyUI的样式文件-->
<link rel="stylesheet" href="js/jquery-easyui-1.5.3/themes/default/easyui.css" type="text/css"/>
<!-- 引入EasyUI的图标样式文件-->
<link rel="stylesheet" href="js/jquery-easyui-1.5.3/themes/icon.css" type="text/css"/>
<script type="text/javascript">
$(function(){
$('#dd').dialog({
title: 'Login',
width: 400,
height: 200,
closed: false,
cache: false,
modal: true,
buttons:[
{
text:"OK",
iconCls:"icon-save",
handler:function(){
//do something
}
},
{
text:"Cancel",
iconCls:"icon-save",
handler:function(){
//do something
}
}
]
});
})
</script>
</head>
<body class="easyui-layout">
<!-- <div data-options="region:'east',split:true" title="East" style="width:100px;"></div>-->
<div data-options="region:'west',split:true" title="West" style="width:100px;"></div>
<div data-options="region:'north',title:'',split:true" style="height:100px;">
<div style="width:100%;text-align:center;line-height:100px">
Welcome to Easy-UI Classroom !
</div>
</div>
<div data-options="region:'center',title:'',split:true" style="height:600px;">
<form id="form_user" action="login.do">
<div id="dd" class="easyui-dialog" title="Login" style="width:400px;height:200px;"
data-options="iconCls:'icon-save',resizable:true,modal:true">
User Name:<input type="text" style="width:100px;height:20px;"/><br>
Psssword:<input type="password" style="width:100px;height:20px;"/>
</div>
</form>
</div>
<div data-options="region:'south',title:''" style="padding:5px;background:#eee;">
<div style="width:100%;text-align:center">
@版权所有，转载请注明出处<br>
作者:不醉怎能入睡<br>
Emial:[email protected]<br>
QQ:846049243
</div>
</div>
</body>
</html>
