java学习之easyui环境搭建(easyui java)
最近公司项目中用到了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的环境就打好了,接下来就可以进行开发了!