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 type=“text/javascript” src=“easyui/jquery.easyui.min.js”>

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

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

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

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

修改完后的代码如下：

href=“${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css”>

href=“${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/icon.css”>

src=“${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js”>

src=“${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js”>

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