响应式tab选项卡插件Responsive-Tabs

一款响应式tab选项卡插件Responsive-Tabs，根据设定的窗口像素可以自动在正常样式和手风琴样式之间切换，自适应的效果还时挺自然的，喜欢的童鞋请收下吧。

分类：选项卡/滑动门 > 滑动手风琴难易：初级

查看演示下载资源下载积分： 30 积分

<link rel="stylesheet" href="css/responsive-tabs.css">
<style type="text/css">
body {
	background: #fff;
	color: #333;
	padding:15px 20px;
	font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
	line-height: 1.5em;
}
a { color: #0496b6}
h1, h2 { margin: 1em 0 1.5em 0; color: #0f556f}
.tabs h1, .tabs h2 { color: #333; margin-bottom: 1.1em;}
.tabs ul, .tabs ol, .tabs p { margin-top:0; padding-top: 1em;}
.tabs ul li, .tabs ol li { margin-bottom: 0.5em;}
hgroup h1 { margin-bottom:0; margin-top:0; line-height: 1.2em;}
hgroup h2 { font-size: 1.1em; font-weight: normal; position: absolute; top: 16px; right:20px;}
.btn { display: block; float: left;  padding: 10px 15px; background: #0496b6; font-size: 1.5em; color: #fff; font-weight: bold; text-decoration: none; border-radius: 5px;  text-align: center; box-shadow: 2px 2px 2px #eee;}
.btn:hover { background: #3cb7d3}
.clearfix {
  *zoom: 1;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.intro { margin: 20px 0; background: #c9f6f9; border: 1px solid #ccc; box-shadow: 2px 2px 2px #eee; padding: 5px 15px 10px 15px; }
p.demo-intro { font-size: 1.2em; margin-bottom: -0.5em; font-weight: bold; }

@media (max-width: 767px) {
	hgroup h1 { margin-top: 25px;}
	hgroup h2 { top: 0; left: 5px; font-size:12px;}
 	.btn { width: 80%; margin: 20px auto; float:none;}
}
</style>

页面的body部分，结构并不复杂，先时插件的说明文字放入一个div容器里，接着不同的选项内容分别放入不同的div容器里即可，代码如下：

<hgroup>
	<h1>响应式Tab选项卡</h1>
</hgroup>
<div class="intro">
	<p class="demo-intro">本例中, 样式自动调整的宽度为 <strong>768像素</strong>。</p>
	<p>页面宽度低于768像素时自动变为手风琴样式。<br/>页面宽度为768像素及以上时，自动变为正常的Tab样式。</p>
</div>

<div class="responsive-tabs">
	<h2>要求</h2>
	<div>
		<ul>
			<li>第一个阶段，是做出要求，对宇宙发出指令，让宇宙了解你想要些什么，宇宙就会自动回应你的想法。</li>
			<li>这是一个很有意思的过程，就好比把宇宙当成一本货物的目录，你翻着它，然后决定“我要经历这个，我要那种东西，我要跟那种人一起生活”，你就是那个跟宇宙下订单的人。</li>
			<li>其实就是这样简单。</li>
		</ul>
	</div>
	<h2>信念</h2>
	<div>
		<ol>
			<li>第二步是信念。你要相信你已经拥有它了。要有一种毫不动摇的信念，就是我的说法，要相信还没有实现的事，“你的愿望就是我的命令”，宇宙就会开始运作安排，从而满足你心中的愿望。</li>
			<li>大多数的时候，假如我们要求的事物没有出现在生活中，我们会感到沮丧和失望，我们甚至会开始怀疑，这种怀疑会让人感到心灰意冷。</li>
			<li>接受这个感觉，然后用坚定的信念代替它：“我知道……我知道……我知道……，它就要实现了。”</li>
		</ol>
	</div>
	<h2>接受</h2>
	<div>
		<p>第三步，就是这个过程最后一步，接受。开始感觉好极了，想想要是你想要的事物已经出现，那会是什么感觉。</p>
		<p>当你感觉好的时候，你就是把自己和你要的事物放在同一个频率上。尝试去做一切你能做的事，帮助自己具有拥有它们的感觉。无论你能做什么，只要去做，就有助于把这些东西吸引过来。</p>
	</div>
</div>

页面的底部，需引入jQuery库和responsiveTabs插件，并启用插件，代码如下：

<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/responsiveTabs.js"></script>
<script>
$(document).ready(function() {
	RESPONSIVEUI.responsiveTabs();
})
</script>