关于jQuery中自定义函数的操作
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类的实例可以使用这个“成员函数”。
第一种方式: 是对JQuery对象的扩展< 调用方式:$(this).ycDialog(opts) >
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); } });
第三种方式:仍然是对于方法的扩展 < 调用方式:$(this).ycDialog(opts) > 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); };