码迷,mamicode.com
首页 > 其他好文 > 详细

导航菜单,showHide插件 + Dropdown 下拉对象

时间:2019-08-27 01:00:31      阅读:81      评论:0      收藏:0      [点我收藏+]

标签:abs   一个   单例   WHID   tar   ajax   oct   列表   container   

index.js文件

<!DOCTYPE html>
<html lang="utf-8">
<head>
	<meta charset="UTF-8">
	<title>下拉菜单</title>
	<link rel="stylesheet" href="css/base.css">
	<link rel="stylesheet" type="text/css" href="css/common.css">
	<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
	<div class="nav-site">
		<div class="container">
			<ul class="fl">
				<li class="fl"><a href="javascript:;" class="nav-site-login">亲,请登录</a></li>
				<li class="fl"><a href="javascript:;" class="nav-site-item link">免费注册</a></li>
				<li class="fl"><a href="javascript:;" class="nav-site-item link">手机逛慕淘</a></li>
			</ul>
			<ul class="fr">
				<li class="dropdown fl" data-active=‘site‘>
					<a href="javascript:;" class="dropdown-toggle link">我的慕淘<i class="dropdown-arrow"></i></a>
					<ul class="dropdown-layer  dropdown-left">
						<li><a href="javascript:;"  class="dropdown-item">已买到宝贝</a></li>
						<li><a href="javascript:;"  class="dropdown-item">我的足迹</a></li>
					</ul>
				</li>
				<li class="dropdown fl" data-active=‘site‘>
					<a href="javascript:;" class="dropdown-toggle link">收藏夹<i class="dropdown-arrow"></i></a>
					<ul class="dropdown-layer  dropdown-left">
						<li><a href="javascript:;"  class="dropdown-item">收藏的宝贝</a></li>
						<li><a href="javascript:;"  class="dropdown-item">收藏的店铺</a></li>
					</ul>
				</li>
				<li class="dropdown fl" data-active=‘site‘>
					<a href="javascript:;" class="dropdown-catorage link">商品分类</a>
				</li>
				<li class="dropdown fl" data-active=‘site‘>
					<a href="javascript:;" class="dropdown-toggle link">卖家中心<i class="dropdown-arrow"></i></a>
					<ul class="dropdown-layer  dropdown-left">
						<li><a href="javascript:;"  class="dropdown-item">免费开店</a></li>
						<li><a href="javascript:;"  class="dropdown-item">已卖出的宝贝</a></li>
						<li><a href="javascript:;"  class="dropdown-item">出售中的宝贝</a></li>
						<li><a href="javascript:;"  class="dropdown-item">卖家服务市场</a></li>
						<li><a href="javascript:;"  class="dropdown-item">卖家培训中心</a></li>
						<li><a href="javascript:;"  class="dropdown-item">体验中心</a></li>
					</ul>
				</li>
				<li class="dropdown fl" data-active=‘site‘>
					<a href="javascript:;" class="dropdown-toggle link">联系客服<i class="dropdown-arrow"></i></a>
					<ul class="dropdown-layer dropdown-right">
						<li><a href="javascript:;"  class="dropdown-item">消费者咨询</a></li>
						<li><a href="javascript:;"  class="dropdown-item">卖家服务</a></li>
					</ul>
				</li>
			</ul>

		</div>
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script type="text/javascript">
	window.jQuery || document.write(‘<script src="js/jquery.js"><\/script>‘);
	</script>
	<script type="text/javascript" src="js/transition.js"></script>
	<script type="text/javascript" src="js/showHide.js"></script>
	<script type="text/javascript" src="js/dropdown.js"></script>
	<script type="text/javascript" src="js/index.js"></script>
</body>
</html>

  base.css文件

/*重置浏览器的默认样式css reset*/
	/*清除内外边距*/
	body, h1, h2, h3, h4, h5, h6, p, hr, /*结构元素*/
	ul, ol, li, dl, dt, dd, /*列表元素*/
	form, fieldset, legend, input, button, select, textarea, /*表单元素*/
	th, td, /*表格元素*/
	pre {
		padding: 0;
		margin: 0;
	}

	/*重置默认样式*/
	body, button, input, select, textarea {
		/*font: 12px/1 微软雅黑, Tahoma, Helvetica, Arial, 宋体, sans-serif;*/
		color: #333;
		font: 12px/1 "Microsoft YaHei", Tahoma, Helvetica, Arial, SimSun, sans-serif;
	}
	h1, h2, h3, h4, h5, h6 {
		font-size: 100%;
		font-weight: normal;
	}
	em, i {
		font-style: normal;
	}

	a {
		text-decoration: none;
	}
	li {
		list-style-type: none;
		vertical-align: top;
	}
	img {
		border: none;
		/*display: block;*/
		vertical-align: top;
	}
	textarea {
		overflow: auto;
		resize: none;
	}
	table {
		border-spacing: 0;
		border-collapse: collapse;
	}

/*常用公共样式*/
	.fl {
		float: left;
		display: inline;
	}
	.fr {
		float: right;
		display: inline;
	}
	.cf:before,
	.cf:after {
		content: " ";
		display: table;
		
	}
	.cf:after {
		clear: both;
	}
	.cf {
		*zoom: 1;
	}

  common.css文件

/* ¹«¹²Ñùʽ */
.container {
	width: 1200px;
}
.link {
	color: #4d555d;
}
.link:hover {
	color: #f01414;
}

/* showHide */
.transition {
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
}
.fade {
	opacity: 0 !important;
	visibility: hidden !important;
}
.slideUpDown {
	height: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
.slideLeftRight {
	width: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
/* dropdown */
.dropdown{
	position: relative;
}
.dropdown-toggle {
	display: inline-block;
}
.dropdown-arrow {
	display: inline-block;
	background-repeat: no-repeat;
}
.dropdown-layer {
	display: none;
 	position: absolute;
	top: 100%;
	overflow: hidden;
}
/*  .dropdown-item {
	display: block;
	white-space: nowrap;
	overflow: hidden;
} */
 .dropdown-left {
 	left: 0;
 	right: auto;
 }
 .dropdown-right {
 	left: auto;
 	right: 0;
 }
 

  index.css文件

.nav-site{
	width: 100%;
	background: #f3f5f7;
}
.nav-site > .container{
	height: 44px;
	line-height: 44px;
	margin: 0 auto;
	border-bottom: 1px solid #cdd0d4;
}
.nav-site-login {
	margin-left: 15px;
	color: #f01414;
}
.nav-site-item {
	margin-left: 10px;
}
.nav-site .nav-site-item:nth-child(1) {
	margin-right: 16px;
}
/*dropdown*/
/* .dropdown{
	position: relative;
} */
.dropdown-catorage,
.dropdown-toggle {
	/*display: inline-block;*/
	padding: 0 16px 0 12px;
	border-left: 1px solid #f3f5f7;
	border-right: 1px solid #f3f5f7;
}
/* .dropdown-toggle:hover {
	background: #fff;
	border-left: 1px solid #cdd0d4;
	border-right: 1px solid #cdd0d4;
} */
.dropdown-arrow {
	/*display: inline-block;*/
	width: 8px;
	height: 6px;
	/*background: url(‘../img/dropdown-arrow.png‘) no-repeat;*/
	background-image: url(‘../img/dropdown-arrow.png‘);
	margin-left: 8px;
}

.dropdown-layer {
	/*display: none;*/
 	/*position: absolute;*/
	/*top: 100%;*/
	background: #f3f5f7;
	border: 1px solid #cdd0d4;
	border-top: none;
}
/*  .dropdown:hover .dropdown-layer,
.dropdown:hover .dropdown-toggle {
	background: #fff;
}
.dropdown:hover .dropdown-layer {
	display: block;
} */

 .dropdown-item {
	display: block;
	height:30px;
	line-height: 30px;
	padding-left: 12px;
	padding-right: 12px;
	white-space: nowrap;
	overflow: hidden;
	color: #4d555d;
}

/*  .dropdown-left {
	left: 0;
	right: auto;
}
.dropdown-right {
	left: auto;
	right: 0;
}
*/
.dropdown-item {
	background: #fff;
}
.dropdown-item:hover {
	background: #f3f5f7;
}
.site-active .dropdown-toggle {
	background: #fff;
	border-left: 1px solid #cdd0d4;
	border-right: 1px solid #cdd0d4;
}
.site-active .dropdown-layer {
	/*display: block;*/
	background: #fff;
}

  导入jquery文件

导入jquery.js

transitionend.js文件

(function(){
	// ‘use strict‘;//在IE浏览器下,使用严格模式是不能定义多个变量的,所以不能使用严格模式

	//判断样式是否支持该浏览器,可以在控制台输出 document.body.style[属性名] = ""; 则支持
	//如果返回的 undefined 则不支持。 
	//因为调用未定义的对象,报错;使用未定义的属性,返回undefined
	var transitions = {
		‘-webkit-transition‘:‘webkitTransitionEnd‘,
		‘-moz-transition‘:‘mozTransitionEnd‘,
		‘-webkit-transition‘:‘webkitTransitionEnd‘,
		‘-o-transition‘:‘oTransitionEnd‘,
		‘transition‘:‘transitionend‘
	};

	var value = ‘‘;
	var isSupport = false;
	for(var p in transitions){
		if (document.body.style[p] !== undefined) {
			value = transitions[p];
			isSupport = true;
			break;
		}
	};
	//暴露一个借口对象给外界调用
	// window.mt = ""  window.mt = undefined   进行隐式转换 都是false
	// 所以window.mt 只能是一个对象时才返回真
	// 与找false,或找true
	window.mt = window.mt || {};
	window.mt.transitionend = {
		transition:value,
		isSupport:isSupport
	};
})(jQuery)

  showHide.js文件

(function(){
	‘use strict‘;
	//引用 transitionend 动画结束后执行的事件
	var transitionend = window.mt.transitionend.transition;
	//所有的兼容性写法都可以添加一个附带属性,即表示浏览器是否支持
	var isSupport     = window.mt.transitionend.isSupport;


	//公共方法,高内聚低耦合,方法提取最小,所有都有

	//初始化$ele对象,判断是否显示并设置对应的状态
	function init($ele,callback){
		if ($ele.is(‘:hidden‘)) {
			$ele.data(‘status‘,‘hidden‘);
			typeof callback=== ‘function‘ && callback();
		}else{
			$ele.data(‘status‘,‘shown‘);
		}
	}

	//公共 show 设置事件开始前的状态并trigger其他事件
	function show($ele,callback){
		if ($ele.data(‘status‘)===‘show‘ || $ele.data(‘status‘)===‘shown‘) return;
		$ele.data(‘status‘,‘show‘).trigger(‘show‘);
		typeof callback === ‘function‘ && callback();
	}

	//公共 hide 设置事件触发前的状态,并触发其他事件
	function hide($ele,callback){
		if ($ele.data(‘status‘)===‘hide‘ || $ele.data(‘status‘)===‘hidden‘) return;
		$ele.data(‘status‘,‘hide‘).trigger(‘hide‘);
		typeof callback === ‘function‘ && callback();
	}

	//静静的显示隐藏,没有动画
	var silent = {
		init:function($ele){
			//初始化
			init($ele);
		},
		show:function($ele){
			show($ele,function(){
				$ele.show();
				$ele.data(‘status‘,‘shown‘).trigger(‘shown‘);
			});
		},
		hide:function($ele){
			hide($ele,function(){
				$ele.hide();
				$ele.data(‘status‘,‘hidden‘).trigger(‘hidden‘);
			});
		}
	}

	//使用css3显示隐藏的动画
	var css3 = {
		fade:{// fadeOut  fadeIn 淡入淡出
			init:function($ele){
				css3._init($ele,‘fade‘);
			},
			show:function($ele){
				css3._show($ele,‘fade‘);
			},
			hide:function($ele){
				css3._hide($ele,‘fade‘);
			}
		},
		slideUpDown:{ //slideUp slideDown 上下拉动
			init:function($ele){
				//千万记住如果$ele的宽高是由内容撑开,而没有设置固定宽高,
				//如果设置其中一个属性进行过度,那么一定要在初始化时先获取,且设置其宽高,
				//才能进行上下拉动或左右拉动的过渡效果,否则是没有过渡效果的显示隐藏
				$ele.height($ele.height());
				css3._init($ele,‘slideUpDown‘);
			},
			show:function($ele){
				css3._show($ele,‘slideUpDown‘);
			},
			hide:function($ele){
				css3._hide($ele,‘slideUpDown‘);
			}
		},
		slideLeftRight:{ //jquery中没有定义,左右拉动
			init:function($ele){
				//千万记住如果$ele的宽高是由内容撑开,而没有设置固定宽高,
				//如果设置其中一个属性进行过度,那么一定要在初始化时先获取,且设置其宽高,
				//才能进行上下拉动或左右拉动的过渡效果,否则是没有过渡效果的显示隐藏
				$ele.width($ele.width());
				css3._init($ele,‘slideLeftRight‘);
			},
			show:function($ele){
				css3._show($ele,‘slideLeftRight‘);
			},
			hide:function($ele){
				css3._hide($ele,‘slideLeftRight‘);
			}
		},
		fadeSlideUpDown:{ // fadeOut fadeIn + slideUp = slideDown 淡入淡出 + 上下拉动
			init:function($ele){
				//千万记住如果$ele的宽高是由内容撑开,而没有设置固定宽高,
				//如果设置其中一个属性进行过度,那么一定要在初始化时先获取,且设置其宽高,
				//才能进行上下拉动或左右拉动的过渡效果,否则是没有过渡效果的显示隐藏
				$ele.height($ele.height());
				css3._init($ele,‘fade slideUpDown‘);
			},
			show:function($ele){
				css3._show($ele,‘fade slideUpDown‘);
			},
			hide:function($ele){
				css3._hide($ele,‘fade slideUpDown‘);
			}
		},
		fadeSlideLeftRight:{ //fadeOut fadeIn + 左右拉动
			init:function($ele){
				//千万记住如果$ele的宽高是由内容撑开,而没有设置固定宽高,
				//如果设置其中一个属性进行过度,那么一定要在初始化时先获取,且设置其宽高,
				//才能进行上下拉动或左右拉动的过渡效果,否则是没有过渡效果的显示隐藏
				$ele.width($ele.width());
				css3._init($ele,‘slideLeftRight fade‘);
			},
			show:function($ele){
				css3._show($ele,‘slideLeftRight fade‘);
			},
			hide:function($ele){
				css3._hide($ele,‘slideLeftRight fade‘);
			}
		}
	}

/*谨记:下面的方法一定要写在 css3对象后面,因为使用的字面的方式定义函数,
浏览器在预解析时,css3._init = null; 如果css3对象不存在就会报错
即:不存在的对象报错,不存在的属性返回undefined*/
	// _init 下划线的方法表示,css3对象内部使用的
	css3._init = function($ele,className){
		$ele.addClass(‘transition‘);
		init($ele,function(){
			$ele.addClass(className);
		});
	}
	// _show 下划线的方法表示,css3对象内部使用的
	css3._show = function($ele,className){
		show($ele,function(){
			$ele.show();
			setTimeout(function(){
				$ele.removeClass(className);
			},20);
			$ele.off(transitionend).one(transitionend,function(){
				$ele.data(‘status‘,‘shown‘).trigger(‘shown‘);
			});
		});
	}
	// _hide 下划线的方法表示,css3对象内部使用的
	css3._hide = function($ele,className){
		hide($ele,function(){
			$ele.addClass(className);
			$ele.off(transitionend).one(transitionend,function(){
				$ele.hide();
				$ele.data(‘status‘,‘hidden‘).trigger(‘hidden‘);
			});
		});
	}

	/*谨记:下面的方法一定要写在 css3对象后面,因为使用的字面的方式定义函数,
	浏览器在预解析时,css3._init = null; 如果css3对象不存在就会报错
	即:不存在的对象报错,不存在的属性返回undefined*/
	//使用原生js进行显示隐藏
	var js = {
		fade:{// fadeOut  fadeIn 淡入淡出
			init:function($ele){
				js._init($ele,{
						‘opacity‘:‘0‘,
						‘visibility‘:‘hidden‘
				});
			},
			show:function($ele){
				js._show($ele,{
					‘opacity‘:‘1‘,
					‘visibility‘:‘visible‘
				});		},
			hide:function($ele){
				js._hide($ele,{
					‘opacity‘:‘0‘,
					‘visibility‘:‘hidden‘
				});
			}
		},
		slideUpDown:{//slideUp slideDown 上下拉动
			init:function($ele){
				js._init($ele,{
					‘height‘:‘0‘,
					‘padding-top‘:‘0‘,
					‘padding-bottom‘:‘0‘
				});
			},
			show:function($ele){
				var styles = $ele.data(‘styles‘);
				js._show($ele,{
					‘height‘:styles[‘height‘],
					‘padding-top‘:styles[‘padding-top‘],
					‘padding-bottom‘:styles[‘padding-bottom‘]
				});
			},
			hide:function($ele){
				js._hide($ele,{
					‘height‘:‘0‘,
					‘padding-top‘:‘0‘,
					‘padding-bottom‘:‘0‘
				});
			}
		},
		slideLeftRight:{//jquery中没有定义,左右拉动
			init:function($ele){
				js._init($ele,{
					‘padding-left‘:‘0‘,
					‘padding-right‘:‘0‘
				});
			},
			show:function($ele){
				var styles = $ele.data(‘styles‘);
				js._show($ele,{
					‘width‘:styles[‘width‘],
					‘padding-left‘:styles[‘padding-left‘],
					‘padding-right‘:styles[‘padding-right‘]
				});
			},
			hide:function($ele){
				js._hide($ele,{
					‘width‘:‘0‘,
					‘padding-left‘:‘0‘,
					‘padding-right‘:‘0‘
				});
			}
		},
		fadeSlideUpDown:{// fadeOut fadeIn + slideUp = slideDown 淡入淡出 + 上下拉动
			init:function($ele){
				js._init($ele,{
					‘height‘:‘0‘,
					‘opacity‘:‘0‘,
					‘padding-top‘:‘0‘,
					‘padding-bottom‘:‘0‘
				});
			},
			show:function($ele){
				var styles = $ele.data(‘styles‘);
				js._show($ele,{
					‘height‘:styles[‘height‘],
					‘opacity‘:styles[‘opacity‘],
					‘padding-top‘:styles[‘padding-top‘],
					‘padding-bottom‘:styles[‘padding-bottom‘]
				});
			},
			hide:function($ele){
				js._hide($ele,{
					‘height‘:‘0‘,
					‘opacity‘:‘0‘,
					‘padding-top‘:‘0‘,
					‘padding-bottom‘:‘0‘
				});
			}
		},
		fadeSlideLeftRight:{ //fadeOut fadeIn + 左右拉动
			init:function($ele){
				js._init($ele,{
					‘width‘:‘0‘,
					‘opacity‘:‘0‘,
					‘padding-left‘:‘0‘,
					‘padding-right‘:‘0‘
				});
			},
			show:function($ele){
				var styles = $ele.data(‘styles‘);
				js._show($ele,{
					‘width‘:styles[‘width‘],
					‘opacity‘:styles[‘opacity‘],
					‘padding-left‘:styles[‘padding-left‘],
					‘padding-right‘:styles[‘padding-right‘]
				});
			},
			hide:function($ele){
				js._hide($ele,{
					‘width‘:‘0‘,
					‘opacity‘:‘0‘,
					‘padding-left‘:‘0‘,
					‘padding-right‘:‘0‘
				});
			}
		}
	}
	// _init 下划线的方法表示,js对象内部使用的
		js._init = function($ele,options){
			//这里特别注意,如果$ele标签中已经添加 transition 过渡类,
			//那么使用js时,显示效果就会有异常,所以一定记住这里要移除
			$ele.removeClass(‘transition‘);
			var styles = {};
			for(var p in options){
				styles[p] = $ele.css(p);
			}
			//把值存放在$ele对象中,在显示时可以提取出来使用
			$ele.data(‘styles‘,styles);

			init($ele,function(){
				$ele.animate(options);
			})
		}
		// _show 下划线的方法表示,js对象内部使用的
		js._show = function($ele,options){
			show($ele,function(){
				$ele.show();
				setTimeout(function(){
					$ele.stop().animate(options,function(){
						$ele.data(‘status‘,‘shown‘).trigger(‘shown‘);
					});
				},20);
			})
		}
		// _hide 下划线的方法表示,js对象内部使用的
		js._hide = function($ele,options){
			hide($ele,function(){
				$ele.stop().animate(options,function(){
					$ele.hide();
					$ele.data(‘status‘,‘hidden‘).trigger(‘hidden‘);
				});
			});
		}


// 思路:
// 1,返回一个对象
//   showHide(options)
// 	 silent{show,hide}
// 	 css3.animation{show,hide}
// 	 js.animation{show,hide}
// 2,  showHide(‘string‘);
		var defaults = {
				css3:false,
				js:false,
				animation:‘fade‘
		}
		function showHide($ele,option){
			var mode = {};//模式
			//如果css3=true ,且 支持 transitionend事件才执行 使用css3执行动画
			if (option.css3 && isSupport) {
			//如果css3[options.animation]存在,则mode=css3[options.animation],否则等于默认值
				mode = css3[option.animation] ? css3[option.animation] : css3[defaults.animation];
			}else if (option.js) {
				mode = js[option.animation] ? js[option.animation] : js[defaults.animation];
			}else{
				mode = silent;
			}
			//初始化
			mode.init($ele);
			return {
				show:$.proxy(mode.show,this,$ele),
				hide:$.proxy(mode.hide,this,$ele)
			}
		}

		window.mt = window.mt || {};
		window.mt.showHide = showHide;

//写成插件进行调用
		$.fn.extend({
			showHide:function(options){
				//插件对象一定返回的是一个对象
				//传对象进来时,一定记得遍历,因为有可能是一个数组对象
				return $(this).each(function() {
					//注意:这里mode存取值,使用的是单例存取值,
					var mode = $(this).data(‘mode‘);
					//$.extend({},a,b,c);处理参数,参数扩展,
					//后面对象的属性覆盖前面的属性(包括属性值),最后覆盖空值得到一个新对象
					//即:c 覆盖 b 覆盖  a  覆盖 {}  最后得到一个新的对象参数
					//typeof options === ‘object‘ && options 如果参数options 为对象,则返回 options,
					//否则返回false,即:使用defaults 默认值
					var option = $.extend({},defaults,typeof options ===‘object‘ && options);

					//注意:这里mode存取值,使用的是单例存取值,
					//1,一开始就获取mode=$(this).data(‘mode‘),
					//2,中间执行一段代码获取 mode
					//3,如果mode为空,则执行存值,并赋值,否则继续执行
					 if (!mode) {
					 	$(this).data(‘mode‘,mode = showHide($(this),option));
					 }

					 //不要使用 typeof options === ‘string‘,因为options[options] 可能是未定义的属性,
					 //所以这里使用 typeof mode[options] === ‘function‘  options是否是 mode 的函数属性
					if (typeof mode[options] === ‘function‘) {
						//执行
						mode[options]();
					}
				});
			}
		})
})(jQuery)

  dropdown.js文件

(function($){
function Dropdown(ele,options){
		//因为这里的参数在下面 init 方法中访问不到,
		//所以这里把options参数也设置为Dropdown的一个属性,那么就可以通过this进行访问了。
		this.options = options;

	    this.$ele = $(ele);
	    //这里不能直接使用 this.eleLayer = $(‘.dropdown-layer‘),这里获取的是所有的下拉层。
		this.eleLayer = this.$ele.find(‘.dropdown-layer‘);
		//判断是否有设定默认值 active ,如果有设定则使用设定好的值,否则使用下拉菜单对象中 data-actvie 的值
		//使用下面长句也可以,只是处理参数,都把它们放到了,插件中的 $.extend 方法中一起处理了。这种方法优秀
		// this.activeName = options.active !== undefined || this.$ele.data(‘active‘) + ‘-active‘;
		this.activeName = options.active;

		//除了Dropdown属性外,其他所有的操作都应该放到init()函数中去,代表初始化
		this.init();
}
Dropdown.prototype.init = function(){
		//初始化
		this.eleLayer.showHide(this.options);
		var self = this;
		if (this.options.event === ‘click‘) {
			this.$ele.on(‘click‘,function(e){
				self.show();
				//this.$ele 对象有单击事件,而 $(document)也绑定了单击事件,如果没有阻止事件冒泡,
				//那么会从this.$ele一直父级元素冒泡单击事件,直到window对象,
				//this.$ele的父级以上只要有单击事件都会触发。所以这里必须阻止事件冒泡
				e.stopPropagation();
			})
			//单击除了 this.$ele对象外的所有地方都会触发 self.hide()事件
			$(document).on(‘click‘,function(){
				self.hide();
			})
		}else{//除了单击事件其他值默认都是hover事件
			this.$ele.hover($.proxy(this.show,this), $.proxy(this.hide,this));
		}
	/*	this.$ele.hover(function(){
			self.show();
		},function(){
			self.hide();
		})*/
}
//Dropdown本身就是一个对象,所以可以设置属性,
//默认参数,都是一个一个添加上去的,只要会变的参数都暴露到插件中给用户自定义。
//在添加参数的思路可以是,从函数里面一步一步向外边推,或者也可以从用户调用参数时开始一步一步传递。
Dropdown.DEFAULTS = {
	css3:false,
	js:false,
	animation:‘fade‘,
	event:‘hover‘,
	active:‘dropdown‘
}
//面向对象编程时,一定先找出该对象的方法,然后使用原型链的方式进行声明
//因为在创建多个对象后,原型不会在堆内存中开辟空间存放 方法了,
//而是是在原型中向上查找其他对象的方法,进而引用它们的方法。性能最佳。
//所以方法都是存放在原型中,属性都是放在构造函数中。
Dropdown.prototype.show = function(){
	//注意点:本来this.activeName = ‘site-active‘ 即:.site-active中
	//使用 display:block;控制显示隐藏的,如果使用了showHide 显示隐藏插件,
	//一定记住把里面 display 的属性删除掉,这里的类只用于控制样式。
	//显示隐藏的操作交给插件 showHide 来控制
	this.$ele.addClass(this.activeName);
	this.eleLayer.showHide(‘show‘);
}
//同上
Dropdown.prototype.hide = function(){
	this.$ele.removeClass(this.activeName);
	this.eleLayer.showHide(‘hide‘);
}


/*	//这里是思路方法写的函数 ,上面面向对象是根据这个函数构造出来的下拉对象
	function dropdown(ele) {
		var  $ele = $(ele),
			$eleLayer = $ele.find(‘.dropdown-layer‘);
		//初始化
		$eleLayer.showHide({
			css3:true,
			js:false,
			animation:‘slideLeftRight‘
		});
		$ele.hover(function() {
			$ele.addClass(‘site-active‘);
			$eleLayer.showHide(‘show‘);
			// console.log($eleLayer.showHide(‘show‘));
		}, function() {
			$ele.removeClass(‘site-active‘);
			$eleLayer.showHide(‘hide‘);
		});
	}*/

	//把面向对象Dropdown 写成插件的形式被调用
	$.fn.extend({
		dropdown:function(option){
			return this.each(function(){
				// dropdown(this);

				//$.extend({},a,b,c);处理参数,参数扩展,
				//后面对象的属性覆盖前面的属性(包括属性值),最后覆盖空值得到一个新对象
				//即:c 覆盖 b 覆盖  a  覆盖 {}  最后得到一个新的对象参数
				var options = $.extend({},Dropdown.DEFAULTS,$(this).data(‘active‘),option);
				new Dropdown(this,options);
			})
		}
	})
})(jQuery)

  index.js文件

//这是最后指定$(‘.dropdown‘)对象调用插件
$(‘.dropdown‘).dropdown({
	//指定使用哪种方式进行显示隐藏
	css3:true,
	js:false,
	//具体怎么显示隐藏
	animation:‘fadeSlideLeftRight‘,
	/*默认只给了两个事件,如果不是click,那么其他值默认为hover事件,容错率高,即使传错参数也可以正常运行*/
	event:‘cdlick‘,
	/*index.html中鼠标悬浮在 $(‘.dropdown‘)标签添加的是 site-acitve,如果不是该类
	那么就不会在 .dropdown-toggle 添加白色背景,或者可能出现其他异常,
	如:使用dropdown整个导航在鼠标一进一出时就会左右移动一点点 ,请注意*/
	active:‘site‘
});

  

 

导航菜单,showHide插件 + Dropdown 下拉对象

标签:abs   一个   单例   WHID   tar   ajax   oct   列表   container   

原文地址:https://www.cnblogs.com/Knowledge-is-infinite/p/11415838.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!