`
codesoul
  • 浏览: 7215 次
  • 性别: 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元素
评论
39 楼 huntman 2009-07-16  
感谢LZ~！学习下！
38 楼 windedge 2009-07-15  
貌似是同事
接头暗号: my? 我是dg的
你的validate也很好, 有空也共享一下
37 楼 xieye 2009-07-15  
请楼主释出prototype版。
36 楼 hydrogen2008 2009-07-15  
很不错，收藏了。
35 楼 isflyer 2009-07-14  
有没有不去掉
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
的解决办法？
34 楼 isflyer 2009-07-14  
这种格式是netbeans默认生成的jsp

<%--
    Document   : newjsp
    Created on : 2009-7-14, 19:18:05
    Author     : chengzhisw
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <body>
        <h1>Hello World!</h1>
    </body>
</html>
33 楼 isflyer 2009-07-14  
codesoul 写道
isflyer 写道
我这里jsp下不能并排，
<input type="button" href="../home.jsp?style=sell" value="退出"/>&nbsp;
        <input type="button" href="../home.jsp?style=sell" value="退出"/>

应该横排，却是竖排


在IE6,IE7,火狐下测试过，都能正常显示。

我测试的是chrome，这个不行

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script language="javascript" src="script/jquery-1.3.2.min.js"></script>
        <link rel="STYLESHEET" type="text/css" href="style/button.css">
        <link rel="STYLESHEET" type="text/css" href="style/icon.css">
        <script language="javascript" src="script/button.js"></script>

    </head>
    <body>
        <h1>Hello World!</h1>
        <input type="button"  value="退出"/>
        <input type="button"  value="退出"/>
    </body>
</html>
又试了下，上面的会出现不能横排

把
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

去掉就正常了，不明白这个是为什么
32 楼 xzj127 2009-07-14  
效果 非常不错。。。
31 楼 codesoul 2009-07-14  
isflyer 写道
我这里jsp下不能并排，
<input type="button" href="../home.jsp?style=sell" value="退出"/>&nbsp;
        <input type="button" href="../home.jsp?style=sell" value="退出"/>

应该横排，却是竖排


在IE6,IE7,火狐下测试过，都能正常显示。
30 楼 codesoul 2009-07-14  
chhj_292 写道
这么简单的代码为什么要用jquery呢？
稍微改了一下，执行速度比楼主的稍快！

杀鸡焉用牛刀？？？？？？[size=xx-large][/size]



因为项目中的所有JS代码及开发的组件都使用jquery了，统一风格吧，也就没必要再自己去写些额外JS代码。
29 楼 z2563256 2009-07-14  
很不错啊   比较实用
28 楼 codesoul 2009-07-14  
cdaytek 写道
想请教下LZ 是这样的 我们这个项目里 $ 已经被用成是 document.getelementbyid 我是否需要把你的js里的 $ 用别的代替呢？

不需要的，js中用了;(function($){})(jQuery);将jQuery封闭起来了。
27 楼 codesoul 2009-07-14  
cdaytek 写道
想请教下LZ 是这样的 我们这个项目里 $ 已经被用成是 document.getelementbyid 我是否需要把你的js里的 $ 用别的代替呢？


不需要的，js中用了;(function($){})(jQuery);将jQuery封闭起来了。
26 楼 codesoul 2009-07-14  
cdaytek 写道
想请教下LZ 是这样的 我们这个项目里 $ 已经被用成是 document.getelementbyid 我是否需要把你的js里的 $ 用别的代替呢？


不需要的，js中用了;(function($){})(jQuery);将jQuery封闭起来了。
25 楼 pokerwen 2009-07-14  
很不错。有空还是要看看其中的原理啊。学习一个
24 楼 chhj_292 2009-07-14  
这么简单的代码为什么要用jquery呢？
稍微改了一下，执行速度比楼主的稍快！

杀鸡焉用牛刀？？？？？？[size=xx-large][/size]

23 楼 風一樣的男子 2009-07-14  
IE 6 无效？
22 楼 cdaytek 2009-07-14  
没事了 搞定了 感谢LZ提供 挺不错的
21 楼 moyue 2009-07-14  
很实用，不用从ext中剥离了
20 楼 peirenlei 2009-07-14  
很漂亮，不错啊~~~~~~·
发表评论

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

相关推荐

    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