//此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)
在使用该widget的时候，需要引用jquery，jquery.ui.core.js,jquery.ui.widget.js文件，css文件需要jquery.ui.core.css和jquery.ui.theme.css两个文件
在调用的时候采用$("***"). textboxdecorator();来调用此widget。