如何使用easyUI

一、簡介

以下內容來自百度：

jQuery EasyUI是一組基於jQuery的UI插件集合，而jQuery EasyUI的

目標就是幫助web開發者更輕松的打造出功能豐富並且美觀的UI界面。開發者不需要編寫復雜的javascript，也不需要對css樣式有深入的了解，開發者需要了解的只有一些簡單的html標簽。

jQuery EasyUI為我們提供了大多數UI控件的使用，如：accordion，combobox，menu，dialog，tabs，validatebox，datagrid，window，tree等等。

jQuery EasyUI是基於JQuery的一個前台ui界面的插件，功能相對沒extjs強大，但頁面也是相當好看的。一些功能也足夠開發者使用，相對於extjs更輕量。

jQuery EasyUI有一下特點：

1、基於jquery用戶界面插件的集合

2、為一些當前用於交互的js應用提供必要的功能

3、使用 EasyUI你不需要寫很多的javascript代碼，通常只需要寫HTML標記來定義用戶界面即可

4、支持HTML5

5、開發產品時可節省時間和資源

6、簡單，但很強大

二、如何使用jquery EasyUI這個框架

方法一（個人推薦這種方法）：這個方法也是官方給出的方法,

只要在一個要使用html的文件中引入以下的js和css就可以了：

<!-- easyUI必須引入的文件 S -->

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

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

<script type="text/javascript" src="../easyui/jquery-1.8.2.min.js"></script>

<script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js"></script> 

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

<!-- easyUI必須引入的文件 E -->

下圖為easyUI對應目錄的說明：

方法二（利用 easyLoader這個文件來進行實現對easyUI的加載）：

優點：這種方式的加載，在頁面的源代碼上會少寫一些代碼看起來比較的簡潔

缺點：缺點也很明顯，你不得在easyload這個方法的回調函數中在對頁面的DOM進行操作，如：

//easyloader.base = '../'; //用來設置easyui的根文件目錄

easyloader.load('messager',function(){

$.messager.alert("操作提示","提示的內容");

});

注：easyloade除了加載對應的整個框架以外，還有很多屬性和方法：

屬性：

//easyloader.theme = 'gray'; //動態加載主題

//easyloader.css = '/'; //解析時加載的一個css文件

//easyloader.locale = 'en'; //動態加載語言!

using('messager',function(){ //在load事件中你可以加載一個單獨的一個插件，也可能是多個插件不過是以數據的形勢，

//也可以動態的加載css文件和js文件

$.messager.alert("操作提示","提示的內容");

}); //在這里用using相當於easyloder.load方法效果是一樣的！

事件：

//easyloader.onProgress = function(){alert('onProgress中')}; //在文件加載中所做的事情

//easyloader.onLoad = function(){alert('onLoad中')}; //文件加載的時候做的事情

方法：