`
dargoner
  • 浏览: 41911 次
社区版块
存档分类
最新评论

jquery漂亮的按扭控件(源代码共享)(转)

    博客分类:
  • Web
阅读更多

开发项目时,经常需要自已开发一些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);  
分享到:
评论

相关推荐

    jquery漂亮的按扭控件(源代码共享)

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

    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中,...

    web打印控件代码

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

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

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

    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.net日历控件

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

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

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

    js日历控件

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

    .net文件上传控件

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

    ASP.NET 开发基于网络的虚拟实验平台-VLP2P通信库的设计与实现(源代码+论文)

    8. **软件/插件开发**:ASP.NET开发中可能会涉及到各种插件或组件,如用于提升用户体验的JavaScript库(如jQuery)、用于数据验证的ASP.NET验证控件、用于数据持久化的ADO.NET等。 综上所述,这个项目涵盖了ASP.NET...

    jquery表格插件jqgrid

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

Global site tag (gtag.js) - Google Analytics