jquery按钮

说明

本文章来自网络，仅供个人学习！

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

Java代码

1. (function($){   
2.     $.fn.btn = function(){   
3.         var btn = this.data("_self");;   
4.         if(btn){   
5.             return btn;   
6.         };   
7.         this.init = function(){   
8.             var obj = $(this);   
9.             var id=$(this).attr('id')||"gen"+Math.random();   
10.             var icon = $(this).attr('icon')||'icon-btncom';   
11.             var bntStr=[   
12.                 '<table id="',id,'" class="z-btn" cellSpacing=0 cellPadding=0 border=0><tbody><tr>',   
13.                     '<TD class=z-btn-left><i>&nbsp;</i></TD>',   
14.                     '<TD class=z-btn-center><EM unselectable="on">',   
15.                         '<BUTTON class="z-btn-text ',icon,'" >',$(this).attr('value'),'</BUTTON>',   
16.                     '</EM></TD>',   
17.                     '<TD class=z-btn-right><i>&nbsp;</i></TD>',   
18.                 '</tr></tbody></table>'  
19.             ];   
20.             var bnt = $(bntStr.join('')).btn();   
21.             bnt._click = eval(obj.attr("onclick"));   
22.             bnt.disable();   
23.             if(obj.attr("disabled"))   
24.                 bnt.disable();   
25.             else bnt.enable();   
26.             $(this).replaceWith(bnt);   
27.             bnt.data("_self", bnt);     
28.             return bnt;   
29.         };   
30.         this.enable = function(){   
31.             this.removeClass("z-btn-dsb");   
32.             this.click(this._click);   
33.             this.hover(   
34.                   function () {   
35.                     $(this).addClass("z-btn-over");   
36.                   },   
37.                   function () {   
38.                     $(this).removeClass("z-btn-over");   
39.                   }   
40.                 )   
41.         };   
42.         this.disable = function(){   
43.              this.addClass("z-btn-dsb");   
44.              this.unbind("hover");   
45.              this.unbind("click");   
46.         };     
47.         return this;   
48.     };   
49.        
50.     $(function(){   
51.         $("input[type='button']").each(function(){   
52.             $(this).btn().init();   
53.         });   
54.         $("input[type='reset']").each(function(){   
55.             $(this).btn().init().click(function(){   
56.                 var form = $(this).parents("form")[0];   
57.                 if(form)   
58.                     form.reset();   
59.             });   
60.         });   
61.         $("input[type='submit']").each(function(){   
62.             $(this).btn().init().click(function(){   
63.                 var form = $(this).parents("form")[0];   
64.                 if(form)   
65.                     form.submit();   
66.             });   
67.         });   
68.     })   
69. })(jQuery);