明河的shareList jQuery插件分析

 

突然间 想学习下javascript  
无奈很多代码看不懂  只能对着代码一句一句的调试 


(function($){
	$.fn.shareList = function(options){
		//alert(options);
		var opts;
		var DATA_NAME = "shareList";
		//返回API
		if(typeof options == 'string'){
			 if(options == 'api'){
			 	return $(this).data(DATA_NAME).interfaces[$(this).data(DATA_NAME).current];
			 }else if(options == 'interfaces'){
			 	return $(this).data(DATA_NAME).interfaces;
			 }
		}
		else{
			var options = options || {};
			//覆盖参数
			opts = $.extend(true,{},$.fn.shareList.defaults,options);
			if(options.shareSites)  opts.shareSites = options.shareSites;
		}
		
		return this.each(function(){
			//调用方法
			if(typeof options == 'string'){
				
			}
			//创建
			else{
				
				/* test opts of value */
				for( var i in opts)
				{
				   ADS.log.write(i);
				}
				
				var _shareList = new yijs.ShareList(opts);
				_shareList.$applyTo = $(this);
				//alert(_shareList.$applyTo.constructor);
				//alert(_shareList.$applyTo instanceof jQuery);
				_shareList.render();
				$(this).data(DATA_NAME,_shareList);
			}
		})
	}
	var yijs = yijs || {};
	yijs.ShareList = function(options){
		this.options = $.extend($.fn.shareList.defaults,options);
		this.effect = this.options.effect;
		//组件所起作用的对象
		this.$applyTo = options.applyTo && $(options.applyTo) || null;
		//alert(this.$applyTo);
		this.$li = null;
		this.width = 0;
		this.liWidth = 0;
		this.tpl = this.options.tpl;
		this.getListAjaxOptions = this.options.getListAjaxOptions;
		this.pageUrl = encodeURIComponent(window.location.href);
		this.pageTitle = encodeURIComponent(document.title.substring(0,76));
		if($.browser.msie&&($.browser.version == "6.0")&&!$.support.style) this.options.showShadow = false;
	}
	yijs.ShareList.prototype = {
		/**
		 * 运行
		 */
		render : function(){
			var _that = this;
			/* test this object alert(_that instanceof yijs.ShareList); return true */
			var _cls = this.options.cls;

			/* for(var i in _cls){ADS.log.write(i);} */
            /* alert(this.$applyTo.size()); */
			/* alert(this.$applyTo instanceof jQuery); return true */
			/* ADS.log.write(_cls.shareList); ruturn share-list */
			//ADS.log.write(this.options.style);
			/* alert(this.options.style); return null */

			if(this.$applyTo != null && this.$applyTo.size() > 0){
				this.$applyTo.html("<ul class='"+_cls.shareList+" clearfix'></ul>");
				this.$applyTo.css({"position":"relative","overflow":"hidden"});
				this.options.style && this.$applyTo.css(this.options.style);
				this.$applyTo = this.$applyTo.children("."+_cls.shareList);
				/* for(var i in this.$applyTo){ADS.log.write(i);} */
                /* ADS.log.write(this.$applyTo.selector); return .children(.share-list) */
				/* ADS.log.write(this.getListAjaxOptions.url); return js/shareListData.js */
				/* ADS.log.write(this.getListAjaxOptions.type); return get */
				/* ADS.log.write(this.getListAjaxOptions.dataType); return json */

				$.ajax({
					url : this.getListAjaxOptions.url,
					type : this.getListAjaxOptions.type,
					dataType : this.getListAjaxOptions.dataType,
					success : function(data){
				    /*for( var i in data){for(var j in data[i]){ADS.log.write(j);}} test data return value */
						_that._getListSuccess(data);
					},
					beforeSend : function(){
						_that._getListBeforeSend();
					}
				});
			}
		},
		/**
		 * 成功获取分享列表后执行的回调函数
		 * @param {Object} data json数据源
		 */
		_getListSuccess : function(data){

			var _that = this;
			var _cls = this.options.cls;
			_that._createList(data,function(){
				//alert(this);
				_that.$li = _that.$applyTo.children("li");
				//alert(_that.options.showShadow);
				_that.options.showShadow && _that.$li.children("."+_cls.text).hide();
				_that._setLocalBookmark();
				_that._addShadow();
				_that._setUlWidth();
				_that._followMouseScroll();
				//鼠标滑过li
				_that.$li.hover(function(){
					var index = $(this).index();
					_that.iconToTop(index);
				},function(){
					var index = $(this).index();
					_that.iconTopDefault(index);					
				})
				_that.getListAjaxOptions.success && _that.getListAjaxOptions.success.call(this,data);					
			});			
		},
		/**
		 * 触发ajax请求前的回调函数
		 */
		_getListBeforeSend : function(){
			/* ADS.log.write(this.options.preloadImgSrc); return style/images/loading.gif */
			/* alert(this.getListAjaxOptions.beforeSend); */
			//alert(this instanceof yijs.ShareList) call(this) 'this' is yijs.ShareList object in the getListAjaxOptions.beforeSend
			this.$applyTo.html("<img src='"+this.options.preloadImgSrc+"' class='"+this.options.cls.preload+"' />");
			this.getListAjaxOptions.beforeSend && this.getListAjaxOptions.beforeSend.call(this);			
		},		
		/**
		 * 创建分享按钮列表
		 * @param {Object} data json数据源
		 * @param {function} afterCreate 回调函数
		 */
		_createList : function(data,afterCreate){

				var _that = this;
				var _li;
				var _list = _that.options.shareSites;
				/* for(var i in _list){ADS.log.write(_list[i]);} */
				var _ali = []; 
				/* ADS.log.write(this.tpl); return string */
				$.each(_list,function(a){
					$.each(data,function(i){
						if(data[i].name == _list[a]){
							_li = _that.tpl.TFtpl(data[i]);
							//ADS.log.write(_li);
							_li = _li.TFtpl({url:_that.pageUrl,title:_that.pageTitle});
							//ADS.log.write(_li);
							_ali.push(_li);
						} ;
					})							
				})
				_that.$applyTo.children().fadeOut("slow",function(){
					_that.$applyTo.html(_ali.join(""));
					//alert(this instanceof yijs.ShareList); return false
					//alert(this instanceof jQuery); return false
					//alert($(this) instanceof jQuery); return true
					afterCreate && afterCreate.call(this);
				})			
				
		},
		/**
		 * 给本地收藏夹按钮绑定特殊事件
		 */
		_setLocalBookmark : function(){
			var _that = this;
			this.$li.children("."+this.options.cls.icon+"[name=favorite]").click(function(){
				_addBookmark(window.location.href,document.title.substring(0,76));
				return false;
			}).next().click(function(){return false});
			//添加到本地收藏夹
			function _addBookmark(url,title) {
			    if (window.sidebar) {
			        window.sidebar.addPanel(title,url,"");
			    } 
			    else if(document.all) {
			        window.external.AddFavorite( url, title);
			    }
			    else if( window.opera && window.print ) {
			        return true;
			    }
			}			
		},
		/**
		 * 给每个图标下加个阴影图片
		 */
		_addShadow : function(){
			var _opt = this.options;
			/* for(var i in _opt){ADS.log.write(i);} return default */
			/* _opt.showShadow reutrn true */
			if(_opt.showShadow){
				//ADS.log.write(_opt.cls.iconShadow);
				//ADS.log.write(_opt.shadowSrc); return style/images/icon-shadow.png
				$("<div class='"+_opt.cls.iconShadow+"'><img src='"+_opt.shadowSrc+"' /></div>").appendTo(this.$li);
			}
		},
		/**
		 * 设置列表宽度
		 */
		_setUlWidth : function(){
			var _$liFirst = this.$li.eq(0);
			/* for(var i in this.$li){for(var j in this.$li[i]){ ADS.log.write(j);}} */
			//alert(this.$li.eq(0).selector);
			//alert(_$liFirst.width());
			//var w = _$liFirst.width();
			/* ADS.log.write(w); */
			/* ADS.log.write(_$liFirst.css("marginLeft")); */
			/* ADS.log.write(_$liFirst.css("marginRight")); */
			this.liWidth = _$liFirst.width()+parseInt(_$liFirst.css("marginLeft"))+parseInt(_$liFirst.css("marginRight"));
			// alert(this.liWidth); return 66
			// alert(this.$li.size()); return 19 
			this.$applyTo.width(this.liWidth * this.$li.size());
			this.width = this.$applyTo.width();
		},
		/**
		 * 列表随鼠标滚动
		 */
		_followMouseScroll : function(){
			var _that = this;
			var _opts = this.options;
			var _parentWidth = this.$applyTo.parent().width();
			// alert(_parentWidth); return 660
			// alert(this.width); return 1254
			var _totScroll = this.width-_parentWidth;
			if(this.width > _parentWidth){
				this.$applyTo.mousemove(function(e){
					//ADS.log.write(e.pageX);
					//alert(e.pageX);
					//alert(e.clientX);
					if(_opts.allowSroll){
						var _pageX = e.pageX;
						var _pos = _that.$applyTo.offset();
						_that.$applyTo.css({marginLeft:'-'+_totScroll*(Math.max(_pageX-_pos.left,0)/_that.width)+'px'});	
					}
				})
				this.$applyTo.mouseleave(function(e){
					if(!jQuery.browser.msie || jQuery.browser.version != "7.0"){
						var _marginLeft = Math.abs(Math.floor(parseInt(_that.$applyTo.css("marginLeft"))));
						var _is = _marginLeft % _that.liWidth;
						if (_is != 0) {
							var _d = Math.floor(_marginLeft / _that.liWidth);
							_that.$applyTo.animate({"marginLeft": "-"+_d * _that.liWidth},"fast")
						}						
					}
					
				})
			}
			
		},
		/**
		 * 鼠标滑过时图标向上移动，阴影发生变化
		 */
		iconToTop : function(index){
			var _that = this;
			var _lihoverEffect = _that.effect.liHover;
			var _speed = this.options.speed;
			var _$currentLi = this.$li.eq(index);
			var _icon_cls = this.options.cls.icon;

			if(_$currentLi.size() > 0){
				_$currentLi.children("."+_icon_cls).stop().animate(_lihoverEffect.icon,_speed,function() {
					$(this).animate(_lihoverEffect.iconBack,_speed);
				});
				//改变阴影大小和透明度
				if(this.options.showShadow){
					var _$shadowDiv = _$currentLi.children("."+this.options.cls.iconShadow);
					_$shadowDiv.children("img").stop().animate(_lihoverEffect.shadowImg,_speed);
					_$shadowDiv.stop().animate(_lihoverEffect.shadowDiv,_speed);
				}				
			}			
		},
		/**
		 * 鼠标离开时图标复位，阴影复位
		 */
		iconTopDefault : function(index){
			var _that = this;
			var _liMouseoutEffect = _that.effect.liMouseout;
			var _speed = this.options.speed;
			var _$currentLi = this.$li.eq(index);
			var _icon_cls = this.options.cls.icon;
			if (_$currentLi.size() > 0) {
				_$currentLi.children("."+_icon_cls).stop().animate(_liMouseoutEffect.icon, _speed, function() {
					$(this).animate(_liMouseoutEffect.iconBack, _speed);
				});
				//复位阴影大小和透明度
				if(this.options.showShadow){
					var _$shadowDiv = _$currentLi.children("."+this.options.cls.iconShadow);
					_$shadowDiv.children("img").stop().animate(_liMouseoutEffect.shadowImg,_speed);
					_$shadowDiv.stop().animate(_liMouseoutEffect.shadowDiv,_speed);
				}				
		    }			
		}			
		
	}
	//接口数组
	$.fn.shareList.interfaces = [];
	//样式
	$.fn.shareList.classes = {
		defaults : {
				shareList   : "share-list",
				shareListLi : "share-list-li",
				icon        : "share-list-icon",
				text        : "share-list-text",
				iconShadow  : "share-list-icon-shadow",
				preload     : "share-list-preload"
		}
	}
	//模板
	$.fn.shareList.tpl = {
		defaults : '<li class="l share-list-li">'+
                       '<a href="{href}" name="{name}" localName="{localName}" class="share-list-icon icon-{name}" target="_blank"></a>'+
					   '<a href="{href}" class="share-list-text">{localName}</a>'+
                   '</li> '
	}		
	//默认参数
	$.fn.shareList.defaults = {
				/**想要显示的按钮列表*/
				shareSites : ["9dian","feerbook","chouti","diglog","sinaminiblog","renren","zhuaxia","xianguo","greader","qqshuqian",
				              "douban","twitter","favorite","kaixin001","baiducang","gbuzz","digu","zuosa",
							  "renjian","sohubai"],
				/**ajax配置*/			  
				getListAjaxOptions : {
					type: "GET",
					url : "js/shareListData.js",
					dataType : "json",
					beforeSend:function(){}
				},
				/**是否允许列表随鼠标滚动*/
				allowSroll   : true,
				/**是否显示阴影*/
				showShadow	 : true,
				/**阴影图片路径*/
				shadowSrc	 : "style/images/icon-shadow.png",
				/**预加载动画图片*/
				preloadImgSrc : "style/images/loading.gif",
				/**动画速度*/
				speed        : 250,	
				/**样式*/
				style : null,				
				/**动画效果设置*/			
				effect       : {
					/**鼠标滑过li时的动画*/	
					liHover : {
						icon 	 : {marginTop: "-10px"},
						iconBack : {marginTop: "-6px"}, 
						shadowImg   : { width: "65%", height: "10px", marginLeft: "10px"},
						shadowDiv : {opacity: 0.25}						
					},
					/**鼠标离开li时的动画*/	
					liMouseout : {
						icon     : {marginTop: "4px"},
						iconBack : { marginTop: "0px" },
						shadowImg   : { width: "100%", height: "21px", marginLeft: "0"},
						shadowDiv : {opacity: 1}		
					}
				},
				/**样式名集合*/ 	
				cls          : $.fn.shareList.classes.defaults,
				/**模板*/
				tpl          : $.fn.shareList.tpl.defaults
				
	};	
})(jQuery);

//简单的转换模板函数
String.prototype.TFtpl = function(o){   
    return this.replace(/{([^{}]*)}/g,   
            function (a,b){   
                var r = o[b];   
                return typeof r==='string'?r:a;   
            }   
    );   
       
}; 

 

评论

1 楼 jimoshutong 2011-12-21  

看起来有点小复杂啊