关于jQuery中自定义函数的操作
2015-10-15 12:16
639 查看
jQuery.extend(object);$.extend(object); //是对jquery类的扩展 jQuery.fn.extend(object);$.fn.extend(object); //是对jQuery对象的扩展
jQuery.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效。
jQuery.fn = jQuery.prototype = {
init: function( selector, context ) {//....
//......
};
jQuery.fn.extend(object); 对jQuery.prototype进得扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。
[b]第一种方式: 是对JQuery对象的扩展< 调用方式:$(this).ycDialog(opts) >[/b] jQuery.fn.extend({ 'ycDialog':function(opts){ this._flag=false;//用于判断是否触发了确定按钮 var $dialog = $("<div class='yc_dialog'>"+ " <div class='yc_title'>"+ " <h3 class='yc_h3'>"+opts.title+"</h3>"+ " <a href='#' class='yc_close'>X</a>"+ " </div>"+ " <div class='yc_content'>"+ " <div class='yc_message'>"+ " <span class='yc_icon'></span>"+ " <span class='yc_con'>"+opts.content+"</span>"+ " <div class='yc_clear'></div>"+ " </div>"+ " <div class='yc_btn'>"+ " <input type='button' value='确定' class='yc_ok'/>"+ " </div>"+ " </div>"+ " </div>"); $("body").append($dialog).append("<div class='yc_yy'></div>"); if(opts.dialogWidth){ dealDialogWidth(opts.dialogWidth); }else{ dealDialogWidth(300); } if(opts.dialogHeight){ dealDialogHeight(opts.dialogHeight); }else{ dealDialogHeight(160); } if(opts.icon){ $(".yc_message .yc_icon").addClass("yc_"+opts.icon); if(opts.icon=="confirm"){ $(".yc_dialog .yc_close").show(); $(".yc_btn").append("<input type='button' value='取消' class='yc_no'/>"); } }else{ $(".yc_dialog .yc_close").hide(); $(".yc_message .yc_icon").addClass("yc_success"); } if(opts._CONFIRM) $dialog._CONFIRM=opts._CONFIRM; if(opts._URL) $dialog._URL =opts._URL; if(opts._ARRAY) $dialog._ARRAY = opts._ARRAY; yc_center($dialog); yc_initEvent($dialog); } });
第二种方式: 是对JQuery类的扩展< 调用方式:$.ycDialog(opts) >
jQuery.extend({ ycDialog:function(opts){ this._flag=false;//用于判断是否触发了确定按钮 var $dialog = $("<div class='yc_dialog'>"+ " <div class='yc_title'>"+ " <h3 class='yc_h3'>"+opts.title+"</h3>"+ " <a href='#' class='yc_close'>X</a>"+ " </div>"+ " <div class='yc_content'>"+ " <div class='yc_message'>"+ " <span class='yc_icon'></span>"+ " <span class='yc_con'>"+opts.content+"</span>"+ " <div class='yc_clear'></div>"+ " </div>"+ " <div class='yc_btn'>"+ " <input type='button' value='确定' class='yc_ok'/>"+ " </div>"+ " </div>"+ " </div>"); $("body").append($dialog).append("<div class='yc_yy'></div>"); if(opts.dialogWidth){ dealDialogWidth(opts.dialogWidth); }else{ dealDialogWidth(300); } if(opts.dialogHeight){ dealDialogHeight(opts.dialogHeight); }else{ dealDialogHeight(160); } if(opts.icon){ $(".yc_message .yc_icon").addClass("yc_"+opts.icon); if(opts.icon=="confirm"){ $(".yc_dialog .yc_close").show(); $(".yc_btn").append("<input type='button' value='取消' class='yc_no'/>"); } }else{ $(".yc_dialog .yc_close").hide(); $(".yc_message .yc_icon").addClass("yc_success"); } if(opts._CONFIRM) $dialog._CONFIRM=opts._CONFIRM; if(opts._URL) $dialog._URL =opts._URL; if(opts._ARRAY) $dialog._ARRAY = opts._ARRAY; yc_center($dialog); yc_initEvent($dialog); } }); [b]第三种方式:仍然是对于方法的扩展 < 调用方式:$(this).ycDialog(opts) >[/b] jQuery.fn.ycDialog=function(opts){ this._flag=false;//用于判断是否触发了确定按钮 var $dialog = $("<div class='yc_dialog'>"+ " <div class='yc_title'>"+ " <h3 class='yc_h3'>"+opts.title+"</h3>"+ " <a href='#' class='yc_close'>X</a>"+ " </div>"+ " <div class='yc_content'>"+ " <div class='yc_message'>"+ " <span class='yc_icon'></span>"+ " <span class='yc_con'>"+opts.content+"</span>"+ " <div class='yc_clear'></div>"+ " </div>"+ " <div class='yc_btn'>"+ " <input type='button' value='确定' class='yc_ok'/>"+ " </div>"+ " </div>"+ " </div>"); $("body").append($dialog).append("<div class='yc_yy'></div>"); if(opts.dialogWidth){ dealDialogWidth(opts.dialogWidth); }else{ dealDialogWidth(300); } if(opts.dialogHeight){ dealDialogHeight(opts.dialogHeight); }else{ dealDialogHeight(160); } if(opts.icon){ $(".yc_message .yc_icon").addClass("yc_"+opts.icon); if(opts.icon=="confirm"){ $(".yc_dialog .yc_close").show(); $(".yc_btn").append("<input type='button' value='取消' class='yc_no'/>"); } }else{ $(".yc_dialog .yc_close").hide(); $(".yc_message .yc_icon").addClass("yc_success"); } if(opts._CONFIRM) $dialog._CONFIRM=opts._CONFIRM; if(opts._URL) $dialog._URL =opts._URL; if(opts._ARRAY) $dialog._ARRAY = opts._ARRAY; yc_center($dialog); yc_initEvent($dialog); };
相关文章推荐
- jquery uploadify上传文件动态传参
- jquery的$.extend和$.fn.extend作用及区别
- xpages domino动态编辑树
- 101 jquery 子类选择器
- jquery实现简单实用的弹出层效果代码
- PHP+Mysql+jQuery实现发布微博程序 php篇
- jquery替换URL参数值
- jQuery实现仿QQ在线客服效果的滚动层代码
- JQuery中2个等号与3个等号的区别
- jquery 层级选择器
- jQuery $.each用法
- [测试文章]简单实用的鼠标滑过图片遮罩层动画jQuery插件
- jquery 获取url中参数的值
- jquery中innerWidth(),outerWidth(),outerWidth(true)和width()的区别
- jquery查看当前平台
- php和jquery中把时间转换为多少小时前,多少分钟前,多少秒前
- Jquery Mobile UI之列表的学习
- jQuery Validate自定义校验
- js jquery版本号 金额千分之一转换功能(非规范,高效率)
- ajax的status为201依然触发jquery的error事件的问题