文章目录
  1. 1. 对象级插件开发
  2. 2. 运用上面的步骤来编写一个返回顶部的这么一个插件

前面那一篇我们说了类级开发,那么我们今天来说下对象级开发

对象级插件开发

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
;(function($){
$.fn.xxxx=function(opt){ //opt可以接受对象,函数,字符串等参数,用于更新下面的opt属性值和参数值
var default={
//里面是各类参数,和属性值
}
var option=$.extend(default,opt); //这个方法是扩展的意思
this.each(function(){ //这句话也可以不用写,看个人情况
//用于写功能的代码
});
return this; //可以进行链式编程
}
})(jQuery);
//以上是一个对象级开发的怎么一个步骤

运用上面的步骤来编写一个返回顶部的这么一个插件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
if(window.jQuery===undefined){
throw new Error("此插件依赖于jQuery,请引入jQuery库");
}
;(function($){
$.fn.blacktop=function(opt){
var defaults={ //用于写插件的配置参数
spend:600,
position:'true',
right:30,
bottom:30,
autohide:'true',
offset:$(window).height()
};
var option=$.extend(defaults,opt);
//this.each(function(){
//var _this=$(this); //如果用this.each()的话此时this要写成$(this)
var _this=this;
var win = $(window);
if(option.autohide){
_this.css({
'display':'none',
'cursor':'pointer'
});
}
if(option.position){
_this.css({
'position': 'fixed',
'right': option.right+'px',
'bottom': option.bottom+'px',
});
}
_this.click(function(){
$('html, body').animate({scrollTop: 0}, option.spend);
});
win.scroll(function(){
var scrolling = win.scrollTop();
if(option.autohide){
if(scrolling > option.offset){
_this.fadeIn(option.spend);
}
else _this.fadeOut(option.spend);
}
});
//});
return this;
};
//调用: $('xxx').blacktop({可以传你想要更改的参数}).css('background','red');

希望通过上面的代码,对你们有所帮助

文章目录
  1. 1. 对象级插件开发
  2. 2. 运用上面的步骤来编写一个返回顶部的这么一个插件