一个简单的可左右移动的标签栏

2016-03-25

这次在做播放器时碰到了一个严重的问题，一开始打算做个标签页形式的歌单页，来回翻了一下metro UI CSS 发现居然里面的标签页不是可以左右切换的，这样可不太好

而且如果动态添加标签页数量一多就会变成一坨，so考虑了一下，我决定自己造一个轮子算啦。

因为代码很简单，这里就全部没有打注释了

<div class="tab-container">
	<div class="nex arrow-right disabled"></div>
	<div class="tab-control">
		<ul class="tabs">
			<li class="active" data-id="x1">我是第一个特别长的标签</li>
				
			<li data-id="x2">我是第二个特别长的标签</li>
				
			<li data-id="x3">我是第三个特别长的标签</li>
				
			<li data-id="x4">我是第四个特别长的标签</li>
		</ul>
	</div>
	<div class="pre arrow-left"></div>
	<div style="clear:both;"></div>
	<div class = "tab-content">
		<div id="x1" class="active">
			这是一大段一大段一大段一大段一大段一大段一大段一大段一大段一大段一大段一大段一大段的文字
		</div>
		<div id="x2">
			这是一段你的文字文字
		</div>
		<div id="x3">
			黄颜色在西藏人眼里是最有专用特性的色彩,并可以呈现,固定身份,有典型的符号意义。传统的藏族绘画用色口诀理论中说到:“格西石黄待活佛,土黄你把金
		</div>
		<div id="x4">
			他的肖像也常受你小口的親吻，與自然同在一個脈搏裡跳動，前途是那里，沒福見著你的父親，但已往的教訓，卻沒有同樣的碎痕，她多疼你！只許你獨身；因為有了伴多少總得叫你分心，梨夢湖與西子湖，他就捲了起來，與你自己隨口的小曲，小馬，卻偏不作聲，給你的頸根與胸膛一半日的自由，這不取費的最珍貴的補劑便永遠供你的受用；只要你認識了這一部書，他那資質的敏慧，我們的鏈永遠是制定我們行動的上司！
		</div>
	</div>
</div>

下面这一段js代码的泛用性不是太高，后面可以考虑重构一遍

$(".tabs li").click(function(){
	var id = "#"+$(this).data("id");
	console.log(id);
	$.each($(".tab-content div"),function(i,item){
		$(item).hide();
	});
	$.each($(".tabs li"),function(i,item){
		$(item).removeClass("active");
	});
	$(this).addClass("active");
	$(id).show();
});
$(".pre").click(function(){

	var now =  parseInt($(".tabs").css("left"))-240;
	if(now<=(-240*$(".tabs").children().length)){
		$(".tabs").css("left",-240*($(".tabs").children().length-2));
		$(this).addClass("disabled");
	}else{
		$(".tabs").css("left",now);
	}
	if(now<=-240){
		$(".nex").removeClass("disabled");
	}
	
});
$(".nex").click(function(){
	var now =  parseInt($(".tabs").css("left"))+240;
	if(now>=0){
		$(".tabs").css("left",0);
		$(this).addClass("disabled");
	}else{
		$(".tabs").css("left",now);
	}
	if(now>=(-240*$(".tabs").children().length)){
		$(".pre").removeClass("disabled");
	}
});

这段css的颜色简直有毒算啦……就先酱吧

.tab-container{
	width:40rem;
	color: #FFFFFF;
}
.tab-control{
	float: left;
	width:33rem;
	overflow:hidden;
}
.tabs {
	left:0px;
	width:10000rem;
	float: none;
	list-style-type: none;
	padding: 0px;
	margin: 0px;
	position: relative;
	text-align: left;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
.tabs li:hover {
	margin-top: 0rem;
	padding-bottom:1.25rem;
	background: #703688;
}
.tabs .active {
	background: #612e76;
}
.tabs .active:hover {
	background: #612e76;
}
.tabs li {
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	width:10rem;
	float: left;
	display: block;
	padding: 1.25rem;
	border-radius: 8px 8px 0 0;
	background: #8e44ad;
	margin-top: 0.325rem;
    padding-bottom: 0.925rem;
	overflow:hidden;
	height:1.25rem;
	text-overflow:ellipsis;	
	white-space: nowrap;
}
.pre{
	top:1.375rem;
	margin-left:1.25rem;
	margin-right:1.25rem;
	float: left;
	position: relative;
	
}
.arrow-right {    
    width: 0;     
    height: 0;     
    border-bottom: 15px solid transparent;
    border-top: 15px solid transparent;
    border-right: 15px solid #FFD700;    
    font-size: 0;    
    line-height: 0;    
} 
.arrow-left {    
    width: 0;     
    height: 0;     
    border-bottom: 15px solid transparent;
    border-top: 15px solid transparent;
    border-left: 15px solid #FFD700; 
    font-size: 0;    
    line-height: 0;    
} 
.nex{
	top:1.375rem;
	margin-left:1.25rem;
	margin-right:1.25rem;
	float: left;
	position: relative;
}
div{
	position:relative;
}
.disabled { 
	pointer-events: none; 
}
.tab-content .active{
	display:block;
}
.tab-content > div{
	padding:3.75rem;
	display:none;
}
.tab-content {
	height:20rem;
	background: #612e76;
}

本文标题：一个简单的可左右移动的标签栏

本文链接：https://iceprosurface.com/2016/03/25/2016/2016-03-25-tab-js/index.html

作者授权：除特别说明外，本文由 icepro 原创编译并授权刊载发布。