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

codesoul

浏览: 7214 次
性别:
来自: 厦门

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (3)

社区版块

存档分类

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

jQuery CSS IE EXT JSP

开发项目时，经常需要自已开发一些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]

button.rar (72.1 KB)
下载次数: 10577

button.rar (74.5 KB)
下载次数: 7551

查看图片附件

分享到：

J2EE企业框架宏观讲述 | 使用Ext Form自动绑定Html中的Form元素

2009-07-09 09:29
浏览 3646
评论(99)
论坛回复 / 浏览 (87 / 92582)
查看更多

59 楼 abruzzi 2009-09-17

确实很好看，也很实用，谢谢分享！图标也做得很精致，可以免费使用吧？呵呵。

58 楼 xiaomimishiye 2009-09-01

确实挺漂亮啊

57 楼 JohnxyZheng 2009-08-11

不错，不过存在一点瑕疵：采用XHTML1.0验证方案下，在IE上的样式不能正常显示。

56 楼 ECyzl2007 2009-08-06

受用了，谢谢

55 楼 wnick 2009-08-05

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

修改一下头文件有意想不到的收获 ->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

54 楼 st52 2009-07-27

楼主写的这个非常实用,效果不错

53 楼 cjx186 2009-07-25

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
用xhtml标准时好像显示按钮有问题。。鸡蛋中的骨头。嘿嘿。

52 楼 luojiy 2009-07-25

不想所有的Input都变成有图标的按钮啊。

51 楼 chris_in 2009-07-24

感谢lz，这个按钮很好用，但有个问题

button怎么比input高出了几个像素呢？还望lz解答一下。

50 楼 huchao819 2009-07-23

这个东西好好

49 楼 ▄︻┳═一 2009-07-22

不错，打算用一下

48 楼 TheMatrix 2009-07-21

不错，决定收藏了。。。thanks

47 楼 codesoul 2009-07-20

<div class="quote_title">bookcaicai 写道</div>
<div class="quote_div">
<p>我用Firefox写了个<form action="url"></form></p>
<p>在form里加入楼主给的代码，会出现:只要是按钮，就会向url发送form里有name属性的value.</p>
<p>代码如下：</p>
<pre name="code" class="java"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>dayoDcc index</title>
<link rel="stylesheet" type="text/css" href="css/screen.css" />
<script type="text/javascript" src="js/jquery-1.3.min.js"></script>
<script type="text/javascript" src="js/button.js"></script>

</head>
<body>
<div align="center">
<div>
<center>
<h2>Dcc Auto Send System</h2>
</center>
</div>

<form >
<table align="center" cellSpacing=0 cellPadding=0 width="90px">
<thead>
</thead>
<tbody id="tbody" align="center">
<tr>
<td>Svn Url:</td>
<td><input id="svnurl" name="svnurl" /></td>
</tr>
<tr id="changeTr">
<td>custem:</td>
<td><select id="custem">
<option id="please">--请选择--</option>
</select></td>
</tr>

<tr id="showcustemTr">
<td>联系人：</td>
<td id="showcustem"></td>
</tr>
<tr id="showCustemEamil">
<td>your chance:</td>
<td><textarea cols="19" rows="4" name="message"></textarea></td>
</tr>
<tr>
<td>give message:</td>
<td><textarea id="content" name="content" cols="19" rows="3"></textarea></td>
</tr>
<tr>
<td><i>FTP信息：</i></td>
<td><input id="ftp" /></td>
</tr>

<tr><td colspan="2"><input type="button" value="send" id="send" icon="icon-save"/> <input
type="reset" id="reset" value="reset" id="reset" icon="icon-reset"/></td><td></td>
</tr>
</tbody>
</table>
</form>

<div align="center"></div>
<h3 id="showsend"></h3>

</div>
</body>
</html></pre>
<p> ！注：两个.css在css/screen.css里import了</p>
<p>点击后url:http://127.0.0.1:8080/dayoDcc/?svnurl=&message=&content=</p>
<p> </p>
<p>在IE里不会出现这个问题。 </p>
<p>不知道怎么解决，忘楼主给改改<img src="/images/smiles/icon_smile.gif" alt=""></p>
</div>
<p><br>这是因为Firefox下 <button>标签会自动提交，可以在button的onclick中return false;或者下载我刚提交的新版button</p>

46 楼 tntxia 2009-07-19

相当的不错，风格很像EXT

45 楼 jamix 2009-07-19

不错...很好用...移上去的时候好像会短了啊...
换成这样就好了..
.z-btn-over .z-btn-right{background:url(images/button/btnover_bg_right.gif) no-repeat -7px 0;}

44 楼 bookcaicai 2009-07-17

<p>我用Firefox写了个<form action="url"></form></p>
<p>在form里加入楼主给的代码，会出现:只要是按钮，就会向url发送form里有name属性的value.</p>
<p>代码如下：</p>
<pre name="code" class="java"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>dayoDcc index</title>
<link rel="stylesheet" type="text/css" href="css/screen.css" />
<script type="text/javascript" src="js/jquery-1.3.min.js"></script>
<script type="text/javascript" src="js/button.js"></script>

</head>
<body>
<div align="center">
<div>
<center>
<h2>Dcc Auto Send System</h2>
</center>
</div>

<form >
<table align="center" cellSpacing=0 cellPadding=0 width="90px">
<thead>
</thead>
<tbody id="tbody" align="center">
<tr>
<td>Svn Url:</td>
<td><input id="svnurl" name="svnurl" /></td>
</tr>
<tr id="changeTr">
<td>custem:</td>
<td><select id="custem">
<option id="please">--请选择--</option>
</select></td>
</tr>

<tr id="showcustemTr">
<td>联系人：</td>
<td id="showcustem"></td>
</tr>
<tr id="showCustemEamil">
<td>your chance:</td>
<td><textarea cols="19" rows="4" name="message"></textarea></td>
</tr>
<tr>
<td>give message:</td>
<td><textarea id="content" name="content" cols="19" rows="3"></textarea></td>
</tr>
<tr>
<td><i>FTP信息：</i></td>
<td><input id="ftp" /></td>
</tr>

<tr><td colspan="2"><input type="button" value="send" id="send" icon="icon-save"/> <input
type="reset" id="reset" value="reset" id="reset" icon="icon-reset"/></td><td></td>
</tr>
</tbody>
</table>
</form>

<div align="center"></div>
<h3 id="showsend"></h3>

</div>
</body>
</html></pre>
<p> ！注：两个.css在css/screen.css里import了</p>
<p>点击后url:http://127.0.0.1:8080/dayoDcc/?svnurl=&message=&content=</p>
<p> </p>
<p>在IE里不会出现这个问题。 </p>
<p>不知道怎么解决，忘楼主给改改<img src="/images/smiles/icon_smile.gif" alt=""></p>

43 楼 nbkangta 2009-07-17

在标签里面加上了自定义属性，这个做法似乎不是很合适啊

42 楼 codesoul 2009-07-17

windedge 写道

貌似是同事
接头暗号: my? 我是dg的
你的validate也很好, 有空也共享一下

同事，你是东莞的？
有空再来整理些控件了。

41 楼 codesoul 2009-07-17

<div class="quote_title">zhongxuchen 写道</div>
<div class="quote_div">
<p>楼主，用了你的组件，但问题挺大的，样式严重冲突，你的 <br>var bntStr=[ <br>'<table id="',id,'" class="z-btn" cellSpacing=0 cellPadding=0 border=0><tbody><tr>', <br>'<TD class=z-btn-left><i>&nbsp;</i></TD>', <br>'<TD class=z-btn-center><EM unselectable="on">', <br>'<BUTTON class="z-btn-text ',icon,'" >',$(this).attr('value'),'</BUTTON>', <br>'</EM></TD>', <br>'<TD class=z-btn-right><i>&nbsp;</i></TD>', <br>'</tr></tbody></table>' <br>];</p>
<p>这段代码写法有点不合理，按钮放到table中，如果table有样式的话，你这个button会严重走形，</p>
<p> </p>
<p>我的样式是这样的，如下：</p>
<p>#sag_listtable {<br> font-size: 9pt;<br> border-collapse: collapse;<br> width: 100%;<br> border: 1px solid #A0B7C5;<br> text-align: center;<br>}</p>
<p>#sag_listtable td {<br> font-size: 9pt;<br> padding-top: 2px;<br> padding-bottom: 0px;<br> <span style="color: #888888;">border: 1px solid #A0B7C5; 这一句去掉你的样式就正确了</span><br> padding-left: 8px;<br> padding-right: 8px;<br>}</p>
<p> </p>
<p>楼主能不能改进一下，我们项目已经用了你的button了，十分感谢能改进一下</p>
<p> </p>
</div>
<p><br>添加样式: .z-btn td{border:0 none;margin:0px;padding:0px;}</p>
<p>将你的样式用成class方法，不要用id方法，CSS重复定义时：Style ＞ ID ＞ Class ＞缺省的Html元素，并且你的样式要写在button之前，如下：</p>
<p> </p>
<p>.sag_listtable {<br> font-size: 9pt;<br> border-collapse: collapse;<br> width: 100%;<br> border: 1px solid #A0B7C5;<br> text-align: center;<br>}</p>
<p>.sag_listtable td {<br> font-size: 9pt;<br> padding-top: 2px;<br> padding-bottom: 0px;<br> <span style="color: #888888;">border: 1px solid #A0B7C5; 这一句去掉你的样式就正确了</span><br> padding-left: 8px;<br> padding-right: 8px;<br>}</p>
<p>.z-btn td{border:0 none;margin:0px;padding:0px;}</p>
<p> </p>
<p>具体实际情况就根据CSS重复定义优先级：Style ＞ ID ＞ Class ＞缺省的Html元素，来处理。</p>

40 楼 zhongxuchen 2009-07-16

<p>楼主，用了你的组件，但问题挺大的，样式严重冲突，你的 <br>var bntStr=[ <br>'<table id="',id,'" class="z-btn" cellSpacing=0 cellPadding=0 border=0><tbody><tr>', <br>'<TD class=z-btn-left><i>&nbsp;</i></TD>', <br>'<TD class=z-btn-center><EM unselectable="on">', <br>'<BUTTON class="z-btn-text ',icon,'" >',$(this).attr('value'),'</BUTTON>', <br>'</EM></TD>', <br>'<TD class=z-btn-right><i>&nbsp;</i></TD>', <br>'</tr></tbody></table>' <br>];</p>
<p>这段代码写法有点不合理，按钮放到table中，如果table有样式的话，你这个button会严重走形，</p>
<p> </p>
<p>我的样式是这样的，如下：</p>
<p>#sag_listtable {<br> font-size: 9pt;<br> border-collapse: collapse;<br> width: 100%;<br> border: 1px solid #A0B7C5;<br> text-align: center;<br>}</p>
<p>#sag_listtable td {<br> font-size: 9pt;<br> padding-top: 2px;<br> padding-bottom: 0px;<br> <span style="color: #888888;">border: 1px solid #A0B7C5; 这一句去掉你的样式就正确了</span><br> padding-left: 8px;<br> padding-right: 8px;<br>}</p>
<p> </p>
<p>楼主能不能改进一下，我们项目已经用了你的button了，十分感谢能改进一下</p>
<p> </p>

« 上一页 1 2 3 4 5 下一页 »

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客更多访客>>