如何使用easyUI

1、簡介

如下內容來自百度：

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有一下特色：

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

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

三、使用 EasyUI你不須要寫不少的javascript代碼，一般只須要寫HTML標記來定義用戶界面便可

四、支持HTML5

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

六、簡單，但很強大

2、如何使用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中')}; //文件加載的時候作的事情

方法：