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

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

[img][/img]

评论

19 楼 75468850 2009-07-14  

isflyer 写道

我这里jsp下不能并排，
<input type="button" href="../home.jsp?style=sell" value="退出"/>&nbsp;
        <input type="button" href="../home.jsp?style=sell" value="退出"/>

应该横排，却是竖排

我这火狐3.0和IE7显示正常，可以同行显示

18 楼 cdaytek 2009-07-14  

想请教下LZ 是这样的 我们这个项目里 $ 已经被用成是 document.getelementbyid 我是否需要把你的js里的 $ 用别的代替呢？

17 楼 tkl211 2009-07-14  

谢谢,很实用的按钮,谢谢

16 楼 isflyer 2009-07-14  

我这里jsp下不能并排，
<input type="button" href="../home.jsp?style=sell" value="退出"/>&nbsp;
        <input type="button" href="../home.jsp?style=sell" value="退出"/>

应该横排，却是竖排

15 楼 75468850 2009-07-14  

help图片显示不正常，点击后字体出现虚线选中框，建议修改点击后的样式。总之很漂亮，很适用！

14 楼 bsq519 2009-07-14  

这个很实用。我测试了下。还可以。谢谢楼主。

13 楼 congjl2002 2009-07-14  

非常好，实用，不过重置和查询两个小图片的背景需要调整一下，最好能完全透明

12 楼 flyfan 2009-07-14  

很不错，收藏备用

11 楼 skyblue1984 2009-07-14  

很实用  支持~

10 楼 yangjianfa 2009-07-14  

很实用，谢谢LZ分享。

9 楼 whaosoft 2009-07-14  

效果不错 感谢ing

8 楼 codesoul 2009-07-14  

stworthy 写道

生成按键的这个TABLE同EXTJS很象啊。

参考了EXT，也可以说是在EXT的基础上改装、简化。
也是在匆忙中开发的，为了项目中不用每个按扭都让美工MM去做图片。

7 楼 codesoul 2009-07-14  

quaff 写道

codesoul 写道

Snowpine 写道

确实不错，楼主要是能把图片和在一张里面，然后用CSS来控制就更好了。

什么意思啊？

css sprite

这个方式简洁，等再改进一下。

6 楼 stworthy 2009-07-13  

生成按键的这个TABLE同EXTJS很象啊。

5 楼 quaff 2009-07-13  

codesoul 写道

Snowpine 写道

确实不错，楼主要是能把图片和在一张里面，然后用CSS来控制就更好了。

什么意思啊？

css sprite

4 楼 codesoul 2009-07-13  

Snowpine 写道

确实不错，楼主要是能把图片和在一张里面，然后用CSS来控制就更好了。

什么意思啊？

3 楼 Snowpine 2009-07-10  

确实不错，楼主要是能把图片和在一张里面，然后用CSS来控制就更好了。

2 楼 Howareyou73 2009-07-09  

确实不错，

1 楼 viMory 2009-07-09  

感觉挺实用的！谢谢了