用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










posted @ 2012-03-06 16:55  妙計出自山人  阅读(6459)  评论(0编辑  收藏  举报