jQuery UI是jQuery官方提供的功能效果和UI樣式。作為官方出的東西，它一直沒有被人們看重，一是它沒有datagrid，tree等UI庫必備的東西，二是它修改太過頻繁，體積龐大。其實它所有以ui開頭的插件都來自開源社區，為了統一它們的接口，jQuery花了很長的時間。在jQuery1.9中，它共有autocomplete，dialog，menu，tabs，slider，tooltip等十個UI。

jQuery UI的開發模式跟jQuery插件化操作規范是一樣的，第一次傳參為對象，就進入配置模式，第二傳參為方法名，就調用其方法，舉個例子：

初始化時，傳一個對象：$(".selector").accordion({ heightStyle:"fill", {active :2 }});

調用方法時，傳一個方法名：$(".selector").accordion("option", "active"); ?//option為方法名，active是option方法的傳參

jQuery UI中的各個控件有不同的方法和屬性，但由于都是同一個基類，因此有如下相同的操作：

讓控件不可用有兩種方式：第一種，使用配置模式$(".selector").accordion("option", "disabled", true);

第二種，直接傳入disable方式?$(".selector").accordion("disable");

讓控件可用，也有兩種方式：第一種，$(".selector").accordion("option", "disabled", false);第二種，$(".selector").accordion("enable");

由于jQuery官方UI庫不好用，于是人們開始設計自己的UI庫。國外最頂尖的是jQuery tools，bootstrap等，國內的有easyUI，DWZ等。

我們來說下，easyUI相比于jQuery UI的優勢：智能加載和個性化制定

大家都知道UI庫通常很龐大，jQuery UI的插件少，但是你要使用它，需要加載很多東西，依賴關系也非常復雜。

而easy UI有兩種應用插件的方式，一種類似于EXT（這里不講），一種類似于bootstrap。bootstrap的方式就是要求你按照文檔的范本寫HTML，里面有指定的類名，這些類名非常重要。easy UI只要求你引入核心庫和parse.js文件，其中parse.js有一段代碼在你domReady后，會掃描你的DOM樹，把這些帶有特定類名的元素全部找出來，并且根據這些類名來加載對應的UI插件的js文件，最后初始化它們，不像jQuery UI需要一次性加載很多東西。

個性化制定。由于jQuery是集合操作，$(".selector")可能得到5個匹配的元素，而$(".selector").tabs(options)這樣的操作，會對這5個元素應用相同的配置。但是，有時我們需要根據不同的元素進行不同的配置。easyUI就有這個東西，它會對元素的data-options的屬性值弄成一個配置對象，同時還支持直接傳入一個數組弄成一個配置對象，最后把這些配置對象都擴展到最終的配置對象中去，這樣，如果元素想要不同的配置，可以在data-options中添加或者把配置值放在一個數組中傳進去。比如：

<div data-options="width:100px,height:100px" minDate="2015-1-11">ddd</div>

$.parse.parseOptions(element , ["minDate", {isShowWeek:"boolean"}])

針對每一個元素，它所得到的配置對象是：

$.extend({}, defaults, $.parse.parseOptions(element , ["minDate", {isShowWeek:"boolean"}]) , options)

其中options為統一配置項，?$.parse.parseOptions(element , ["minDate", {isShowWeek:"boolean"}]) 為個性化配置項，defaults為默認配置項。

接下來，我們來看下$.parse.parseOptions方法源碼解析：

$.parse.parseOptions = function(element, properties){

　　var $ele = $(element), options={};

　　var value = $.trim($ele.attr("data-options")); ? //這里取到的值"width:100px,height:100px"

　　if(value){

　　　　var first = value.substr(0,1);

　　　　var last = value.substr(value.length-1,1);

　　　　if(first != "{"){

　　　　　　value = "{" + value; ? ? ?

　　　　}　

　　　　if(last != "}"){

　　　　　　value = value + "}"; ? ? //value等于"{width:100px,height:100px}"

　　　　}

　　　　options = (new Function( "return " + value))(); ? ? ? //執行這個新建的方法，options = {width:100px,height:100px}

　　}

　　if(properties){ ? //如果傳入了數組，這里是?["minDate", {isShowWeek:"boolean"}]

　　　　var opts = {};

　　　　for(var i=0;i<properties.length;i++){

　　　　　　var name = properties[i];

　　　　　　if(typeof name == "string"){ ? //name = "minDate"

　　　　　　　　opts[name] = $ele.attr(name); ?//這里的opts={minDate:"2015-1-11"}

　　　　　　}else{ ? ?//name =?{isShowWeek:"boolean"}

　　　　　　　　for(var key in name){

　　　　　　　　　　var type = name[key]; ? ? //type =?"boolean",key =?isShowWeek

　　　　　　　　　　if(type == "boolean"){

　　　　　　　　　　　　opts[key] = $ele.attr(key) ? ($ele.attr(key) == "true") : undefined; ?//如果元素上有isShowWeek的屬性值，并且為true，那么opts = {minDate:"2015-1-11" ,?isShowWeek: true}，這里的div元素上沒有，所以opts = {minDate:"2015-1-11" ,?isShowWeek: undefined}

　　　　　　　　　　}

　　　　　　　　}

　　　　　　}

　　　　}

　　　　$.extend(options, opts); ? // ? options = ?{width:100px,height:100px,minDate:"2015-1-11" ,?isShowWeek: undefined}

　　}

　　return options; ? ?

}

上面說的這兩個特點，在jQuery1.3后也添加了。只是方法不一樣，像jQuery1.43，它支持通過抽取元素上的data-*屬性值來做配置對象。

最后，我們來講下操作UI實例的各種方式的比較：

jQuery UI是直接傳字符串的形式來調用UI實例的方法，比如前面講的：$("div").dropdown({....})，實例化一個UI組件，如果想調用此組件的方法，那么，可以用$("div").dropdown(方法名, arg1,arg2....)，其中的方法名就是傳字符串的形式。

jQuery tools是直接操作UI實例，比如：var tooltip = $("#input1").tooltip({api : true}); tooltip.show()，這里的tooltip就是UI實例。這顯然比jQuery UI的方式好。

我們來看下它的源碼：

$.fn.tooltip = function(options){

　　var api = this.data("tooltip");

　　if(api)　　return api; ? //如果元素已經實例化過了，那么就直接返回。這里返回的是一組元素的第一個UI實例

　　options = $.extend(true, {} , defaults , options);

　　this.each(function(){

　　　　api = new Tooltip(this, options); ? //給每個元素實例化一個UI對象Tooltip

　　　　$(this).data("tooltip", api);

　　});

　　return options.api ? api : this; ? //如果配置中的api屬性為true，就返回最后一個UI實例，如果為false或者沒有，就返回this（jQuery對象），進行鏈式操作

}

上面的問題，就是如果要調用一組元素的UI實例，我們只能得到最后一個UI實例，盡管我們可以每次只選擇一個元素進行UI操作，但是這無法保證。

有一種更好的方式，請看源碼：

$.fn.tooltip = function(options){

　　var api = [];

　　this.each(function(){

　　　　api.push(new Tooltip(this, options)); ? ?//把UI實例存入到一個數組中api

　　});

　　return options.api ? $.ui.api(api) : this; ? //當需要對UI實例進行操作時，返回$.ui.api(api)，$.ui.api方法請看下面源碼

}

(function($){

　　$.ui = $.ui || {};

　　$.ui.api = function(opts){ ? ? //這里的opts是[UI實例1 , UI實例2 , UI實例3......]

　　　　var api = $(opts),first = opts[0];

　　　　for(var name in first){ ? //遍歷UI實例的每一個屬性值

　　　　　　(function(name){

　　　　　　　　if(typeof first[name] === "function"){ ? //如果是實例Tooltip的方法

　　　　　　　　　　api[name] = (/^get[^a-z]/.test(name))?

　　　　　　　　　　　　function(){ ?return first[name].apply(first,arguments); ? } : ?//如果方法名是get開頭的方法，那么方法中只執行第一個UI實例的同名方法。

　　　　　　　　　　　　function(){ ? ? ? //如果不是get開頭的方法，那么就執行所有UI實例的同名方法。

　　　　　　　　　　　　　　var arg = arguments;

　　　　　　　　　　　　　　api.each(function(idx){

　　　　　　　　　　　　　　　　var apix = api[idx];

　　　　　　　　　　　　　　　　apix[name].apply(apix, arg);

　　　　　　　　　　　　　　});

　　　　　　　　　　　　}

　　　　　　　　}

　　　　　　})(name);

　　　　}

　　　　return api; ? ?//返回的api對象，有UI實例的所有同名的方法

　　}

})(jQuery);

var tooltip = $("#div1,#div2").tooltip( {api:true} );

tooltip.show(); ? //會同時處理div1和div2兩個元素。

tooltip.getXXX(); ? //只會處理div1元素。

這一課的東西，要理解還是需要一定的時間的，反復去看，就理解了。

下一課，終于來到了MVVM模式的講解。

?

?

?

加油！

轉載于:https://www.cnblogs.com/chaojidan/p/4220941.html

總結

以上是生活随笔為你收集整理的第四十四课：jQuery UI和jQuery easy UI的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。