jquery.widget是挂件，通过挂件模式挂载在jquery对象上，其实本质上也就是用了$.fn.extend和$.extend的扩展。

http://blog.sina.com.cn/s/blog_4a60ba9c01014dea.html

创新互联长期为上1000+客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为临夏企业提供专业的网站建设、成都网站制作，临夏网站改版等技术服务。拥有十余年丰富建站经验和众多成功案例,为您定制开发。

 

• 例如：

//此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。

• jQuery编写widget的一些窍门

 

本文标题：jquery.widget开发(1)
标题网址：http://csdahua.cn/article/gdipeg.html