jQuery Easy UI 開發筆記

一、jQuery Easy UI主要的運行原理是經過核心的代碼調用插件來實現UI效果的

二、jQuery Easy UI插件與插件之間的關係是：

1、獨立式插件：

獨立式插件是指：不與其餘的插件具備相互的依賴關係，這些插件的用法通常相對簡單

典型的表明有：pagination(分頁)、searchbox(搜索框)、progressbar(進度條)、tooltip(提示框)

2、疊加式插件：

疊加式插件指的是：經過一些簡單的插件去疊加而成，而且繼承三大基本功能組件

科普一下：三大基本功能組件是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的屬性和方法

三、jQuery Easy UI的佈局

jQuery Easy UI主要的佈局思想是按照講頁面風格成爲東、西、南、北、中五塊模塊，而後根據業務需求將裏面有些模塊進行隱藏，固定等處理(juqery Easy UI主要適用後臺管理系統的開發，由於Easy UI過於龐大全部會印象前端頁面的加載速度，並且不能進行瀑布流佈局和響應式佈局的開發)

四、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控件，下載地址

實現換膚的邏輯

一、將全部的主題包放在同一目錄下面

二、經過單擊換膚按鈕給指定的JS腳本傳遞一個值，而後獲取當前主題包的CSS路徑，將不一樣的主題包名進行替換

注意：不能將引入的主題包寫死

三、而後對指定的id的標籤中的href屬性進行重寫

這個也就是爲何要在Link標籤中添加id屬性的緣由

四、將傳入的themeName保存到cookie中

換膚的步驟

一、引入JavaScript的coookie控件

<script type="text/javascript" src="jquery-cookie.js"></script>

二、

使用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是定義控件的默認值
其餘的內容沒有研究出來，但願有研究出來的同窗一塊兒探討一下