1、jQuery Easy UI主要的運行原理是通過核心的代碼調用插件來實現UI效果的
2、jQuery Easy UI插件與插件之間的關系是：
一、獨立式插件：
獨立式插件是指：不與其他的插件具有相互的依賴關系，這些插件的用法一般相對簡單
典型的代表有：pagination(分頁)、searchbox(搜索框)、progressbar(進度條)、tooltip(提示框)
二、疊加式插件：
疊加式插件指的是：通過一些簡單的插件去疊加而成，並且繼承三大基本功能組件
科普一下：三大基本功能組件是LZ，自己定義的，指的是：draggable(拖動)、droppable(放置)、resizable(調整大小)，這些跟獨立式插件的不同是，這些插件往往與復雜的插件有依賴關系
幫助手冊中的依賴關系：可以簡單的理解為繼承關系，也就是父類可以調用里面的屬性和方法
例如以menubutton(菜單按鈕)為例，那么之間的依賴關系如下：
menubutton的HTML代碼如下：
<a href="javascript:void(0)" id="mb" class="easyui-menubutton" data-options="menu:'#mm',iconCls:'icon-edit'">Edit</a>
<div id="mm" style="width:150px;">
<div data-options="iconCls:'icon-undo'">Undo</div>
<div data-options="iconCls:'icon-redo'">Redo</div>
<div class="menu-sep"></div>
<div>Cut</div>
<div>Copy</div>
<div>Paste</div>
<div class="menu-sep"></div>
<div data-options="iconCls:'icon-remove'">Delete</div>
<div>Select All</div>
</div>
JavaScript腳本如下：
$('#mb').menubutton({
iconCls: 'icon-edit',
menu: '#mm'
});
其中id為mm的標簽可以使用menu控件的屬性和方法
在mm標簽下面對應的Button控件(也就是HTML代碼中的div)可以使用button的屬性和方法
3、jQuery Easy UI的布局
jQuery Easy UI主要的布局思想是按照講頁面風格成為東、西、南、北、中五塊模塊，然后根據業務需求將里面有些模塊進行隱藏，固定等處理(juqery Easy UI主要適用后台管理系統的開發，因為Easy UI過於龐大所有會印象前端頁面的加載速度，而且不能進行瀑布流布局和響應式布局的開發)
4、validateBox(驗證框)驗證規則的自定義
HTML示例代碼：
<input id="vv" class="easyui-validatebox" data-options="required:true,validType:'email'" />
JS示例代碼：
//判斷兩次輸入的密碼是否相同
$.extend($.fn.validatebox.defaults.rules, { equals: { validator: function(value,param){ return value == $(param[0]).val(); }, message: 'Field do not match.' }
sameVal:{
validator:function(value,param){
return value!=param;
},
message:'不能與舊密碼相同'
}, });
注釋：
$.extend(); jquery的拓展方法，用於對jquery進行拓展操作
equal：為自定的一個字段，在使用的時候可以看成是方法名，但是必須對其進行傳參
$.fn.validatebox.defaults.rules 對validatebox控件默認的驗證規則進行重寫
value 當前控件的value值 相當於$(this).val()
param 傳入參數的第一個位置的對象
使用方法：
在JavaScript中加入以下代碼即可
$('vv').validatebox({ validType:'equals["#firstPassword"]', });
//將id為firstPassword傳給equals
如果是要匹配多個規則的話，可以講驗證的條件依次放進數組中
示例：
$('#firstPassword').validatebox({ required:true, validType:['equals["#firstPassword"]','sameVal["123456"]'], });
在進行多個驗證規則的匹配的時候，要注意匹配的先后順序，
在同時匹配多個驗證規則的時候，框架中默認的是匹配第一個驗證規則，也就是不對第二個驗證規則進行匹配
Easy UI換皮膚
easy ui中提供了幾套皮膚供用戶選擇，具體位置是在
還可以直接從官網下載，一些新主題包，下載地址
為了將當前的主題轉態保存起來，要使用jquery-cookie的JS控件，下載地址
實現換膚的邏輯
1、將所有的主題包放在同一目錄下面
2、通過單擊換膚按鈕給指定的JS腳本傳遞一個值，然后獲取當前主題包的CSS路徑，將不同的主題包名進行替換
注意：不能將引入的主題包寫死
3、然后對指定的id的標簽中的href屬性進行重寫
這個也就是為什么要在Link標簽中添加id屬性的原因
4、將傳入的themeName保存到cookie中
換膚的步驟
1、引入JavaScript的coookie控件
<script type="text/javascript" src="jquery-cookie.js"></script>
2、
使用C#獲取cookie中保存的值
<link id="easyuiTheme" rel="stylesheet" href=" <%= var cookie=Request.cookie['easyuiThemeName']; if(cookie==null){ return ’default‘; }else{ return Request.cookie['easyuiThemeName']; } =%> /easyui.css" type="text/css"></link>
JS的處理腳本如下：
changeTheme = function(themeName) { var $easyuiTheme = $('#easyuiTheme'); var url = $easyuiTheme.attr('href'); var href = url.substring(0, url.indexOf('themes')) + 'themes/' + themeName + '/easyui.css'; $easyuiTheme.attr('href', href); var $iframe = $('iframe'); if ($iframe.length > 0) { for ( var i = 0; i < $iframe.length; i++) { var ifr = $iframe[i]; $(ifr).contents().find('#easyuiTheme').attr('href', href); } } $.cookie('easyuiThemeName', themeName, { expires : 7 }); };
主要黃色的內容是為了嵌套模塊進行主題變換用的
也就是如果在頁面中嵌套一個iframe標簽，那么主題變換是不會影響到iframe標簽里面的變換的，因為iframe標簽相當於分離成兩個頁面，所以也要對iframe標簽重復進行替換一次
Easy UI插件的修改
注釋：由於Easy UI不是開源，所以不能對其進行插件的開發，但是可以對其進行修改
以ProgressBar控件為例：
$.fn.progressbar.parseOptions=function(_12){ return $.extend({},$.parser.parseOptions(_12,["width","height","text",{value:"number"}])); }; $.fn.progressbar.defaults={width:"auto",height:22,value:0,text:"{value}%",onChange:function(_13,_14){ }};
$.fn.progressbar.parseOptions是定義控件的屬性及屬性傳入值得類型
$.fn.progressbar.defaults是定義控件的默認值
其他的內容沒有研究出來，希望有研究出來的同學一起探討一下