jquery.widget開發(fā)(1)

jquery.widget是掛件，通過掛件模式掛載在jquery對象上，其實本質(zhì)上也就是用了$.fn.extend和$.extend的擴展。

http://blog.sina.com.cn/s/blog_4a60ba9c01014dea.html

創(chuàng)新互聯(lián)長期為上1000+客戶提供的網(wǎng)站建設(shè)服務(wù)，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為臨夏企業(yè)提供專業(yè)的網(wǎng)站建設(shè)、成都網(wǎng)站制作，臨夏網(wǎng)站改版等技術(shù)服務(wù)。擁有十余年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

Jquery ui 提供了一些基本的widget，但是他提供了很好的機制來創(chuàng)建widget。在jquery css framework中包含了基本的css樣式（視覺和感覺諸如顏色，字體大小，圖標(biāo)等），而在ui的css中，則需要定義構(gòu)建widget結(jié)構(gòu)的css，比如margin，padding，position等。在開發(fā)widget的時候也要盡量遵循這一原則，這樣才能很好的利用jquery theme roller來應(yīng)用樣式，從而在整體上保持一致，在前面的文章中簡單的 介紹了jquery css framework。下面就簡單的介紹下jquery ui 的開發(fā)指引

Jquery的官方文檔中對此寫的很清晰。一般來說，jquery ui都是繼承自jquery.ui.widget.js這個文件的。這個文件提供了一個工廠方法來創(chuàng)建widget對象。其方法是$.widget(String name, Options prototype).下面簡單介紹下這個類提供的方法和屬性。在創(chuàng)建widget的時候?qū)⒅貙戇@些。

destroy()：將widget實例從dom對象上移除，在開發(fā)widget的時候一般此方法是必須的。就是移除你自己在dom element上添加的樣式和行為以及dom結(jié)構(gòu)

options：在這里面保存的是widget的配置信息，在創(chuàng)建widget的時候需要設(shè)置一些配置參數(shù)。

element：就是widget作用的dom對象。

enable()和disable()這兩個方法就是禁用和啟用widget的。其實是修改options.disabled。

還有兩個私有方法是創(chuàng)建widget的時候要重寫的。

_create() 這個方法就是創(chuàng)建widget的方法，在頁面調(diào)用widget的時候，就會執(zhí)行此方法，來構(gòu)建widget。Widget的絕大大多數(shù)行為和結(jié)構(gòu)都是在這里創(chuàng)建的。

_init() 這個方法大多數(shù)時候不會被重寫，這個方法在構(gòu)建widget的時候在_create后執(zhí)行。從相關(guān)的文檔上查詢到：

_create()方法在widget構(gòu)建的時候執(zhí)行，而_init()方法在構(gòu)建和重新初始化的時候執(zhí)行。而destroy方法則是在移除widget的時候被執(zhí)行。在widget中，所有的私有方法都將加以"_"前綴

_setOption():此方法提供了options的屬性的設(shè)置，一般情況下如果options里面的參數(shù)不需要特殊處理（校驗，類型轉(zhuǎn)換，以及設(shè)置屬性的時候觸發(fā)某一操作等）的時候不需要對此方法進行重寫

事件

如果有自定義的事件，可以采用widget為我們封裝好的方法來處理_trigger()這個方法來處理，其調(diào)用方法 this._trigger(type, event, data)，第一個參數(shù)為時間類型，第二個參數(shù)為事件event對象，第三個參數(shù)為事件要傳遞的參數(shù)。

 

  • 例如：
  1. //此widget是將textbox進行修飾一下的。自身沒有css，采用的是jquery ui css framework的樣式 
  2. (function($){ 
  3. //ui默認采用jquery的ui前綴，后面的是widget名稱 
  4.     $.widget("ui.textboxdecorator", { 
  5. //此widget中沒有options 
  6.         options:{ 
  7.         }, 
  8.         _init: function(){ 
  9.             //驗證是否是需要裝飾的元素 
  10.              
  11.             if (!(this.element.attr("tagName").toLowerCase() === "input" || this.element.attr("tagName").toLowerCase() === "textarea")) { 
  12.                 return; 
  13.             } 
  14.             if (!(this.element.attr("type").toLowerCase() === "text" || this.element.attr("type").toLowerCase() === "password")) { 
  15.                 if (this.element.attr("tagName").toLowerCase() === "input")  
  16.                     return; 
  17.             } 
  18. //this.element也就是調(diào)用此widget的元素 
  19.             var e = this.element; 
  20. //ui-widget widget基本的樣式，ui-state-default。默認狀態(tài)的樣式；ui- corner-all 圓角（基于css3，ie下不起作用） 
  21.             this.element.addClass("ui-widget ui-state-default ui-corner-all"); 
  22.             //添加hover效果和active效果 
  23.                         this.element.mouseover(function(){ 
  24.                 e.addClass("ui-state-hover"); 
  25.             }).mouseout(function(){ 
  26.                 e.removeClass("ui-state-hover"); 
  27.             }).mousedown(function(){ 
  28.                 e.addClass("ui-state-active"); 
  29.             }).mouseup(function(){ 
  30.                 e.removeClass("ui-state-active"); 
  31.             }); 
  32.         }, 
  33. //銷毀時，移除widget增加的樣式 
  34.         destroy:function(){ 
  35.             this.element.removeClass("ui-widget ui-state-default ui-corner-all ui-state-hover ui-state-active"); 
  36.         }         
  37.     }) 
  38. })(jQuery) 

在使用該widget的時候，需要引用jquery，jquery.ui.core.js,jquery.ui.widget.js文件，css文件需要jquery.ui.core.css和jquery.ui.theme.css兩個文件。在調(diào)用的時候采用$("***"). textboxdecorator();來調(diào)用此widget。

  • jQuery編寫widget的一些竅門
  1. 在編寫widget的時候，一般我們需要綁定一些事件，最好將這些widget的綁定事件加上當(dāng)前widget的命名空間。如果同一個jQuery對象，使用了兩個widget，而兩個widget都綁定了相同的事件名稱，可能會出現(xiàn)問題。在銷毀widget的時候，去除綁定事件也很方便，只需要unbind（”.namespace“）就可以了。
  2. 在寫jQuery的時候，因為jQuery對象是支持連寫的。譬如：$(obj).css("height","20px").attr("title","abc")....

 

文章名稱：jquery.widget開發(fā)(1)
文章URL：http://muchs.cn/article46/gdipeg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、網(wǎng)站設(shè)計公司、網(wǎng)站制作、企業(yè)建站、定制開發(fā)、用戶體驗

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)