最近公司項(xiàng)目中用到了easyui，就在網(wǎng)上找各種資料和視頻看，搭建了了一個(gè)easyui的環(huán)境。

1. EasyUI 概述

1.1. 簡(jiǎn)介

jquery EasyUI 是一組基于jQuery 的UI 插件集合體，而jQuery EasyUI 的

目標(biāo)就是幫助web 開發(fā)者更輕松的打造出功能豐富并且美觀的UI 界面。開發(fā)者

不需要編寫復(fù)雜的javascript，也不需要對(duì)css 樣式有深入的了解，開發(fā)者需

要了解的只有一些簡(jiǎn)單的html 標(biāo)簽。jQuery EasyUI 是基于JQuery 的一個(gè)前臺(tái)

ui 界面的插件，功能相對(duì)沒extjs 強(qiáng)大，但頁(yè)面也是相當(dāng)好看的，同時(shí)頁(yè)面支

持各種themes 以滿足使用者對(duì)于頁(yè)面不同風(fēng)格的喜好。一些功能也足夠開發(fā)者

使用，相對(duì)于extjs 更輕量。

EasyUI 的官網(wǎng)地址為：http://www.jeasyui.com/

特點(diǎn)：

? easyui 是一種基于jQuery 的用戶界面插件集合

? easyui 為創(chuàng)建現(xiàn)代化，互動(dòng)，JavaScript 應(yīng)用程序，提供必要的功能

? 使用easyui 你不需要寫很多代碼，你只需要通過編寫一些簡(jiǎn)單HTML 標(biāo)

記，就可以定義用戶界面

? easyui 是個(gè)完美支持HTML5 網(wǎng)頁(yè)的完整框架

? easyui 節(jié)省您網(wǎng)頁(yè)開發(fā)的時(shí)間和規(guī)模

? easyui 很簡(jiǎn)單但功能強(qiáng)大

1.2. EasyUI 目錄結(jié)構(gòu)分析

demo：easyui 的各個(gè)組件使用示例

demo-mobile：easyui 在移動(dòng)終端上各個(gè)組件使用示例

locale：是國(guó)際化支持文件夾

src：是部分easyui 插件的源碼

plugins：是easyui 使用的插件

themes：easyui 基礎(chǔ)自帶的主題

jQuery EasyUI 的安裝只需要下載解壓后；將需要使用的js 和css 引入頁(yè)面

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

themes/default/easyui.css

themes/icon.css

jquery.min.js

jquery.easyui.min.js

locale/easyui-lang-zh_CN.js

2. EasyUI 開發(fā)步驟

需求：完成一個(gè)EasyUI 的彈窗。

2.1. 把EasyUI 的資源導(dǎo)入項(xiàng)目

2.2. 在JSP 頁(yè)面導(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è)計(jì)一個(gè)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. 效果

至此，一個(gè)easyui的環(huán)境就打好了，接下來就可以進(jìn)行開發(fā)了！

感謝你長(zhǎng)得那么美還來看小編的文章，喜歡就點(diǎn)關(guān)注吧！