开发项目时,经常需要自已开发一些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> </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> </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);
分享到:
相关推荐
开发项目时,经常需要自已开发一些UI组件,在这里共享一个刚开发的Button控件,这个Button使用很简单,只要加入相关的CSS和JS文件,这样页面中的所有input按扭都将会被自动渲染为漂亮的个性化按扭,不需要写一句代码...
在这个名为"ASP.NET源代码共享"的主题中,我们可以推测这是一个关于分享ASP.NET相关项目源代码的资源。尽管描述部分为空,但从标签"源码"和"工具"可以推断,这个压缩包可能包含了一个或多个实用的ASP.NET工具或示例...
"Lee10DateTime-K1.0"这款控件具有无加密源码的特点,意味着开发者可以自由查看和修改源代码,以便更好地理解和定制功能。 该控件的核心功能包括: 1. **显示日历**:控件会根据指定的HTML元素生成一个日历界面,...
在描述中提到的C#源代码,可能是基于Highcharts的.NET封装,方便.NET开发者更便捷地集成和使用Highcharts。 在实际应用中,Highcharts主要通过JavaScript API进行配置和操作。开发者可以通过设置各种选项来定制图表...
在这里,描述提到这个控件是网上找到的源代码,意味着它可能是一个开源或者共享的项目,开发者可以自由下载、使用甚至修改来适应自己的项目需求。 首先,我们来探讨一下FileUpload控件的基本功能。在传统的HTML中,...
在提供的文件"2006379481763"中,可能包含了实现上述功能的源代码、示例或者相关文档。通过研究这些文件,开发者可以学习如何在自己的项目中实现类似的Web打印功能。 总的来说,Web打印控件在电子商务、在线报表、...
在“ASP.NET 开发局域网文件共享及检索系统的设计与开发(源代码+论文)”这个项目中,我们可以看到开发者利用ASP.NET技术构建了一个针对局域网环境的文件共享和检索系统。下面将详细解释此系统的开发要点和涉及的关键...
源代码的提供对于初学者和开发者来说,是一个极好的学习资源,可以深入理解ASP.NET的编程模型和Web应用的开发流程。 该项目主要涉及以下几个核心知识点: 1. **ASP.NET Web Forms**:作为ASP.NET的基础,Web Forms...
这意味着天气预报插件的源代码可能是用ASP语言编写的,这将涉及到ASP的基础语法、服务器控件、请求响应处理等相关知识。 【文件名称列表解析】 由于提供的文件名称列表只有一个数字串"132687961360656692",这通常...
- 对于跨域请求或安全考虑,需要理解并配置CORS(跨源资源共享)策略。 - 确保在不支持JavaScript的环境中,应用也能正常工作,提供良好的降级策略。 通过"AJAXEnabledWebSite1"项目的实践和学习,你将能掌握ASP...
同源策略是浏览器安全机制的一部分,阻止了不同源的页面之间共享数据,例如,当一个iframe尝试访问其父窗口的数据时,如果它们的源不相同,就会遇到限制。在IIS服务器上测试可能是为了模拟一个更严格的环境,确保...
在压缩包的“1.1”文件中,可能包含了该日历控件的源代码、资源文件、文档说明或者示例项目。这些资源可以帮助开发者更深入地理解控件的工作原理,对其进行定制或整合到自己的项目中。源代码的结构和注释将有助于...
标题中的“省市区三级联动C#源代码(含全国各地市数据库)无刷新非ASMX服务”指的是一个基于C#编程语言实现的Web应用程序,用于在网页上实现省、市、区三级联动的选择功能,且无需页面刷新。这个系统通常用在用户填写...
一旦日历控件在工具箱中可用,我们就可以在设计视图中拖放到网页上,或者在源代码视图中通过以下方式手动添加: ```html <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar> ``` 日历控件提供了一些...
这个“ASP基于WEB的办公自动化管理系统”源代码和设计说明书的压缩包提供了一个实际应用实例,帮助我们了解如何利用ASP技术来实现企业或组织内部的办公自动化。 办公自动化管理系统(Office Automation System, OAS...
8. **数据源集成**:与后台数据库或其他数据源(如Google日历、Outlook等)的集成,可以实现日程的同步和共享。 9. **性能优化**:优秀的日历控件会考虑性能优化,如延迟加载、缓存策略等,以减少页面加载时间和...
7. **跨域上传**:如果需要在多个域之间进行文件上传,需要处理CORS(跨源资源共享)设置,确保服务器允许从其他域名发送上传请求。 总之,.NET文件上传控件是一个复杂但重要的功能,涉及到前端交互、后端处理、...
8. **软件/插件开发**:ASP.NET开发中可能会涉及到各种插件或组件,如用于提升用户体验的JavaScript库(如jQuery)、用于数据验证的ASP.NET验证控件、用于数据持久化的ADO.NET等。 综上所述,这个项目涵盖了ASP.NET...
3. **初始化jqGrid**:通过JavaScript调用`$("#tableId").jqGrid()`方法初始化表格,配置相关的参数,如列信息、数据源、操作按钮等。 4. **加载数据**:根据数据源类型,设置相应的URL或数据,jqGrid会自动处理...