jQuery插件开发2

文章目录

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

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

对象级插件开发

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

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

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');

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