[转载]用jQuery 编写自定义插件
- JavaScript
- 2012-03-07
- 71热度
- 0评论
[转载]用jQuery 编写自定义插件 - 妙計出自山人 - 博客园.
一、基本的代码结构:
方法一:
[js]
//name : 插件名
(function(){
$.fn.name = function(options){
//自定义参数对象(插件自带) for example
var defaults = {
value1 : 'a',
value2 : 'b'
};
var opts = $.extend(defaults,options); //此处options为用户设置的参数对象(用户传参)
//实现插件的代码 bla bla bla
}
})(jQuery);
[/js]
方法二:
[js]
(function(){
$.fn.extend({
//name1,name2 对象名
name1 : function(){
//功能代码
},
name2 : function(){
//功能代码
},
//其他功能
});
})(jQuery);
[/js]
二、具体实例:
q: 加减法功能
方法一:
[js]
(function(){
$.fn.add = function(options){
var defaults = {a:0,b:0};
var opts = $.extend(defaults,options);
return opts.a + opts.b;
}
$.fn.dev = function(options){
var defaults = {a:0,b:0};
var opts = $.extend(defaults,options);
return opts.a - opts.b;
}
})(jQuery);
[/js]
方法二:
[js]
(function(){
$.fn.extend({
add : function(a,b){
var n = a + b;
return n;
},
dev : function(a,b){
var n = a - b;
return n;
}
});
})(jQuery);
[/js]
调用代码:
[js]
var n = $(this).add(3,2);
alert(n); //5
var m = $(this).dev(3,2);
alert(m);//1
[/js]