dialog jquery的插件 jquery插件开发方法

转载

mob6454cc636c54 2023-07-10 23:59:28

文章标签 dialog jquery的插件 jQuery 插件开发 jquery 文章分类 jQuery 前端开发

在jQuery中，工厂函数($) 是整个jQuery库的核心，所有其他API都通过工厂函数进行调用，因此jQuery的插件以工厂函数为核心，对其进行拓展，可以将工厂函数当做一个JavaScript对象，通过对工厂函数进行扩充就可以创建自己的jQuery插件。

jQuery插件的开发方法分为两种

对象级别的插件开发

这类插件是指在jQuery的选择器对象上添加对象方法，只有存在一个jQuery对象的实例时，才能调用该插件。

类级别的插件开发

这类插件是指在类级别添加静态方法，并且将函数置于jQuery的命名空间中，比如经典的 $dialog jquery的插件 jquery插件开发方法_dialog jquery的插件$ .trim()等就属于类级别的插件。

jQuery插件开发的注意事项：

插件文件的命名必须要遵循 jquery.插件名.js 的规则。
对象级别的插件，所有的方法都应依附于 jquery.fn 对象；而类级别的插件所有的方法都应该依附于jQuery工厂对象。
无论哪种级别的插件，结尾必须以分号结束，否则文件被压缩时会出现错误提示。
要理解插件内部的this作用域。
插件必须返回一个jQuery对象，以支持jQuery的链式操作语法。
插件编写时尽量避免$美元符号的工厂方法，应尽量使用jQuery字符串以避免与其他代码产生冲突。

在开始进行插件开发之前，要了解对象级别的插件使用jQuery.fn.extend方法进行扩展，类级别的插件使用jQuery.extend方法进行扩展

开始撸代码

一.开发对象级别插件

创建一个名为jquery.border.js的文件，这个border插件可以为选中的元素添加边框。

首先编写插件的框架代码：

;(function($){
	$.fn.extend({
		"border":function(value){
			//这里写插件代码
		}
	});
})(jQuery)

这里定义了一个匿名函数，并使之立即执行，这样可以使js文件在加载时就附在jQuery对象上；
在匿名函数前面放了一个分号，是出于兼容性的考虑，一般建议在创建自己的插件的时候在函数面前也放一个分号；
$.fn.extend内部的json代码中添加了一个名为border的方法，这个方法在运行时会被合并到jQuery库中（定义方法名时不能与现有的jQuery对象方法同名，否则会覆盖现有的方法）

为border插件添加代码，实现插件功能，同时也支持链式语法，即插件要返回自身，代码如下：

;(function($){
	$.fn.extend({
		"border":function(options){
			//设置属性
			options=$.extend({
				width:"1px",
				line:"solid",
				color:"#090"
			},options);
			//设置样式
			this.css("border",options.width+' '+options.line+' '+options.color);
			//返回对象，以便支持链式语法
			return this;
		}
	});
})(jQuery)

border方法接收一个options参数，在函数体内命名用$.extend对传入的options与现有默认属性进行了合并，这允许用户用如下语法来设置border：

$("#test").border({width:"2px",line:"dotted",color:"blue"});

代码结尾使用了return this语句，用来返回当前jQuery选择器中的对象列表，以便支持链式操作，比如支持以下操作：

$("#test").border().css("corlor":"#0C0");

二.开发类级别插件

类级别的插件实际上是在jQuery命名空间内部添加函数，一般主要用于功能性函数，而非UI级别的函数，比如 $.trim() 或者是 $.ajax都属于功能性函数，它们是jQuery类本身的扩充，类似于在jQuery函数中添加全局函数，因此也称为全局函数插件。

创建全局函数使用 $.extend()，其代码结构如下：

;(function($){
	$.extend({
		"modalwindow":function(value){
			//这里写插件代码
		}
	});
})(jQuery)

在调用时只需要直接使用 $.modalwindow 这样的语句就可以调用，他不需要先具有jQuery选择器的实例。

创建一个名为 jquery.modalwindow.js 的文件，然后添加类级别的插件代码：

;(function($){
	$.extend({
		"modalwindow":function(options){
			//设置属性
			options=$.extend({
				url:"https://cn.bing.com/",
				vArguments:"null",
				dialogHeight:"200px",
				dialogWidth:"500px",
				dialogLeft:"100px",
				dialogTop:"50px",
				status:"no",
				help:"no",
				resizable:"no",
				scroll:"no"
			},options);
			//弹出窗口
			var retVal = window.showModalDialog(options.url,options.vArguments,
						"dialogHeight:"+options.dialogHeight+";dialogWidth:"+options.dialogWidth+
						";dialogLeft:"+options.dialogLeft+";dialogTop:"+options.dialogTop+
						";status:"+options.status+";help:"+options.help+";resizable:"+options.resizable+
						";scroll:"+options.scroll+";");
			//返回弹出式窗口
			return retVal;
		}
	});
})(jQuery)