初识EasyUI
EasyUI是什么:
jQuery EasyUI是一组基于jQuery的UI插件集合。
EasyUI可以做什么:
无需复杂JavaScript即可实现丰富且美观的UI界面。
jQuery EasyUI为我们提供了大多数UI控件的使用,比如:
- accordion 可折叠标签
- combobox 组合框
- menu 菜单
- dialog 对话框
- tabs 标签
- validatebox 验证框
- datagrid 数据表
- window 窗口
- tree 树
jQuery EasyUI是基于JQuery的一个前台ui界面的插件,功能相对没Extjs强大,但页面也是相当好看的,相对于extjs更轻量。
怎么用EasyUI
1.在EasyUI官网下载EasyUI的文件,目前最新的版本是:jQuery EasyUI 1.5
![这里写图片描述](https://img-blog.csdn.net/20161205213851173)
![这里写图片描述](https://img-blog.csdn.net/20161205213918660)
2.将下载好的文件解压后,如图:
![这里写图片描述](https://img-blog.csdn.net/20161205214049330)
EasyUI入门
一般我们在项目中引入的文件有:
①jquery.min.js
②jquery.easyui.min.js
③themes
④local文件夹下的easyui-lang-zh_CN.js
2.1、引入必要的js和css样式文件
要想在页面中使用EasyUI,那么首先要做的就是在页面中引入必要js和css样式文件,以在jsp文件中使用EasyUI为例,文件引入的顺序如下所示
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.5/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.5/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.5/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.5/themes/default/easyui.css" type="text/css"/>
<link rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.5/themes/icon.css" type="text/css"/>
在jsp文件中引用了这些文件之后,就可以使用EasyUI了。
2.2、自己尝试使用EastUI:
新建一个JavaWeb工程,然后将jquery-easyui-1.5加入到工程中,将jquery-easyui-1.5文件夹中一些不必要的文件删掉,只保留必要的就可以了,如下图所示:
![这里写图片描述](https://img-blog.csdn.net/20161205221031764)
使用Easy UI必须加入:
![](https://img-blog.csdn.net/20171220100817859?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvWENMMTgyMTUxNjY5MTQ=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)