`
codesoul
  • 浏览: 7209 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

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

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

  • 大小: 107.2 KB
分享到：
| 使用Ext Form自动绑定Html中的Form元素
评论
99 楼 freeflyfree 2012-07-04  
bnt._click = eval(obj.attr("onclick"));

这句话会造成按钮的方法会自动运行，在ie9和ff下均是如此。
98 楼 naiyi 2010-07-06  
无数的托啊。。。。。。
97 楼 warrior701 2010-07-05  
挺好看的，谢谢。。。
96 楼 meiok 2010-06-28  
支持做下css sprite
95 楼 greatghoul 2010-05-27  
我喜欢这个效果，这么短就搞定了事情。
94 楼 cuixiping 2010-05-26  
楼主还是在帖子主题中贴一下效果图吧。
第二，建议楼主说一下这种实现方案的特点，尤其是有哪些局限性。
93 楼 xiaoleizi 2010-05-19  
效果不错，先存一下吧
92 楼 BestUpon 2010-05-07  
老兄！你是使用Css样式控制按钮的，现在有个问题，有一个表单验证框架是使用css样式来控制的，两者就有冲突了。请查看：http://code.google.com/p/rapid-validation/
我js和css都不会，能不能帮忙看一下这个问题怎么解决呢？我以前遇到过这个问题，觉得这个验证框架的提示功能很好用，前面就是css和css冲突的问题，今天正好看见老兄的帖子了，想必是高人，恳请帮忙！
91 楼 ahww520 2010-05-06  
楼主，这个按钮控件有点问题，当使用ajax一步调用，生成了一些按钮这些样式也就无法加载到新生成的按钮上了，比如
$.POST()的回调函数中$("#div").html("<input type='button'>"),这样生成的按钮没有任何样式，而且当一个文本控件与按钮同时在一行显示时，文本控件与按钮排列错位了，非常的难看
90 楼 ggbbyy6699 2010-04-26  
楼主能不说下$(this)中的this指代的是什么。。
89 楼 smallratluobin 2010-03-19  
早就在用了
88 楼 jimmeytang 2010-03-18  
<p>这是我看过的最好的一本Jquery的书籍了。下载：<a href="http://www.8211.cn/books/list/book_11673.html" target="_blank">锋利的jquery(高清析版）</a></p>
87 楼 varvery 2010-03-18  
如果能渲染select类的控件就爽了，哈哈，不过理论是有点不太可能了，貌似只能模拟。。。
86 楼 Jinghua 2010-03-16  
Snowpine 写道
确实不错，楼主要是能把图片和在一张里面，然后用CSS来控制就更好了。

希望越来越完美
85 楼 guoshuang 2010-03-14  
自定义属性 icon 不会通过 xhtml validate，应该放在 class 里

拿 "提交" "保存" 等文字也可以

$('button:contains("提交")')

而不用给 class
84 楼 zhoujianghai 2010-03-11  
点击提交之后，验证代码就不起作用了~怎么解决哦
83 楼 hyl_2008 2010-02-27  
在IE8下出现的问题
82 楼 hyl_2008 2010-02-26  
wnick 写道
<!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">





这样能解决字体显示问题，但不能显示图片。望高手解决啊！
button.html 更改如下表头
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

button.js 中如下z-btn-text ' 去掉空格 z-btn-text'
'<INPUT type="button" class="z-button z-btn-text ',icon,

81 楼 Java_Tony 2010-02-25  
wslfh2008 写道
很实用……

很好
现在自己正在做
80 楼 wslfh2008 2010-02-23  
很实用……
发表评论

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

相关推荐

    ASP.NET源代码共享

    在这个名为"ASP.NET源代码共享"的主题中，我们可以推测这是一个关于分享ASP.NET相关项目源代码的资源。尽管描述部分为空，但从标签"源码"和"工具"可以推断，这个压缩包可能包含了一个或多个实用的ASP.NET工具或示例...

    Jquery日历控件源码

    "Lee10DateTime-K1.0"这款控件具有无加密源码的特点，意味着开发者可以自由查看和修改源代码，以便更好地理解和定制功能。 该控件的核心功能包括： 1. **显示日历**：控件会根据指定的HTML元素生成一个日历界面，...

    Highcharts jQuery 图表控件

    在描述中提到的C#源代码，可能是基于Highcharts的.NET封装，方便.NET开发者更便捷地集成和使用Highcharts。 在实际应用中，Highcharts主要通过JavaScript API进行配置和操作。开发者可以通过设置各种选项来定制图表...

    一个漂亮的fileupload控件

    在这里，描述提到这个控件是网上找到的源代码，意味着它可能是一个开源或者共享的项目，开发者可以自由下载、使用甚至修改来适应自己的项目需求。 首先，我们来探讨一下FileUpload控件的基本功能。在传统的HTML中，...

    JAVA上百实例源码以及开源项目源代码

    日历表格面板 [ConfigLine.java] 控制条类 [RoundBox.java] 限定选择控件 [MonthMaker.java] 月份表算法类 [Pallet.java] 调色板，统一配色类 Java扫雷源码 Java生成自定义控件源代码 2个目标文件 Java实现HTTP连接...

    ASP.NET 开发局域网文件共享及检索系统的设计与开发(源代码+论文)

    在“ASP.NET 开发局域网文件共享及检索系统的设计与开发(源代码+论文)”这个项目中，我们可以看到开发者利用ASP.NET技术构建了一个针对局域网环境的文件共享和检索系统。下面将详细解释此系统的开发要点和涉及的关键...

    web打印控件代码

    在提供的文件"2006379481763"中，可能包含了实现上述功能的源代码、示例或者相关文档。通过研究这些文件，开发者可以学习如何在自己的项目中实现类似的Web打印功能。 总的来说，Web打印控件在电子商务、在线报表、...

    ASP基于WEB新闻发布系统(源代码+论文).rar

    源代码的提供对于初学者和开发者来说，是一个极好的学习资源，可以深入理解ASP.NET的编程模型和Web应用的开发流程。 该项目主要涉及以下几个核心知识点： 1. **ASP.NET Web Forms**：作为ASP.NET的基础，Web Forms...

    源代码-天气预报插件源码 v1.0.zip

    这意味着天气预报插件的源代码可能是用ASP语言编写的，这将涉及到ASP的基础语法、服务器控件、请求响应处理等相关知识。 【文件名称列表解析】 由于提供的文件名称列表只有一个数字串"132687961360656692"，这通常...

    ASP.net的Ajax控件代码演示

    - 对于跨域请求或安全考虑，需要理解并配置CORS（跨源资源共享）策略。 - 确保在不支持JavaScript的环境中，应用也能正常工作，提供良好的降级策略。 通过"AJAXEnabledWebSite1"项目的实践和学习，你将能掌握ASP...

    日历控件(浏览器兼容)

    同源策略是浏览器安全机制的一部分，阻止了不同源的页面之间共享数据，例如，当一个iframe尝试访问其父窗口的数据时，如果它们的源不相同，就会遇到限制。在IIS服务器上测试可能是为了模拟一个更严格的环境，确保...

    日历控件（签到、日程表）

    在压缩包的“1.1”文件中，可能包含了该日历控件的源代码、资源文件、文档说明或者示例项目。这些资源可以帮助开发者更深入地理解控件的工作原理，对其进行定制或整合到自己的项目中。源代码的结构和注释将有助于...

    省市区三级联动C#源代码(含全国各地市数据库)无刷新非ASMX服务

    标题中的“省市区三级联动C#源代码(含全国各地市数据库)无刷新非ASMX服务”指的是一个基于C#编程语言实现的Web应用程序，用于在网页上实现省、市、区三级联动的选择功能，且无需页面刷新。这个系统通常用在用户填写...

    ASP基于WEB的办公自动化管理系统(源代码+设计说明书).zip

    这个“ASP基于WEB的办公自动化管理系统”源代码和设计说明书的压缩包提供了一个实际应用实例，帮助我们了解如何利用ASP技术来实现企业或组织内部的办公自动化。 办公自动化管理系统（Office Automation System, OAS...

    asp.net日历控件

    一旦日历控件在工具箱中可用，我们就可以在设计视图中拖放到网页上，或者在源代码视图中通过以下方式手动添加： ```html &lt;asp:Calendar ID="Calendar1" runat="server"&gt;&lt;/asp:Calendar&gt; ``` 日历控件提供了一些...

    js日历控件

    8. **数据源集成**：与后台数据库或其他数据源（如Google日历、Outlook等）的集成，可以实现日程的同步和共享。 9. **性能优化**：优秀的日历控件会考虑性能优化，如延迟加载、缓存策略等，以减少页面加载时间和...

    .net文件上传控件

    7. **跨域上传**：如果需要在多个域之间进行文件上传，需要处理CORS（跨源资源共享）设置，确保服务器允许从其他域名发送上传请求。 总之，.NET文件上传控件是一个复杂但重要的功能，涉及到前端交互、后端处理、...

    jquery表格插件jqgrid

    3. **初始化jqGrid**：通过JavaScript调用`$("#tableId").jqGrid()`方法初始化表格，配置相关的参数，如列信息、数据源、操作按钮等。 4. **加载数据**：根据数据源类型，设置相应的URL或数据，jqGrid会自动处理...

Magicbox
Global site tag (gtag.js) - Google Analytics