一，easyUI简介

why：快速开发

虽然从效果来看，easyUI的界面效果要远远差于bootstrap，layout，但

从金钱的角度上，开发首先会排除掉bootstrap

从学习文档的完整性、前端框架的稳定性，组件的丰富性考虑，easyui都要优于layui

从公司的角度,考虑框架成本、公司的后端技术人员前端功底、前端的社区活跃度

what：html4+jQuery的快速开发的前端框架

where：后端开发管理界面

常用控件：layout，tree，tabs，datagrid，form，messager，combobox

二，easyUI的学习和使用

解压下面的压缩包

文件里的内容如下：

下载easyUI，我们可以通过api和domo来学习和使用它

三， layout控件

1.导包

框架，js文件，css文件都属于静态资源，因此把他们放在静态资源包下

如下图所示在WebContent下建立静态资源包：

同样方法在静态资源包下建立js，css，images

完成做框架的第一步，导入jar包，在这里就是把我们之前解压得到的文件复制粘贴到js目录下

2.在WebContent下建立index.jsp界面

导入EasyUI的CSS和Javascript文件到index.jsp界面，即如下代码

<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">

<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">

<script type="text/javascript" src="easyui/jquery-1.7.2.min.js"></script>

<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

修改 href 和 src，使用文件全路径名，快捷键 Ctrl+shift+r

不同的界面风格显示出不同的颜色，这里我们使用默认风格

依次复制上图四个文件的全路径名修改 href 和 src

根据项目取项目名${pageContext.request.contextPath }

修改完后的代码如下：

<link rel="stylesheet" type="text/css"
   href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
   href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/icon.css">
<script type="text/javascript"
   src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>
<script type="text/javascript"
   src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>

3. 使用完整页面创建布局

<body class="easyui-layout">
   <div data-options="region:'north',title:'网上书城',split:true"
       style="height: 100px;"></div>
   <div data-options="region:'south',title:'版权网址',split:true"
       style="height: 100px;"></div>
   
   <div data-options="region:'west',title:'菜单管理',split:true"
       style="width: 100px;"></div>
   <div data-options="region:'center',title:'内容'"
       style="padding: 5px; background: #eee;"></div>
</body>

完整页面分为东南西北四个面板，在这里我们不需要east面板所以注掉，修改对应title

运行结果如下：