这里是一个简单的widget,在代码里也写了注释。
代码
<!--
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
--> // 此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)
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
--> // 此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。