Widget實(shí)例開(kāi)發(fā)是本文要介紹的內(nèi)容，主要是來(lái)了解并學(xué)習(xí)Widget實(shí)例開(kāi)發(fā)，本文內(nèi)容不多，主要是以代碼來(lái)實(shí)現(xiàn)內(nèi)容的詳解，來(lái)看詳文。
 
這里是一個(gè)簡(jiǎn)單的widget，在代碼里也寫(xiě)了注釋。

代碼

//此widget是將textbox進(jìn)行修飾一下的。自身沒(méi)有css，采用的是jquery ui css framework的樣式  
(function($){  
//ui默認(rèn)采用jquery的ui前綴，后面的是widget名稱(chēng)  
    $.widget("ui.textboxdecorator", {  
//此widget中沒(méi)有options  
        options:{  
        },  
        _init: function(){  
            //驗(yàn)證是否是需要裝飾的元素  
              
            if (!(this.element.attr("tagName").toLowerCase() === "input" || this.element.attr("tagName").toLowerCase() === "textarea")) {  
                return;  
            }  
            if (!(this.element.attr("type").toLowerCase() === "text" || this.element.attr("type").toLowerCase() === "password")) {  
                if (this.element.attr("tagName").toLowerCase() === "input")   
                    return;  
            }  
//this.element也就是調(diào)用此widget的元素  
            var e = this.element;  
//ui-widget widget基本的樣式，ui-state-default。默認(rèn)狀態(tài)的樣式；ui- corner-all 圓角（基于css3，ie下不起作用）  
            this.element.addClass("ui-widget ui-state-default ui-corner-all");  
            //添加hover效果和active效果  
                        this.element.mouseover(function(){  
                e.addClass("ui-state-hover");  
            }).mouseout(function(){  
                e.removeClass("ui-state-hover");  
            }).mousedown(function(){  
                e.addClass("ui-state-active");  
            }).mouseup(function(){  
                e.removeClass("ui-state-active");  
            });  
        },  
//銷(xiāo)毀時(shí)，移除widget增加的樣式  
        destroy:function(){  
            this.element.removeClass("ui-widget ui-state-default ui-corner-all ui-state-hover ui-state-active");  
        }          
    })  
})(jQuery) 

在使用該widget的時(shí)候，需要引用jquery，jquery.ui.core.js,jquery.ui.widget.js文件，css文件需要jquery.ui.core.css和jquery.ui.theme.css兩個(gè)文件

在調(diào)用的時(shí)候采用$("***"). textboxdecorator();來(lái)調(diào)用此widget。

小結(jié)：一個(gè)簡(jiǎn)單Widget實(shí)例開(kāi)發(fā)的內(nèi)容介紹完了，希望通過(guò)Widget實(shí)例開(kāi)發(fā)內(nèi)容的學(xué)習(xí)能對(duì)你有所幫助！