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

1. EasyUI 概述

1.1. 简介

jQuery EasyUI 是一组基于jQuery 的UI 插件凑集体,而jQuery EasyUI 的

jqueryeasyui与jspjava进修之easyui情况搭建 Vue.js

目标便是帮助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的环境就打好了,接下来就可以进行开拓了!

感谢你长得那么美还来看小编的文章,喜好就点关注吧!