jquery漂亮的按扭控件（源代码共享）

开发项目时，经常需要自已开发一些UI组件，在这里共享一个刚开发的Button控件，这个Button使用很简单，只要加入相关的CSS和JS文件，
这样页面中的所有input按扭都将会被自动渲染为漂亮的个性化按扭，不需要写一句代码。<SPAN class="Apple"> </SPAN><BR>源代码和示例在附件中,Button的相关JS源代码如下:

 

(function($){  
    $.fn.btn = function(){  
        var btn = this.data("_self");;  
        if(btn){  
            return btn;  
        };  
        this.init = function(){  
            var obj = $(this);  
            var id=$(this).attr('id')||"gen"+Math.random();  
            var icon = $(this).attr('icon')||'icon-btncom';  
            var bntStr=[  
                '<table id="',id,'" class="z-btn" cellSpacing=0 cellPadding=0 border=0><tbody><tr>',  
                    '<TD class=z-btn-left><i> </i></TD>',  
                    '<TD class=z-btn-center><EM unselectable="on">',  
                        '<BUTTON class="z-btn-text ',icon,'" >',$(this).attr('value'),'</BUTTON>',  
                    '</EM></TD>',  
                    '<TD class=z-btn-right><i> </i></TD>',  
                '</tr></tbody></table>'  
            ];  
            var bnt = $(bntStr.join('')).btn();  
            bnt._click = eval(obj.attr("onclick"));  
            bnt.disable();  
            if(obj.attr("disabled"))  
                bnt.disable();  
            else bnt.enable();  
            $(this).replaceWith(bnt);  
            bnt.data("_self", bnt);    
            return bnt;  
        };  
        this.enable = function(){  
            this.removeClass("z-btn-dsb");  
            this.click(this._click);  
            this.hover(  
                  function () {  
                    $(this).addClass("z-btn-over");  
                  },  
                  function () {  
                    $(this).removeClass("z-btn-over");  
                  }  
                )  
        };  
        this.disable = function(){  
             this.addClass("z-btn-dsb");  
             this.unbind("hover");  
             this.unbind("click");  
        };    
        return this;  
    };  
      
    $(function(){  
        $("input[type='button']").each(function(){  
            $(this).btn().init();  
        });  
        $("input[type='reset']").each(function(){  
            $(this).btn().init().click(function(){  
                var form = $(this).parents("form")[0];  
                if(form)  
                    form.reset();  
            });  
        });  
        $("input[type='submit']").each(function(){  
            $(this).btn().init().click(function(){  
                var form = $(this).parents("form")[0];  
                if(form)  
                    form.submit();  
            });  
        });  
    })  
})(jQuery);  

自己备份的下载地址：
http://download.csdn.net/source/2398665
原文地址：

http://www.javaeye.com/topic/422278