easyui 初體驗

簡介

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

jQuery EasyUI是基於JQuery的一個前台ui界面的插件，功能相對沒extjs強大，但頁面也是相當好看的，同時頁面支持各種themes以滿足使用者對於頁面不同風格的喜好。一些功能也足夠開發者使用，相對於extjs更輕量。

 

目錄結構

 

demo文件夾：一些示例，（正式項目中刪除）

 

locale：一些不同語言的文件，其實是對easyui的擴展。（只須保留你想用的語言相對應的文件）

 

plugins：easyui提供的各個功能的文件。（使用方式二加載必須保留，方式一加載可以刪除）

 

src :各個插件的源文件，不是全部，其實有些功能不是開源的，是商業授權，因此沒有源文件。（可以刪除）

 

themes：主題，就是css文件和要用到的圖標文件，里邊提供5種風格。（可以只保留要使用的風格，並且具體到一個風格里，又分為兩部分：easyui.css和其它所有css。easyui.css是其它所有css的合並后結果，在不同的加載方式中只會用到一部分。）

 

easyloader.js：暫且稱之為加載器文件。在使用方式一加載也不會被使用。

 

jquery.easyui.min.js：easyui的主文件。它是plugins下所有文件合並后的結果，因些它在使用方式一加載必須保留，方式二加載不會使用到，可以刪除。

 

jquery.min.js：jquery文件，easyui是基於jquery的，因此是必須的。

 

 

 

其它的是一些授權文件和更新日志之類的，就不說了。

 

兩種引用加載方式

 

1：餓漢式加載

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

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

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

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

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

這種也是最常用的方式。這種方式會加載easyui提供的所有功能。

 

2：懶漢式加載

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

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

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

這種方式就相對比較懶，只會在使用特定功能的時候才會加載相對應的plugins下的js和風格里css文件，而其它不使用的功能對應的js和css永遠不會被下載。而easyloader.js就是負責用於加載各個插件的。

 

不同加載方式產生問題

 

風格

方式1的加載我們通過引用 themes/default/easyui.css來指定，引用不同風格下的easyui.css來使用不同的風格，但是方式2我們並沒用指定風格？如何指定風格？

不指定時，默認是引用default風格下的樣式，就會去下載該風格下的樣式。如果你使用方式2時且沒有指定風格，不存在default風格就會出現問題。

當然我們可以在頁面加載后通過

easyloader.theme = "gray";

來指定風格。

語言

同樣的對於語言文件，對於方式1我們可以直接在頁面引用jquery.easyui.min.js的后面引用。

 

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

但是這對於方式2的加載，這是不起作用的。

 

因些語言文件其實是對各個插件默認配置的修改，當插件都還沒有加載時，語言文件對它的修改當然是不會起作用的。

 

因此我們可以通過下面

 

easyloader.locale = "zh_CN";

來指定使用何種語言。

 

兩種渲染方式

 

1：javascript方式

<input id="cc" style="width:200px" />

$('#cc').combobox({

        url: ...,

        required: true,

        valueField: 'id',

        textField: 'text'

});

 

2：html標記方式

<input id="cc" class="easyui-combobox" name="dept" 

data-options="valueField:'id',textField:'text',url:'get_data.php'" /> 

 

注：具網上傳言，html標記方式相對JS加載方式而言，（在IE）渲染性能差些。

這個我還沒感覺到，只是個人覺得JS加載方式相對html標記方式要更加靈活，你可以在DOM加載完畢之后再去渲染控件，也可以在使用到某個控件時，再去渲染。

由於EasyUI是基於jQuery的，而上面2種方式使用到了jQuery的選擇器。根據給定ID去匹配元素比根據給定的class去匹配元素性能更佳。

所以選擇哪一種，你懂的。。。。。。

 

說說IE兼容性問題

 

EasyUI本身控件功能是很不錯，效果也漂亮，使用方式也簡單，但是對於IE不同版本的兼容性不是很好，性能問題尤其突出，所以，如果你是用IE瀏覽器，那么就不建議使用EasyUI。

如果你是在項目中使用EasyUI，又要兼容IE8及以下瀏覽器。那么可以搭配

EasyUI 1.3.1+EasyUI 1.3.2+jQuery 1.8.x

來使用（本人在實際項目中使用過，期間發現較少問題，總的情況還算穩定，就是頁面控件渲染是硬傷，網上針對部分EasyUI控件的優化辦法也有一些，聊勝於無，總的效果不是很理想）。

注：jQuery Easy UI從1.3.3到現在的最新版本1.3.4都是基於jQuery2.0的，而jQuery2.0是不支持IE6、7、8的了，所以jQueryEasyUI1.3.3后的版本都不支持IE6、7、8。如果想繼續兼容IE8以前的版本，只能使用jQueryEasyUI1.3.2或以前的版本了。另外jQuery1.9對IE8兼容性不是很好，所以不建議選擇。

 

插件列表如下：

分類	插件
Base（基礎）	Parser 解析器 Easyloader 加載器 Draggable 可拖動 Droppable 可放置 Resizable 可調整尺寸 Pagination 分頁 Searchbox 搜索框 Progressbar 進度條 Tooltip 提示框
Layout（布局）	Panel 面板 Tabs 標簽頁/選項卡 Accordion 折疊面板 Layout 布局
Menu（菜單）與 Button（按鈕）	Menu 菜單 Linkbutton 鏈接按鈕 Menubutton 菜單按鈕 Splitbutton 分割按鈕
Form（表單）	Form 表單 Validatebox 驗證框 Combo 組合 Combobox 組合框 Combotree 組合樹 Combogrid 組合網格 Numberbox 數字框 Datebox 日期框 Datetimebox 日期時間框 Calendar 日歷 Spinner 微調器 Numberspinner 數值微調器 Timespinner 時間微調器 Slider 滑塊
Window（窗口）	Window 窗口 Dialog 對話框 Messager 消息框
DataGrid（數據網格）與 Tree（樹）	Datagrid 數據網格 Propertygrid 屬性網格 Tree 樹 Treegrid 樹形網格

 

以及幾個常用的擴展插件

1 autocomplete自動完成控件，類似百度搜索框
2 lookup控件，這是一個比較中國化的東西，企業應用中使用的頻率很高
3 daterange這個是國外網站上找到了，很炫的一款控件，略做了一些修改並引入

對於EasyUI幾個常用控件的源碼分析，學習和優化，可以去這個網址看看。

http://www.easyui.info/