一个简单Widget实例开发

//此widget是将textbox进行修饰一下的。自身没有css，采用的是jquery ui css framework的样式  
(function($){  
//ui默认采用jquery的ui前缀，后面的是widget名称  
    $.widget("ui.textboxdecorator", {  
//此widget中没有options  
        options:{  
        },  
        _init: function(){  
            //验证是否是需要装饰的元素  
              
            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也就是调用此widget的元素  
            var e = this.element;  
//ui-widget widget基本的样式，ui-state-default。默认状态的样式；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");  
            });  
        },  
//销毁时，移除widget增加的样式  
        destroy:function(){  
            this.element.removeClass("ui-widget ui-state-default ui-corner-all ui-state-hover ui-state-active");  
        }          
    })  
})(jQuery) 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.