java學(xué)習(xí)之easyui環(huán)境搭建（easyui java）
最近公司項目中用到了easyui，就在網(wǎng)上找各種資料和視頻看，搭建了了一個easyui的環(huán)境。
1. EasyUI 概述
1.1. 簡介
jquery EasyUI 是一組基于jQuery 的UI 插件集合體，而jQuery EasyUI 的
目標就是幫助web 開發(fā)者更輕松的打造出功能豐富并且美觀的UI 界面。開發(fā)者
不需要編寫復(fù)雜的javascript，也不需要對css 樣式有深入的了解，開發(fā)者需
要了解的只有一些簡單的html 標簽。jQuery EasyUI 是基于JQuery 的一個前臺
ui 界面的插件，功能相對沒extjs 強大，但頁面也是相當(dāng)好看的，同時頁面支
持各種themes 以滿足使用者對于頁面不同風(fēng)格的喜好。一些功能也足夠開發(fā)者
使用，相對于extjs 更輕量。
EasyUI 的官網(wǎng)地址為：http://www.jeasyui.com/
特點：
? easyui 是一種基于jQuery 的用戶界面插件集合
? easyui 為創(chuàng)建現(xiàn)代化，互動，JavaScript 應(yīng)用程序，提供必要的功能
? 使用easyui 你不需要寫很多代碼，你只需要通過編寫一些簡單HTML 標
記，就可以定義用戶界面
? easyui 是個完美支持HTML5 網(wǎng)頁的完整框架
? easyui 節(jié)省您網(wǎng)頁開發(fā)的時間和規(guī)模
? easyui 很簡單但功能強大
1.2. EasyUI 目錄結(jié)構(gòu)分析
demo：easyui 的各個組件使用示例
demo-mobile：easyui 在移動終端上各個組件使用示例
locale：是國際化支持文件夾
src：是部分easyui 插件的源碼
plugins：是easyui 使用的插件
themes：easyui 基礎(chǔ)自帶的主題
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 開發(fā)步驟
需求：完成一個EasyUI 的彈窗。
2.1. 把EasyUI 的資源導(dǎo)入項目
2.2. 在JSP 頁面導(dǎo)入EasyUI 所需的css 和js 資源
<!– 1.導(dǎo)入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.導(dǎo)入js文件–>
<script type=”text/javascript” src=”../easyui/jquery.min.js”></script>
<script type=”text/javascript” src=”../easyui/jquery.easyui.min.js”></script>
2.3. 設(shè)計一個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的環(huán)境就打好了，接下來就可以進行開發(fā)了！
