插件开发 -- Tab

只配置了两个参数, 功能还需要完善
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul li{
				list-style: none;
			}
			.tab{
				width: 408px;
				margin: 100px auto;
			}
			ul.nav li{
				float: left;
				width: 100px;
				margin-right: 2px;
				height: 50px;
				text-align: center;
				line-height: 50px;
				background-color: #666;
				color: #fff;
				cursor: pointer;
				
			}
			ul.nav li.on{
				background-color: #000;
				color: #fff;
			}
			ul.content{
				width: 404px;
				border: 1px solid #f00;
				height: 200px;
			}
			ul.content li{
				text-align: center;
				line-height: 150px;
				display: none;
				color: #000;
				position: absolute;
			}
			ul.content li.active{
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="tab" data-config='{
										"type":"mouseover",
										"effect":"fade"
									}'>
			<ul class="nav">
				<li class="on">javascript</li>
				<li>jquery</li>
				<li>Angular</li>
				<li>Vue</li>
			</ul>
			<ul class="content">
				<li class="active">JAVASCRIPT</li>
				<li>JQUERY</li>
				<li>ANGULARJS</li>
				<li>VUE.JS</li>
			</ul>
		</div>
		<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
		<script type="text/javascript">
			$(function(){
				new Tab($(".tab"));
			})
			function Tab(tab){
				this.tab = tab;
				
				var _this = this;
				//配置默认参数,用于没有配置人工参数时使用
				this.config = {
								"type":"click",
								"effect":"default"
						}
				//如果配置了人工参数,就进行拓展
				if(this.getConfig()){
					$.extend(this.config,this.getConfig());
				}
				
				//获取每一个li以及content部分
				this.lis = this.tab.find(".nav li");
				this.contentLi = this.tab.find(".content li");
				
				
				//判断类型
				var config = this.config;
				if(config.type == "click"){
					this.lis.on(config.type,function(){
						_this.typeWay($(this));
					})
				}
				else{
					this.lis.mouseover(function(){
						_this.typeWay($(this));
					})
				}
				
				//调用getConfig方法
				this.getConfig();
				
			}
			Tab.prototype = {
				
				getConfig:function(){
					//获取人工配置参数
					var config = this.tab.attr("data-config");
					if(config&&config!=""){
						return $.parseJSON(config);
					}
					else{
						return;
					}
				},
				typeWay:function(current){
					//获取点击相应li的索引
					var index = current.index();
					//保存contentLi
					var contentLi = this.contentLi;
					
					current.addClass("on").siblings().removeClass("on");
					
					//判断效果
					if(this.config.effect == "fade"){
						contentLi.eq(index).fadeIn().siblings().fadeOut();
					}
					else{
						contentLi.eq(index).addClass('active').siblings().removeClass("active");
					}
				}
			}
		</script>
	</body>
</html>
猜你喜欢
