一个简单的widget

这里是一个简单的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)

在使用该widget的时候，需要引用jquery，jquery.ui.core.js,jquery.ui.widget.js文件，css文件需要jquery.ui.core.css和jquery.ui.theme.css两个文件

在调用的时候采用$("***"). textboxdecorator();来调用此widget。

转载于:https://www.cnblogs.com/dail/archive/2010/06/29/1767816.html