easyui 初体验
簡介
jQuery EasyUI是一組基于jQuery的UI插件集合體，而jQuery EasyUI的目標(biāo)就是幫助web開發(fā)者更輕松的打造出功能豐富并且美觀的UI界面。開發(fā)者不需要編寫復(fù)雜的javascript，也不需要對css樣式有深入的了解，開發(fā)者需要了解的只有一些簡單的html標(biāo)簽。
jQuery EasyUI是基于JQuery的一個前臺ui界面的插件，功能相對沒extjs強(qiáng)大，但頁面也是相當(dāng)好看的，同時頁面支持各種themes以滿足使用者對于頁面不同風(fēng)格的喜好。一些功能也足夠開發(fā)者使用，相對于extjs更輕量。
?
目錄結(jié)構(gòu)
?
demo文件夾：一些示例，（正式項目中刪除）
?
locale：一些不同語言的文件，其實是對easyui的擴(kuò)展。（只須保留你想用的語言相對應(yīng)的文件）
?
plugins：easyui提供的各個功能的文件。（使用方式二加載必須保留，方式一加載可以刪除）
?
src :各個插件的源文件，不是全部，其實有些功能不是開源的，是商業(yè)授權(quán)，因此沒有源文件。（可以刪除）
?
themes：主題，就是css文件和要用到的圖標(biāo)文件，里邊提供5種風(fēng)格。（可以只保留要使用的風(fēng)格，并且具體到一個風(fēng)格里，又分為兩部分：easyui.css和其它所有css。easyui.css是其它所有css的合并后結(jié)果，在不同的加載方式中只會用到一部分。）
?
easyloader.js：暫且稱之為加載器文件。在使用方式一加載也不會被使用。
?
jquery.easyui.min.js：easyui的主文件。它是plugins下所有文件合并后的結(jié)果，因些它在使用方式一加載必須保留，方式二加載不會使用到，可以刪除。
?
jquery.min.js：jquery文件，easyui是基于jquery的，因此是必須的。
?
?
?
其它的是一些授權(quán)文件和更新日志之類的，就不說了。
?
兩種引用加載方式
?
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>
這種方式就相對比較懶，只會在使用特定功能的時候才會加載相對應(yīng)的plugins下的js和風(fēng)格里css文件，而其它不使用的功能對應(yīng)的js和css永遠(yuǎn)不會被下載。而easyloader.js就是負(fù)責(zé)用于加載各個插件的。
?
不同加載方式產(chǎn)生問題
?
風(fēng)格
方式1的加載我們通過引用 themes/default/easyui.css來指定，引用不同風(fēng)格下的easyui.css來使用不同的風(fēng)格，但是方式2我們并沒用指定風(fēng)格？如何指定風(fēng)格？
不指定時，默認(rèn)是引用default風(fēng)格下的樣式，就會去下載該風(fēng)格下的樣式。如果你使用方式2時且沒有指定風(fēng)格，不存在default風(fēng)格就會出現(xiàn)問題。
當(dāng)然我們可以在頁面加載后通過
easyloader.theme = "gray";
來指定風(fēng)格。
語言
同樣的對于語言文件，對于方式1我們可以直接在頁面引用jquery.easyui.min.js的后面引用。
?
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
但是這對于方式2的加載，這是不起作用的。
?
因些語言文件其實是對各個插件默認(rèn)配置的修改，當(dāng)插件都還沒有加載時，語言文件對它的修改當(dāng)然是不會起作用的。
?
因此我們可以通過下面
?
easyloader.locale = "zh_CN";
來指定使用何種語言。
?
兩種渲染方式
?
1：javascript方式
<input id="cc" style="width:200px" />
$('#cc').combobox({
??????? url: ...,
??????? required: true,
??????? valueField: 'id',
??????? textField: 'text'
});
?
2：html標(biāo)記方式
<input id="cc" class="easyui-combobox" name="dept"?
data-options="valueField:'id',textField:'text',url:'get_data.php'" />?
?
注：具網(wǎng)上傳言，html標(biāo)記方式相對JS加載方式而言，（在IE）渲染性能差些。
這個我還沒感覺到，只是個人覺得JS加載方式相對html標(biāo)記方式要更加靈活，你可以在DOM加載完畢之后再去渲染控件，也可以在使用到某個控件時，再去渲染。
由于EasyUI是基于jQuery的，而上面2種方式使用到了jQuery的選擇器。根據(jù)給定ID去匹配元素比根據(jù)給定的class去匹配元素性能更佳。
所以選擇哪一種，你懂的。。。。。。
?
說說IE兼容性問題
?
EasyUI本身控件功能是很不錯，效果也漂亮，使用方式也簡單，但是對于IE不同版本的兼容性不是很好，性能問題尤其突出，所以，如果你是用IE瀏覽器，那么就不建議使用EasyUI。
如果你是在項目中使用EasyUI，又要兼容IE8及以下瀏覽器。那么可以搭配
EasyUI 1.3.1+EasyUI 1.3.2+jQuery 1.8.x
來使用（本人在實際項目中使用過，期間發(fā)現(xiàn)較少問題，總的情況還算穩(wěn)定，就是頁面控件渲染是硬傷，網(wǎng)上針對部分EasyUI控件的優(yōu)化辦法也有一些，聊勝于無，總的效果不是很理想）。
注：jQuery Easy UI從1.3.3到現(xiàn)在的最新版本1.3.4都是基于jQuery2.0的，而jQuery2.0是不支持IE6、7、8的了，所以jQueryEasyUI1.3.3后的版本都不支持IE6、7、8。如果想繼續(xù)兼容IE8以前的版本，只能使用jQueryEasyUI1.3.2或以前的版本了。另外jQuery1.9對IE8兼容性不是很好，所以不建議選擇。
?
插件列表如下：
| 分類 | 插件 |
| Base（基礎(chǔ)） |
|
| Layout（布局） |
|
| Menu（菜單）與 Button（按鈕） |
|
| Form（表單） |
|
| Window（窗口） |
|
| DataGrid（數(shù)據(jù)網(wǎng)格）與 Tree（樹） |
|
?
以及幾個常用的擴(kuò)展插件
1 autocomplete自動完成控件，類似百度搜索框
2 lookup控件，這是一個比較中國化的東西，企業(yè)應(yīng)用中使用的頻率很高
3 daterange這個是國外網(wǎng)站上找到了，很炫的一款控件，略做了一些修改并引入
對于EasyUI幾個常用控件的源碼分析，學(xué)習(xí)和優(yōu)化，可以去這個網(wǎng)址看看。
http://www.easyui.info/
轉(zhuǎn)載于:https://www.cnblogs.com/birdwawe/p/4062066.html
總結(jié)
以上是生活随笔為你收集整理的easyui 初体验的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： codeforces 374A Inn
- 下一篇： WPF中的动画——（五）路径动画