用jQuery 编写自定义插件
一、基本的代码结构:
方法一:
1 //name : 插件名
2 (function(){
3 $.fn.name = function(options){
4 //自定义参数对象(插件自带) for example
5 var defaults = {
6 value1 : 'a',
7 value2 : 'b'
8 };
9 var opts = $.extend(defaults,options); //此处options为用户设置的参数对象(用户传参)
10 //实现插件的代码 bla bla bla
11 }
12 })(jQuery);
方法二:
1 (function(){
2 $.fn.extend({
3 //name1,name2 对象名
4 name1 : function(){
5 //功能代码
6 },
7 name2 : function(){
8 //功能代码
9 },
10 //其他功能
11 });
12 })(jQuery);
二、具体实例:
q: 加减法功能
方法一:
1 (function(){
2 $.fn.add = function(options){
3 var defaults = {a:0,b:0};
4 var opts = $.extend(defaults,options);
5 return opts.a + opts.b;
6 }
7 $.fn.dev = function(options){
8 var defaults = {a:0,b:0};
9 var opts = $.extend(defaults,options);
10 return opts.a - opts.b;
11 }
12 })(jQuery);
方法二:
1 (function(){
2 $.fn.extend({
3 add : function(a,b){
4 var n = a + b;
5 return n;
6 },
7 dev : function(a,b){
8 var n = a - b;
9 return n;
10 }
11 });
12 })(jQuery);
调用代码:
1 var n = $(this).add(3,2);
2 alert(n); //5
3 var m = $(this).dev(3,2);
4 alert(m);//1