jquery插件理解看这

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery插件理解看这相关的知识，希望对你有一定的参考价值。

zepto 插件写法

一个更换背景颜色的小插件

html

1
 
<div id="box">content</div>

 

javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
 
 //改变元素背景颜色
 ;(function($){
	$.fn.vgoPlugin = function(option){
	  var opts = $.extend({}, $.fn.vgoPlugin.defaults  , option);
		this.css(‘backgroundColor‘,opts.color);
	};
	$.fn.vgoPlugin.defaults = {
		 color:‘#f60‘
	};
})(Zepto);

 //$("#box").vgoPlugin();
 //$("#box").vgoPlugin({color:‘#369‘});

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
 ;(function($){
    $.extend($.fn, {
    vgoPlugin1: function(option){
		var defaults = {
			color:‘red‘
		};
		var opts = $.extend({},defaults , option);//注意这里顺序option在前面
		this.css(‘background‘,opts.color);
		return this;
		}
    })
})(Zepto);
 //$("#box").vgoPlugin1();
 //$("#box").vgoPlugin1({color:‘#369‘});

以上是关于jquery插件理解看这的主要内容，如果未能解决你的问题，请参考以下文章

几个非常实用的JQuery代码片段

深入理解jQuery插件开发总结

Java技术jQuery自定义插件开发实践

写JQuery插件的基本知识

Jquery插件 easyUI属性汇总

Atom编辑器折腾记_(15)JS代码片段补全(插件:javascript-snippets)