您的位置:首页 > Web前端 > JQuery

关于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);
};
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: