文档

Mocha使用好帮手

tab(选项卡)

作者：sonichuang
版本：v.1
依赖：mocha.css zepto.js motion

点击运行Demo

样式1 .mocha-tab-scheme1

  • 页签1
  • 页签2
  • 页签3
  • 页签4

页签1内容区

页签2内容区

页签3内容区

页签4内容区


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<div id="tabBox1" class="mocha-tab mocha-tab-scheme1 mocha-tab-skin1">
	<div class="mocha-tab-triggers">
		<ul class="mocha-tab-triggers-ul">
			<li class="current">页签1</li>
			<li>页签2</li>
			<li>页签3</li>
			<li>页签4</li>
		</ul>
	</div>
	<div class="mocha-tab-panels">
		<div class="mocha-tab-panel" style="display:block">
			<p>页签1内容区</p>
		</div>
		<div class="mocha-tab-panel">
			<p>页签2内容区</p>
		</div>
		<div class="mocha-tab-panel">
			<p>页签3内容区</p>
		</div>
		<div class="mocha-tab-panel">
			<p>页签4内容区</p>
		</div>
	</div>
</div>
<script src="http://game.gtimg.cn/images/js/zepto/zepto.min.js"></script>
<!-- 实例化:【点击式选择卡】 -->
<script src="http://game.gtimg.cn/images/js/motion/tab.min.js"></script>
<script>
$(function(){
	window.tab1 = new mo.Tab({
		target: $('#tabBox1 div.mocha-tab-panel'),
		controller: $('#tabBox1 .mocha-tab-triggers-ul li'),
		lazy: true
	});
});
</script>

样式2 .mocha-tab-scheme2

  • 页签1
  • 页签2
  • 页签3
  • 页签4

页签1内容区

页签2内容区

页签3内容区

页签4内容区


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<div id="tabBox2" class="mocha-tab mocha-tab-scheme2 mocha-tab-skin1">
	<div class="mocha-tab-triggers">
		<ul class="mocha-tab-triggers-ul">
			<li class="current">页签1</li>
			<li>页签2</li>
			<li>页签3</li>
			<li>页签4</li>
		</ul>
	</div>
	<div class="mocha-tab-panels">
		<div class="mocha-tab-panel" style="display:block">
			<p>页签1内容区</p>
		</div>
		<div class="mocha-tab-panel">
			<p>页签2内容区</p>
		</div>
		<div class="mocha-tab-panel">
			<p>页签3内容区</p>
		</div>
		<div class="mocha-tab-panel">
			<p>页签4内容区</p>
		</div>
	</div>
</div>
<script src="http://game.gtimg.cn/images/js/zepto/zepto.min.js"></script>
<!-- 实例化:【滑动式选择卡】 -->
<script src="http://game.gtimg.cn/images/js/motion/slide.v2.0.min.js"></script>
<script>
	$('#tabBox2 div.mocha-tab-panels').css("height",100);	//指定slider内容区高度
	tab2 = new mo.Slide({
		target: $('#tabBox2 div.mocha-tab-panel'),
		controller: $('#tabBox2 .mocha-tab-triggers-ul li'),
		direction: 'x',
		effect: 'slide',
		circle: true,
		autoPlay: false
	})	
</script>

tab实例化JS

【点击式选择卡】依赖zepto.js和motion的tab组件
【滑动式选择卡】依赖zepto.js和motion的slide组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script src="http://game.gtimg.cn/images/js/zepto/zepto.min.js"></script>
<!-- 实例化:【点击式选择卡】 -->
<script src="http://game.gtimg.cn/images/js/motion/tab.min.js"></script>
<script>
$(function(){
	window.tab1 = new mo.Tab({
		target: $('#tabBox1 div.mocha-tab-panel'),
		controller: $('#tabBox1 .mocha-tab-triggers-ul li'),
		lazy: true
	});
});
</script>
<!-- 实例化:【滑动式选择卡】 -->
<script src="http://game.gtimg.cn/images/js/motion/slide.v2.0.min.js"></script>
<script>
	$('#tabBox2 div.mocha-tab-panels').css("height",100);	//指定slider内容区高度
	tab2 = new mo.Slide({
		target: $('#tabBox2 div.mocha-tab-panel'),
		controller: $('#tabBox2 .mocha-tab-triggers-ul li'),
		direction: 'x',
		effect: 'slide',
		circle: true,
		autoPlay: false
	})	
</script>

修改模块皮肤CSS

模块的默认皮肤类.mocha-tab-skin1，您可以在您项目的page.css里修改.mocha-tab-skin1皮肤类，或者新增.mocha-tab-skin2。

1
2
3
4
5
/* skin */
.mocha-tab-skin1{font-size:0.16rem;}
.mocha-tab-skin1 .mocha-tab-triggers{background-color: #ddd;}
.mocha-tab-scheme1.mocha-tab-skin1 .mocha-tab-triggers-ul .current{color: #fff;background-color: #09f;border-left:none;}
.mocha-tab-scheme2.mocha-tab-skin1 .mocha-tab-triggers-ul .current{color: #09f;font-weight: bold;border-color:#09f;}