最近公司项目中用到了easyui，就在网上找各种资料和视频看，搭建了了一个easyui的环境。

1. EasyUI 概述

1.1. 简介

jQuery EasyUI 是一组基于jQuery 的UI 插件集合体，而jQuery EasyUI 的

目标就是帮助web 开发者更轻松的打造出功能丰富并且美观的UI 界面。开发者

不需要编写复杂的javascript，也不需要对css 样式有深入的了解，开发者需

要了解的只有一些简单的html 标签。jQuery EasyUI 是基于JQuery 的一个前台

ui 界面的插件，功能相对没extjs 强大，但页面也是相当好看的，同时页面支

持各种themes 以满足使用者对于页面不同风格的喜好。一些功能也足够开发者

使用，相对于extjs 更轻量。

EasyUI 的官网地址为：http://www.jeasyui.com/

特点：

 easyui 是一种基于jQuery 的用户界面插件集合

 easyui 为创建现代化，互动，JavaScript 应用程序，提供必要的功能

 使用easyui 你不需要写很多代码，你只需要通过编写一些简单HTML 标

记，就可以定义用户界面

 easyui 是个完美支持HTML5 网页的完整框架

 easyui 节省您网页开发的时间和规模

 easyui 很简单但功能强大

1.2. EasyUI 目录结构分析

demo：easyui 的各个组件使用示例

demo-mobile：easyui 在移动终端上各个组件使用示例

locale：是国际化支持文件夹

src：是部分easyui 插件的源码

plugins：是easyui 使用的插件

themes：easyui 基础自带的主题

jQuery EasyUI 的安装只需要下载解压后；将需要使用的js 和css 引入页面

即可。一般需要引入的文件包括：

themes/default/easyui.css

themes/icon.css

jquery.min.js

jquery.easyui.min.js

locale/easyui-lang-zh_CN.js

2. EasyUI 开发步骤

需求：完成一个EasyUI 的弹窗。

2.1. 把EasyUI 的资源导入项目

2.2. 在JSP 页面导入EasyUI 所需的css 和js 资源

<!– 1.导入css文件–>

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

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

<!– 2.导入js文件–>

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

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

2.3. 设计一个div，添加EasyUI 的class

<div class=”easyui-dialog” style=”width:400px;height:200px”

data-options=”title:’Hello

EasyUI’,collapsible:true,iconCls:’icon-ok’,onOpen:function(){}”>

this is content!!!

</div>

2.4. 效果

至此，一个easyui的环境就打好了，接下来就可以进行开发了！

感谢你长得那么美还来看小编的文章，喜欢就点关注吧！