jQuery Easy UI 開發詳解
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> 其中id為mm的標簽可以使用menu控件的屬性和方法
在mm標簽下面對應的Button控件可以使用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
});
};</pre>
主要黃色的內容是為了嵌套模塊進行主題變換用的
也就是如果在頁面中嵌套一個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是定義控件的默認值其他的內容沒有研究出來，希望有研究出來的同學一起探討一下</div>
</span></span></span>