文档

Mocha使用好帮手

gift(领取礼包模块)

作者：kevinhehe
版本：v.1
依赖：mocha.css

点击运行Demo

样式1-1行1个 .mocha-gift-scheme1


1
2
3
4
5
6
7
8
9
10
11
<div class="mocha-gift mocha-gift-scheme1 mocha-gift-skin1">
    <ul>
        <li>
            <div class="mocha-gift-box">
                <img src="http://dummyimage.com/290x107/000/fff" width="100%" height="100%" alt="">
            </div>
            <p>礼品x1</p>
            <a href="javascript:;" class="mocha-gift-btn">领取礼包</a>
        </li>
    </ul>
</div>

样式2-1行2个 .mocha-gift-scheme2


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="mocha-gift mocha-gift-scheme2 mocha-gift-skin1">
    <ul>
        <li>
            <div class="mocha-gift-box">
                <img src="http://dummyimage.com/290x107/000/fff" width="100%" height="100%" alt="">
            </div>
            <p>礼品x1</p>
            <a href="javascript:;" class="mocha-gift-btn">领取礼包</a>
        </li>
        <li>
            <div class="mocha-gift-box">
                <img src="http://dummyimage.com/290x107/000/fff" width="100%" height="100%" alt="">
            </div>
            <p>礼品x1</p>
            <a href="javascript:;" class="mocha-gift-btn">领取礼包</a>
        </li>
    </ul>
</div>

样式3-1行3个 .mocha-gift-scheme3


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
<div class="mocha-gift mocha-gift-scheme3 mocha-gift-skin1">
    <ul>
        <li>
            <div class="mocha-gift-box">
                <img src="http://dummyimage.com/290x107/000/fff" width="100%" height="100%" alt="">
            </div>
            <p>礼品x1</p>
            <a href="javascript:;" class="mocha-gift-btn">领取礼包</a>
        </li>
        <li>
            <div class="mocha-gift-box">
                <img src="http://dummyimage.com/290x107/000/fff" width="100%" height="100%" alt="">
            </div>
            <p>礼品x1</p>
            <a href="javascript:;" class="mocha-gift-btn">领取礼包</a>
        </li>
        <li>
            <div class="mocha-gift-box">
                <img src="http://dummyimage.com/290x107/000/fff" width="100%" height="100%" alt="">
            </div>
            <p>礼品x1</p>
            <a href="javascript:;" class="mocha-gift-btn">领取礼包</a>
        </li>
    </ul>
</div>

样式4-1行4个 .mocha-gift-scheme4


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
<div class="mocha-gift mocha-gift-scheme4 mocha-gift-skin1">
    <ul>
        <li>
            <div class="mocha-gift-box">
                <img src="http://dummyimage.com/290x107/000/fff" width="100%" height="100%" alt="">
            </div>
            <p>礼品x1</p>
            <a href="javascript:;" class="mocha-gift-btn">领取礼包</a>
        </li>
        <li>
            <div class="mocha-gift-box">
                <img src="http://dummyimage.com/290x107/000/fff" width="100%" height="100%" alt="">
            </div>
            <p>礼品x1</p>
            <a href="javascript:;" class="mocha-gift-btn">领取礼包</a>
        </li>
        <li>
            <div class="mocha-gift-box">
                <img src="http://dummyimage.com/290x107/000/fff" width="100%" height="100%" alt="">
            </div>
            <p>礼品x1</p>
            <a href="javascript:;" class="mocha-gift-btn">领取礼包</a>
        </li>
        <li>
            <div class="mocha-gift-box">
                <img src="http://dummyimage.com/290x107/000/fff" width="100%" height="100%" alt="">
            </div>
            <p>礼品x1</p>
            <a href="javascript:;" class="mocha-gift-btn">领取礼包</a>
        </li>
    </ul>
</div>

样式5-上图下字和一按钮 ,.mocha-gift-scheme1~3控制每行显示礼包的数量 (1到3个)，.mocha-gift-scheme5控制的是上图下字。以上图为例，需添加.mocha-gift-scheme3+.mocha-gift-scheme5方可实现。

  • 礼品礼品礼品礼品礼品礼品x1

  • 礼品x1

  • 礼品x1

  • 礼品x1

  • 礼品x1

  • 礼品x1

领取礼包

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
39
40
41
<div class="mocha-gift mocha-gift-scheme3 mocha-gift-scheme5 mocha-gift-skin1">
    <ul>
        <li>
            <div class="mocha-gift-box">
                <img src="http://dummyimage.com/290x107/000/fff" width="100%" height="100%" alt="">
            </div>
            <p>礼品礼品礼品礼品礼品礼品x1</p>
        </li>
        <li>
            <div class="mocha-gift-box">
                <img src="http://dummyimage.com/290x107/000/fff" width="100%" height="100%" alt="">
            </div>
            <p>礼品x1</p>
        </li>
        <li>
            <div class="mocha-gift-box">
                <img src="http://dummyimage.com/290x107/000/fff" width="100%" height="100%" alt="">
            </div>
            <p>礼品x1</p>
        </li>
        <li>
            <div class="mocha-gift-box">
                <img src="http://dummyimage.com/290x107/000/fff" width="100%" height="100%" alt="">
            </div>
            <p>礼品x1</p>
        </li>
        <li>
            <div class="mocha-gift-box">
                <img src="http://dummyimage.com/290x107/000/fff" width="100%" height="100%" alt="">
            </div>
            <p>礼品x1</p>
        </li>
        <li>
            <div class="mocha-gift-box">
                <img src="http://dummyimage.com/290x107/000/fff" width="100%" height="100%" alt="">
            </div>
            <p>礼品x1</p>
        </li>
    </ul>
    <a href="javascript:;" class="mocha-gift-btn">领取礼包</a>
</div>

样式6-礼包签到,在样式4的基础上对li添加类名.act为当前标识样式，对按钮添加类名.mocha-gift-btn-disabled为按钮灰化样式。

  • 第一天

    礼品礼品礼品礼品礼品礼品x1

  • 第二天

    礼品x1

  • 第三天

    礼品x1

  • 第四天

    礼品x1

  • 第五天

    礼品x1

领取礼包

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
39
40
<div class="mocha-gift mocha-gift-scheme3 mocha-gift-scheme5 mocha-gift-skin1">
    <ul>
        <li class="act">
            <p>第一天</p>
            <div class="mocha-gift-box">
                <img src="http://dummyimage.com/290x107/000/fff" width="100%" height="100%" alt="">
            </div>
            <p>礼品礼品礼品礼品礼品礼品x1</p>
        </li>
        <li class="act">
            <p>第二天</p>
            <div class="mocha-gift-box">
                <img src="http://dummyimage.com/290x107/000/fff" width="100%" height="100%" alt="">
            </div>
            <p>礼品x1</p>
        </li>
        <li>
            <p>第三天</p>
            <div class="mocha-gift-box">
                <img src="http://dummyimage.com/290x107/000/fff" width="100%" height="100%" alt="">
            </div>
            <p>礼品x1</p>
        </li>
        <li>
            <p>第四天</p>
            <div class="mocha-gift-box">
                <img src="http://dummyimage.com/290x107/000/fff" width="100%" height="100%" alt="">
            </div>
            <p>礼品x1</p>
        </li>
        <li>
            <p>第五天</p>
            <div class="mocha-gift-box">
                <img src="http://dummyimage.com/290x107/000/fff" width="100%" height="100%" alt="">
            </div>
            <p>礼品x1</p>
        </li>
    </ul>
    <a href="javascript:;" class="mocha-gift-btn mocha-gift-btn-disabled">领取礼包</a>
</div>

修改模块皮肤CSS

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

1
2
3
4
5
6
7
8
9
10
11
12
13
/* skin */
.mocha-gift-scheme1 li{width: 100%;}
.mocha-gift-scheme1 li:last-child{margin-right: 0;}
.mocha-gift-scheme2 li{width: 48.25%;}
.mocha-gift-scheme2 li:nth-child(even){margin-right: 0;}
.mocha-gift-scheme3 li{width: 31%;}
.mocha-gift-scheme3 li:nth-child(3n){margin-right: 0;}
.mocha-gift-scheme4 p{display: block;}
/* skin */
.mocha-gift-skin1{font-size: .16rem;}
.mocha-gift-skin1 p{font-size: .12rem;}
.mocha-gift-skin1 .mocha-gift-btn{font-size: .16rem;color: #fff;background-color: #04BE02;}
.mocha-gift-skin1 .mocha-gift-btn-disabled{background-color: #717171;}

audio(音频样式)

作者：kevinhehe
版本：v.1
依赖：mocha.css

点击运行Demo

样式1 .mocha-audio-scheme1

样式1

1
2
3
4
5
6
7
8
<div class="mocha-audio mocha-audio-scheme1 mocha-audio-skin1">
    <a id="mochaAudioPlay" class="mocha-audio-btn" href="javascript:;"><span class="mocha-audio-icon-play"></span></a>
    <a id="mochaAudioPause" class="mocha-audio-btn" href="javascript:;" style="display:none;"><span class="mocha-audio-icon-pause"></span></a>
    <div class="mocha-audio-info">
        <p>音频名称 3'33"</p>
        <p>音频简介内容</p>
    </div>
</div>

audio实例化JS

依赖zepto.js组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script src="http://game.gtimg.cn/images/js/zepto/zepto.min.js"></script>
<script>
    (function mochaAudioFunc(){
        $("#mochaAudioPlay").bind("tap",function(){
            $(this).css("display","none");
            $("#mochaAudioPause").css("display","inline-block");
        })
        $("#mochaAudioPause").bind("tap",function(){
            $(this).css("display","none");
            $("#mochaAudioPlay").css("display","inline-block");
        })
    })()
</script>
</script>

修改模块皮肤CSS

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

1
2
3
4
5
/* skin */
.mocha-audio-skin1{font-size: .16rem;}
.mocha-audio-skin1 .mocha-audio-btn{background-color: #3f3f3f;}
.mocha-audio-skin1 .mocha-audio-icon-play{border-left-color:#fff;}
.mocha-audio-skin1 .mocha-audio-icon-pause{background: linear-gradient(90deg, #fff 37%, transparent 37%, transparent 63%, #fff 63%);}

pictxt-list(图文列表)

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

点击运行Demo

样式1-上图下文.mocha-pic-list-scheme1

正常图片情况


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
<div class="mocha-pictxt-list mocha-pictxt-list-scheme1 mocha-pictxt-list-skin1">
	<ul class="mocha-pictxt-list-ul">
		<li class="mocha-ptlu-item">
			<a href="" class="mocha-ptlu-item-a">
				<img width="100%" src="http://dummyimage.com/400x250/222/fff.png&amp;text=&lt;img&gt;" alt="" class="pic">
				<h4>视频标题显示在这里视频标题显示在这里</h4>
			</a>
			<p class="mocha-ptlu-item-meta"><time>2015-11-17</time></p>
		</li>
		<li class="mocha-ptlu-item">
			<a href="" class="mocha-ptlu-item-a">
				<img width="100%" src="http://dummyimage.com/400x250/222/fff.png&amp;text=&lt;img&gt;" alt="" class="pic">
				<h4>视频标题显示在这里</h4>
			</a>
			<p class="mocha-ptlu-item-meta"><time>2015-11-17</time></p>
		</li>
		<li class="mocha-ptlu-item">
			<a href="" class="mocha-ptlu-item-a">
				<img width="100%" src="http://dummyimage.com/400x250/222/fff.png&amp;text=&lt;img&gt;" alt="" class="pic">
				<h4>视频标题显示在这里</h4>
			</a>
			<p class="mocha-ptlu-item-meta"><time>2015-11-17</time></p>
		</li>
		<li class="mocha-ptlu-item">
			<a href="" class="mocha-ptlu-item-a">
				<img width="100%" src="http://dummyimage.com/400x250/222/fff.png&amp;text=&lt;img&gt;" alt="" class="pic">
				<h4>视频标题显示在这里</h4>
			</a>
			<p class="mocha-ptlu-item-meta"><time>2015-11-17</time></p>
		</li>
	</ul>
</div>

视频截图情况


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="mocha-pictxt-list mocha-pictxt-list-scheme1 mocha-pictxt-list-skin1">
	<ul class="mocha-pictxt-list-ul">
		<li class="mocha-ptlu-item">
			<a href="" class="mocha-ptlu-item-a">
				<img width="100%" src="http://dummyimage.com/400x250/222/fff.png&text=<img>" alt="" class="pic" />
				<i class="icon-play"></i>
				<h4>视频标题显示在这里视频标题显示在这里</h4>
			</a>
			<p class="mocha-ptlu-item-meta"><time>2015-11-17</time></p>
		</li>
		<li class="mocha-ptlu-item">
			<a href="" class="mocha-ptlu-item-a">
				<img width="100%" src="http://dummyimage.com/400x250/222/fff.png&text=<img>" alt="" class="pic" />
				<i class="icon-play"></i>
				<h4>视频标题显示在这里</h4>
			</a>
			<p class="mocha-ptlu-item-meta"><time>2015-11-17</time></p>
		</li>
	</ul>
</div>

样式2-左图右文.mocha-pic-list-scheme2


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
<div class="mocha-pictxt-list mocha-pictxt-list-scheme2 mocha-pictxt-list-skin1">
	<ul class="mocha-pictxt-list-ul">
		<li class="mocha-ptlu-item">
			<a href="" class="mocha-ptlu-item-a">
				<img width="100%" src="http://dummyimage.com/400x250/222/fff.png&text=<img>" alt="" class="pic" />
				<h4>视频标题显示在这里视频标题显示在这里视频标题显示在这里</h4>
			</a>
			<p class="mocha-ptlu-item-meta">
				<time>2015-11-17</time>
				<span>其它相关信息</span>
			</p>
			<p class="mocha-ptlu-item-meta">
				<span>分类：公告</span>
			</p>
		</li>
		<li class="mocha-ptlu-item">
			<a href="" class="mocha-ptlu-item-a">
				<img width="100%" src="http://dummyimage.com/400x250/222/fff.png&text=<img>" alt="" class="pic" />
				<h4>视频标题显示在这里</h4>
			</a>
			<p class="mocha-ptlu-item-meta">
				<time>2015-11-17</time>
				<span>其它相关信息</span>
			</p>
			<p class="mocha-ptlu-item-meta">
				<span>分类：公告</span>
			</p>
		</li>
	</ul>
</div>

样式3-左图右文+按钮.mocha-pic-list-scheme3


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
<div class="mocha-pictxt-list mocha-pictxt-list-scheme3 mocha-pictxt-list-skin1">
	<ul class="mocha-pictxt-list-ul">
		<li class="mocha-ptlu-item">
			<a href="" class="mocha-ptlu-item-a">
				<img width="80" height="80" src="http://dummyimage.com/160x160/222/fff.png&text=<img>" alt="" class="pic" />
				<h4>标题显示在此（5个）</h4>
			</a>
			<p class="mocha-ptlu-item-meta">
				<span>消耗荣誉点：<em>150</em></span>
				<span>剩余数量：<em>9999</em></span>
			</p>
			<div class="mocha-ptlu-item-btn">
				<a href="" class="mocha-button mocha-button-scheme1 mocha-button-skin1">兑换</a>
			</div>
		</li>
		<li class="mocha-ptlu-item">
			<a href="" class="mocha-ptlu-item-a">
				<img width="80" height="80" src="http://dummyimage.com/160x160/222/fff.png&text=<img>" alt="" class="pic" />
				<h4>标题显示在此（5个）</h4>
			</a>
			<p class="mocha-ptlu-item-meta">
				<span>消耗荣誉点：<em>150</em></span>
				<span>剩余数量：<em>9999</em></span>
			</p>
			<div class="mocha-ptlu-item-btn">
				<a href="" class="mocha-button mocha-button-scheme1 mocha-button-skin1">兑换</a>
			</div>
		</li>
	</ul>
</div>

修改模块皮肤CSS

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

1
2
3
4
5
/* skin */
.mocha-pictxt-list-skin1{font-size:0.14rem;}
.mocha-pictxt-list-skin1 .mocha-ptlu-item h4{color: #333;}
.mocha-pictxt-list-skin1 .mocha-ptlu-item-meta{color: #999;}
.mocha-pictxt-list-skin1.mocha-pictxt-list-scheme2 .mocha-ptlu-item{border-bottom-color:#ddd;}

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;}

dialog(弹层)

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

点击运行Demo

样式1-有标题及按钮 .mocha-dialog-scheme1

×

样式1-有标题及按钮

{模块内容}

{模块内容}

按钮文字按钮文字

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="demoDialog1" class="mocha-dialog mocha-dialog-scheme1 mocha-dialog-skin1" style="display:none">
	<div class="mocha-dialog-mark"></div>
	<div class="mocha-dialog-box">
		<a href="javascript:;" class="mocha-dialog-close">&times;</a>
		<div class="mocha-dialog-hd">
			<h3 class="mocha-dialog-hd-title">样式1-有标题及按钮</h3>
		</div>
		<div class="mocha-dialog-bd">
			<p>{模块内容}</p>
			<p>{模块内容}</p>
		</div>
		<div class="mocha-dialog-fd">
			<a href="#" class="mocha-box-fd-btn">按钮文字</a>
			<a href="#" class="mocha-box-fd-btn">按钮文字</a>
		</div>
	</div>
</div>

样式2-无标题及按钮 .mocha-dialog-scheme2

×

{模块内容-无标题及按钮}


1
2
3
4
5
6
7
8
9
<div id="demoDialog2" class="mocha-dialog mocha-dialog-scheme2 mocha-dialog-skin1" style="display:none;">
	<div class="mocha-dialog-mark"></div>
	<div class="mocha-dialog-box">
		<a href="javascript:;" class="mocha-dialog-close">&times;</a>
		<div class="mocha-dialog-bd">
			<p>{模块内容-无标题及按钮}</p>
		</div>
	</div>
</div>

二维码浮层 .mocha-dialog-scheme2

×

长按识别二维码

关注XXXX官方公众号


1
2
3
4
5
6
7
8
9
10
11
<div id="demoDialog3" class="mocha-dialog mocha-dialog-scheme2 mocha-dialog-skin1" style="display:none;">
	<div class="mocha-dialog-mark"></div>
	<div class="mocha-dialog-box">
		<a href="javascript:;" class="mocha-dialog-close">&times;</a>
		<div class="mocha-dialog-bd">
			<p><img width="200" height="200" src="http://ui.code.oa.com/files/image/201503/20150313112541495.png" alt=""></p>
			<p>长按识别二维码</p>
			<p>关注XXXX官方公众号</p>
		</div>
	</div>
</div>

修改模块皮肤CSS

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

1
2
3
4
5
6
7
8
9
/* skin */
	.mocha-dialog-skin1{font-size:0.16rem;}
	.mocha-dialog-skin1 .mocha-dialog-box{background-color: #fff;}
	.mocha-dialog-skin1 .mocha-dialog-hd{background-color: #ddd;}
	.mocha-dialog-skin1 .mocha-dialog-close{color: #666;}
	.mocha-dialog-skin1 .mocha-dialog-close:active{color: #333;}
	.mocha-dialog-skin1 .mocha-box-fd-btn{background-color: #ddd;color: #333;font-size:0.16rem;}
	.mocha-dialog-scheme2.mocha-dialog-skin1 .mocha-dialog-box{background:none;color: #fff;}
	.mocha-dialog-scheme2.mocha-dialog-skin1 .mocha-dialog-close{color: #ccc;}

box(盒模块)

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

点击运行Demo

样式1 .mocha-box-scheme1

模块标题

{模块内容显示区}

查看更多>

1
2
3
4
5
6
7
8
9
10
11
<div class="mocha-box mocha-box-scheme1 mocha-box-skin1">
	<div class="mocha-box-hd">
		<h3 class="mocha-box-hd-title">模块标题</h3>
	</div>
	<div class="mocha-box-bd">
		<p>{模块内容显示区}</p>
	</div>
	<div class="mocha-box-fd">
		<a href="#" class="mocha-box-fd-more">查看更多&gt;</a>
	</div>
</div>

修改模块皮肤CSS

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

1
2
3
4
5
/* skin */
.mocha-box-skin1{font-size:0.16rem;color: #666;}
.mocha-box-skin1 .mocha-box-hd{background-color: #ddd;}
.mocha-box-skin1 .mocha-box-fd{border-top-color:#ddd;}
.mocha-box-skin1 .mocha-box-fd-more{color:#666;}

test-list(文本列表)

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

点击运行Demo

样式1-带图标 .mocha-txt-list-scheme1


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="mocha-txt-list mocha-txt-list-scheme1 mocha-txt-list-skin1">
	<ul class="mocha-txt-list-ul">
		<li class="mocha-tlu-item">
			<cite class="mocha-tlu-item-icon style1">公告</cite>
			<h4 class="mocha-tlu-item-title"><a href="#">11月新八本本爆料：木桩世界BOSS</a></h4>
			<p class="mocha-tlu-item-meta"><em>我叫MT运营团队</em><time>11/03</time></p>
		</li>
		<li class="mocha-tlu-item">
			<cite class="mocha-tlu-item-icon">公告</cite>
			<h4 class="mocha-tlu-item-title"><a href="#">11月新八本本爆料：木桩世界BOSS</a></h4>
			<p class="mocha-tlu-item-meta"><em>我叫MT运营团队</em><time>11/03</time></p>
		</li>
		<li class="mocha-tlu-item">
			<cite class="mocha-tlu-item-icon">公告</cite>
			<h4 class="mocha-tlu-item-title"><a href="#">11月新八本本爆料：木桩世界BOSS</a></h4>
			<p class="mocha-tlu-item-meta"><em>我叫MT运营团队</em><time>11/03</time></p>
		</li>
	</ul>
</div>

样式2 不带图标 .mocha-txt-list-scheme2


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="mocha-txt-list mocha-txt-list-scheme2 mocha-txt-list-skin1">
	<ul class="mocha-txt-list-ul">
		<li class="mocha-tlu-item">
			<cite class="mocha-tlu-item-icon style1">公告</cite>
			<h4 class="mocha-tlu-item-title"><a href="#">11月新八本本爆料：木桩世界BOSS</a></h4>
			<p class="mocha-tlu-item-meta"><em>我叫MT运营团队</em><time>11/03</time></p>
		</li>
		<li class="mocha-tlu-item">
			<cite class="mocha-tlu-item-icon">公告</cite>
			<h4 class="mocha-tlu-item-title"><a href="#">11月新八本本爆料：木桩世界BOSS</a></h4>
			<p class="mocha-tlu-item-meta"><em>我叫MT运营团队</em><time>11/03</time></p>
		</li>
		<li class="mocha-tlu-item">
			<cite class="mocha-tlu-item-icon">公告</cite>
			<h4 class="mocha-tlu-item-title"><a href="#">11月新八本本爆料：木桩世界BOSS</a></h4>
			<p class="mocha-tlu-item-meta"><em>我叫MT运营团队</em><time>11/03</time></p>
		</li>
	</ul>
</div>

样式3 显示一行 .mocha-txt-list-scheme3


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="mocha-txt-list mocha-txt-list-scheme3 mocha-txt-list-skin1">
	<ul class="mocha-txt-list-ul">
		<li class="mocha-tlu-item">
			<span class="mocha-tlu-item-sup"><a href="#">[玩家社区]</a></span>
			<h4 class="mocha-tlu-item-title"><a href="#">11月新八本本爆料：木桩世界BOSS</a></h4>
			<p class="mocha-tlu-item-meta"><time>11/03</time></p>
		</li>
		<li class="mocha-tlu-item">
			<span class="mocha-tlu-item-sup"><a href="#">[玩家社区]</a></span>
			<h4 class="mocha-tlu-item-title"><a href="#">11月新八本本爆料：木桩世界BOSS</a></h4>
			<p class="mocha-tlu-item-meta"><time>11/03</time></p>
		</li>
		<li class="mocha-tlu-item">
			<span class="mocha-tlu-item-sup"><a href="#">[玩家社区]</a></span>
			<h4 class="mocha-tlu-item-title"><a href="#">11月新八本本爆料：木桩世界BOSS</a></h4>
			<p class="mocha-tlu-item-meta"><time>11/03</time></p>
		</li>
	</ul>
</div>

修改模块皮肤CSS

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

1
2
3
4
5
6
7
/* skin */
.mocha-txt-list-skin1{font-size:0.14rem;}
.mocha-txt-list-skin1 a:link,.mocha-txt-list-skin1 a:visited{color: #666;}
.mocha-txt-list-skin1 .mocha-tlu-item{border-bottom: 1px solid #ddd;}
.mocha-txt-list-skin1 .mocha-tlu-item-meta{color: #999;}
.mocha-txt-list-skin1 .mocha-tlu-item-icon{color: #fff;background-color: #00c2f5;}
.mocha-txt-list-skin1 .mocha-tlu-item-icon.style1{background-color: #f97d01;}

button(按钮)

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

点击运行Demo

1行1个按钮 .mocha-button-scheme1

主按钮


1
2
3
<p>
	<a href="javascript:;" class="mocha-button mocha-button-scheme1 mocha-button-skin1">主按钮</a>
</p>

1行2个按钮 .mocha-button-scheme2

次按钮1次按钮2


1
2
3
4
<p>
	<a href="javascript:;" class="mocha-button mocha-button-scheme2 mocha-button-skin1">次按钮1</a>
	<a href="javascript:;" class="mocha-button mocha-button-scheme2 mocha-button-skin1">次按钮2</a>
</p>

1行3个按钮 .mocha-button-scheme3

次按钮1次按钮2次按钮3


1
2
3
4
5
<p>
	<a href="javascript:;" class="mocha-button mocha-button-scheme3 mocha-button-skin1">次按钮1</a>
	<a href="javascript:;" class="mocha-button mocha-button-scheme3 mocha-button-skin1">次按钮2</a>
	<a href="javascript:;" class="mocha-button mocha-button-scheme3 mocha-button-skin1 mocha-button-disable">次按钮3</a>
</p>

1行3个以上按钮 .mocha-button-scheme4

按钮1按钮2按钮3按钮4


1
2
3
4
5
6
<p>
	<a href="javascript:;" class="mocha-button mocha-button-scheme4 mocha-button-skin1">按钮1</a>
	<a href="javascript:;" class="mocha-button mocha-button-scheme4 mocha-button-skin1">按钮2</a>
	<a href="javascript:;" class="mocha-button mocha-button-scheme4 mocha-button-skin1">按钮3</a>
	<a href="javascript:;" class="mocha-button mocha-button-scheme4 mocha-button-skin1 mocha-button-disable">按钮4</a>
</p>

修改模块皮肤CSS

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

1
2
3
4
/* skin */
.mocha-button-skin1{font-size:0.16rem;color: #fff;background-color: #ee3e45;border-radius:0.032rem;box-shadow:inset 0 -0.03rem 0 #be3237;}
.mocha-button-skin1:active{background-color: #be3237;box-shadow:inset 0 0.03rem 0 #9d2c2c;}
.mocha-button-skin1.mocha-button-disable{background-color: #898989;box-shadow:inset 0 -0.03rem 0 #6f6f6f;}