带参数的jQuery插件的开发方法

 
更多

带参数的jQuery插件的开发方法。

1.在jQuery命名空间内声明一个特定的命名。

$.fn.myStyleOne = function() {
    //在这里输入你的插件执行代码
};

我们可以这样调用:

$('#myDiv').myStyleOne();

2.接收参数来控制插件的行为;

来为我们的myStyleOne插件添加指定前景和背景色的功能,我们需要在函数中允许一个object类型的选项设置。如下所展示的那样:

$.fn.myStyleOne = function(options) {
	var defaults = {        
		foreground: 'red',        
		background: 'yellow'        
	};        
	var opts = $.extend(defaults, options);                 
}; 

现在,我们的插件可以这样来调用:

$('#myDiv').myStyleOne({       
	foreground:'blue'       
});

3.提供公有方法访问插件的配置项值;

上面的代码我们可以做一下改进,使得插件的默认值可以在插件之外被设置。这无疑是十分重要的,因为它使得插件用户可以使用最少的代码来修改插件配置,这其实是我们利用函数对象的开始。

$.fn.myStyleOne = function(options) {        
	var opts = $.extend({}, $.fn.myStyleOne.defaults, options);        
};                 
$.fn.myStyleOne.defaults = {        
	foreground: 'red',        
	background: 'yellow'        
};
打赏

本文固定链接: https://www.cxy163.net/archives/3506 | 绝缘体

该日志由 绝缘体.. 于 2017年02月28日 发表在 未分类 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: 带参数的jQuery插件的开发方法 | 绝缘体

带参数的jQuery插件的开发方法:等您坐沙发呢!

发表评论


快捷键:Ctrl+Enter