文档

Mocha使用好帮手

Hello Mocha

Mocha介绍

访问地址：

demo http://tgideas.github.io/mocha/demo/
doc http://tgideas.github.io/mocha/docs/
githubhttps://github.com/tgideas/mocha/

介绍说明：

Mocha是TGideas官方设计团队，根据目前移动端官网、微官网、运营活动页面上经常出现的元素进行提取，量身打造的移动端页面UI样式库。统一的模块代码风格及公用CSS库，可以编码效率，帮助日常的移动端页面快速生成。目前包含的模块有：（红字为功能组件）

  • box（盒模块）
  • txt-list（文字列表）
  • button（按钮）
  • video（视频）
  • table（表格样式）
  • tab（选项卡）
  • slider（图片滑动）
  • sign-in（签到）
  • select（选单样式）
  • pictxt-list（图文列表）
  • pic-list（图片列表）
  • navigation（导航栏）
  • menu（功能栏）
  • lottery（抽奖）
  • loading（进度条）
  • gift（领取礼包）
  • dialog（弹出层）
  • countdown（倒计时）
  • comment（评论）
  • audio（音频）

使用优势：

  • 复制对应模块代码，快速构建移动端页面
    对于日常的运营专题，如下图，我们可以通过Navigation Button Lottery Gift 等模块来快速获取代码…

    对于微官网及内容站，页面上使用的模块可以归纳成： Slider Tab Box Pic-list Pictxt-list Button 等模块来快速获取代码…

    我们可以在Doc列表里找到相应的模块，查看使用方法并进行编码复制。

  • 整合Motion组件代码，方便功能驱动
    目前整合的组件有 Tab Slider Lottery…

video(视频模块)

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

点击运行Demo

样式1 .mocha-video-scheme1

样式1

1
<div id="mochaVideo" class="mocha-video mocha-video-scheme1 mocha-video-skin1"></div>

video实例化JS

依赖txplayer.js(v3)组件

1
2
3
4
5
6
7
8
9
10
11
<script src='//vm.gtimg.cn/tencentvideo/txp/js/txplayer.js'></script>
<script type="text/javascript">
var player = new Txplayer({
  containerId: 'mochaVideo',
  vid: 'r0018hmh1pa',
  width: '100%',
  height: '100%',
  // 自动播放
  autoplay: true
});
</script>

修改模块皮肤CSS

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

slider(slider模块)

作者：dereksu
版本：v.1
依赖：mocha.min.css slider.min.js

点击运行Demo

样式一（demo1）没有接入广告系统 .mocha-slider-scheme1


slider 样式一（demo1）

1
2
3
4
5
6
7
8
9
<div id="slider1" data-psdw="640" data-sliderw="640" data-sliderh="330" class="mocha-slider mocha-slider-scheme1 mocha-slider-skin1">
  <ul class="content">
    <li><a href='#'><img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/640x330.jpg" alt=""></a></li>
    <li><a href='#'><img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/640x330-2.jpg" alt=""></a></li>
    <li><a href='#'><img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/640x330-3.jpg" alt=""></a></li>
    <li><a href='#'><img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/640x330-4.jpg" alt=""></a></li>
    <li><a href='#'><img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/640x330-5.jpg" alt=""></a></li>
  </ul>
</div>


可以在您的css中覆盖.mocha-slider-scheme1.mocha-slider-skin1皮肤类
1
2
3
4
/* skin */
.mocha-slider-scheme1.mocha-slider-skin1 .controller{position:absolute;bottom:7px;right:10px;height:10px;text-align:right;}
.mocha-slider-scheme1.mocha-slider-skin1 .controller li{width:20px;height:4px;margin:3px;background-color:#8a8a8a;}
.mocha-slider-scheme1.mocha-slider-skin1 .controller li.current{background-color:#ffdb72;}


自定义属性说明
自定义属性说明
data-psdw设计稿宽度
data-sliderw滑动块宽度
data-sliderh滑动块高度


创建实例
1
2
3
4
5
6
7
8
9
10
11
//Slider初始化
Slider.init(function(slider) {
  //创建实例sliderObj.slider1
  slider.type(1, [{
    id: "slider1",
    callback: function() {
      console.log('slider1创建完成');
      sliderObj.slider1.play();
    }
  }]);
});


type(param1,parem2)参数描述
名称类型描述
param1Number数字代表Slider样式一~样式六（1-6）
param2Array数组存放一个或多个Object类型数据

{id:’’,callback:function(){}}
名称类型描述
idStringslider的id
callbackFunction实例化完成的回调方法

slider实例可使用的方法
名称类型描述
playFunction自动播放，如sliderObj.slider1.play();
playToFunction播放到第几个滑动块，如sliderObj.slider1.playTo(2);
stopFunction停止自动播放，如sliderObj.slider1.stop();
prevFunction播放前一个，如sliderObj.slider1.prev();
nextFunction播放后一个，如sliderObj.slider1.next();

样式一（demo2）有接入广告系统 .mocha-slider-scheme1


slider 样式一（demo2）

1
2
3
4
5
6
7
8
<div id="slider2" data-channelid="14482" data-showlink="true" data-tcssprefix="a20151208mocha.index.actshow1" data-psdw="640" data-sliderw="580" data-sliderh="300" class="mocha-slider mocha-slider-scheme1 mocha-slider-skin1">
  <ul class="content">
    <li data-posid="12359"></li>
    <li data-posid="12360"></li>
    <li data-posid="12361"></li>
    <li data-posid="12362"></li>
  </ul>
</div>


可以在您的css中覆盖.mocha-slider-scheme1.mocha-slider-skin1皮肤类
1
2
3
4
/* skin */
.mocha-slider-scheme1.mocha-slider-skin1 .controller{position:absolute;bottom:7px;right:10px;height:10px;text-align:right;}
.mocha-slider-scheme1.mocha-slider-skin1 .controller li{width:20px;height:4px;margin:3px;background-color:#8a8a8a;}
.mocha-slider-scheme1.mocha-slider-skin1 .controller li.current{background-color:#ffdb72;}


自定义属性说明
自定义属性说明
data-psdw设计稿宽度
data-sliderw滑动块宽度
data-sliderh滑动块高度
data-channelid频道ID，不配置data-channelid，将不读取广告系统数据 频道ID如http://game.qq.com/time/qqadv/Info_new_14482.js（14482）
data-showlinktrue/false，代表slider每一项是否有a标签链接，不配置默认为true
data-tcssprefixslider每一项的tcss点击流前缀，不配置将不添加点击流统计代码。格式如：a20151208mocha.index.actshow1
data-posid广告位ID


创建实例
1
2
3
4
5
6
7
8
9
10
11
//Slider初始化
Slider.init(function(slider) {
  //创建实例sliderObj.slider2
  slider.type(1, [{
    id: "slider2",
    callback: function() {
      console.log('slider2创建完成');
      sliderObj.slider2.play();
    }
  }]);
});


type(param1,parem2)参数描述
名称类型描述
param1Number数字代表Slider样式一~样式六（1-6）
param2Array数组存放一个或多个Object类型数据

{id:’’,callback:function(){}}
名称类型描述
idStringslider的id
callbackFunction实例化完成的回调方法

slider实例可使用的方法
名称类型描述
playFunction自动播放，如sliderObj.slider1.play();
playToFunction播放到第几个滑动块，如sliderObj.slider1.playTo(2);
stopFunction停止自动播放，如sliderObj.slider1.stop();
prevFunction播放前一个，如sliderObj.slider1.prev();
nextFunction播放后一个，如sliderObj.slider1.next();

样式二（demo1）没有接入广告系统 .mocha-slider-scheme2


slider 样式二（demo1）

1
2
3
4
5
6
7
8
9
<div id="slider3" data-psdw="640" data-sliderw="640" data-sliderh="330" class="mocha-slider mocha-slider-scheme2 mocha-slider-skin1">
  <ul class="content">
    <li><a href='#'><img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/640x330-6.jpg" alt=""></a></li>
    <li><a href='#'><img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/640x330-6.jpg" alt=""></a></li>
    <li><a href='#'><img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/640x330-6.jpg" alt=""></a></li>
    <li><a href='#'><img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/640x330-6.jpg" alt=""></a></li>
    <li><a href='#'><img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/640x330-6.jpg" alt=""></a></li>
  </ul>
</div>


可以在您的css中覆盖.mocha-slider-scheme2.mocha-slider-skin1皮肤类
1
2
3
4
/* skin */
.mocha-slider-scheme2.mocha-slider-skin1 .controller{position:absolute;bottom:7px;right:0;height:10px;text-align:center;}
.mocha-slider-scheme2.mocha-slider-skin1 .controller li{width:20px;height:4px;margin:3px;background-color:#8a8a8a;}
.mocha-slider-scheme2.mocha-slider-skin1 .controller li.current{background-color:#ffdb72;}


自定义属性说明
自定义属性说明
data-psdw设计稿宽度
data-sliderw滑动块宽度
data-sliderh滑动块高度


创建实例
1
2
3
4
5
6
7
8
9
10
11
12
//Slider初始化
Slider.init(function(slider) {
  //创建实例sliderObj.slider3
  slider.type(2, [{
    id: 'slider3',
    controllerH: 24,
    callback: function() {
      console.log('slider3创建完成');
      sliderObj.slider3.play();
    }
  }]);
});


type(param1,parem2)参数描述
名称类型描述
param1Number数字代表Slider样式一~样式六（1-6）
param2Array数组存放一个或多个Object类型数据

{id:’’,controllerH:0,callback:function(){}}
名称类型描述
idStringslider的id
controllerHNumberslider底部controller多余的高度（实际值）
callbackFunction实例化完成的回调方法

slider实例可使用的方法
名称类型描述
playFunction自动播放，如sliderObj.slider1.play();
playToFunction播放到第几个滑动块，如sliderObj.slider1.playTo(2);
stopFunction停止自动播放，如sliderObj.slider1.stop();
prevFunction播放前一个，如sliderObj.slider1.prev();
nextFunction播放后一个，如sliderObj.slider1.next();

样式二（demo2）有接入广告系统 .mocha-slider-scheme2


slider 样式二（demo2）

1
2
3
4
5
6
7
8
<div id="slider4" data-channelid="14482" data-showlink="true" data-tcssprefix="a20151208mocha.index.actshow2" data-psdw="640" data-sliderw="580" data-sliderh="300" class="mocha-slider mocha-slider-scheme2 mocha-slider-skin1">
  <ul class="content">
    <li data-posid="12359"></li>
    <li data-posid="12360"></li>
    <li data-posid="12361"></li>
    <li data-posid="12362"></li>
  </ul>
</div>


可以在您的css中覆盖.mocha-slider-scheme2.mocha-slider-skin1皮肤类
1
2
3
4
/* skin */
.mocha-slider-scheme2.mocha-slider-skin1 .controller{position:absolute;bottom:7px;right:0;height:10px;text-align:center;}
.mocha-slider-scheme2.mocha-slider-skin1 .controller li{width:20px;height:4px;margin:3px;background-color:#8a8a8a;}
.mocha-slider-scheme2.mocha-slider-skin1 .controller li.current{background-color:#ffdb72;}


自定义属性说明
自定义属性说明
data-psdw设计稿宽度
data-sliderw滑动块宽度
data-sliderh滑动块高度
data-channelid频道ID，不配置data-channelid，将不读取广告系统数据 频道ID如http://game.qq.com/time/qqadv/Info_new_14482.js（14482）
data-showlinktrue/false，代表slider每一项是否有a标签链接，不配置默认为true
data-tcssprefixslider每一项的tcss点击流前缀，不配置将不添加点击流统计代码。格式如：a20151208mocha.index.actshow1
data-posid广告位ID


创建实例
1
2
3
4
5
6
7
8
9
10
11
12
//Slider初始化
Slider.init(function(slider) {
  //创建实例sliderObj.slider4
  slider.type(2, [{
    id: 'slider4',
    controllerH: 24,
    callback: function() {
      console.log('slider4创建完成');
      sliderObj.slider4.playTo(1);
    }
  }]);
});


type(param1,parem2)参数描述
名称类型描述
param1Number数字代表Slider样式一~样式六（1-6）
param2Array数组存放一个或多个Object类型数据

{id:’’,controllerH:0,callback:function(){}}
名称类型描述
idStringslider的id
controllerHNumberslider底部controller多余的高度（实际值）
callbackFunction实例化完成的回调方法

slider实例可使用的方法
名称类型描述
playFunction自动播放，如sliderObj.slider1.play();
playToFunction播放到第几个滑动块，如sliderObj.slider1.playTo(2);
stopFunction停止自动播放，如sliderObj.slider1.stop();
prevFunction播放前一个，如sliderObj.slider1.prev();
nextFunction播放后一个，如sliderObj.slider1.next();

样式三（demo1）没有接入广告系统 .mocha-slider-scheme3


slider 样式三（demo1）

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="slider5Wrapper" class="mocha-slider-wrapper">
  <div id="slider5" data-psdw="640" data-sliderw="560" data-sliderh="300" class="mocha-slider mocha-slider-scheme3 mocha-slider-skin1">
    <ul class="content">
      <li><a href='#'><img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/560x300.jpg" alt=""></a></li>
      <li><a href='#'><img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/560x300.jpg" alt=""></a></li>
      <li><a href='#'><img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/560x300.jpg" alt=""></a></li>
      <li><a href='#'><img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/560x300.jpg" alt=""></a></li>
      <li><a href='#'><img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/560x300.jpg" alt=""></a></li>
    </ul>
  </div>
  <a href="javascript:void(0);" class="mocha-slider-btn mocha-slider-btn-skin1 prevBtn">&lt;</a>
  <a href="javascript:void(0);" class="mocha-slider-btn mocha-slider-btn-skin1 nextBtn">&gt;</a>
</div>


可以在您的css中覆盖.mocha-slider-scheme3.mocha-slider-skin1和.mocha-slider-btn-skin1皮肤类
1
2
3
4
5
6
7
8
/* skin */
.mocha-slider-scheme3.mocha-slider-skin1 .controller{position:absolute;bottom:7px;right:0;height:20px;text-align:center;}
.mocha-slider-scheme3.mocha-slider-skin1 .controller li{width:10px;height:10px;margin:5px;border-radius:50%;-webkit-border-radius:50%;background-color:#8a8a8a;}
.mocha-slider-scheme3.mocha-slider-skin1 .controller li.current{background-color:#ffdb72;}
/* slider-btn-skin */
.mocha-slider-btn-skin1{color:#fff;font-size:.16rem;font-weight:bolder;padding:.08rem;width:.50rem;height:.50rem;line-height:.50rem;top:50%;background-color: #a72525;border-radius: 50%;-webkit-border-radius: 50%;}
.mocha-slider-btn-skin1.prevBtn{left:-.47rem;text-align: right;}
.mocha-slider-btn-skin1.nextBtn{right:-.47rem;text-align: left;}


自定义属性说明
自定义属性说明
data-psdw设计稿宽度
data-sliderw滑动块宽度
data-sliderh滑动块高度


创建实例
1
2
3
4
5
6
7
8
9
10
11
12
//Slider初始化
Slider.init(function(slider) {
  //创建实例sliderObj.slider5
  slider.type(3, [{
    id: 'slider5',
    controllerH: 34,
    callback: function() {
      console.log('slider5创建完成');
      sliderObj.slider5.play();
    }
  }]);
});


type(param1,parem2)参数描述
名称类型描述
param1Number数字代表Slider样式一~样式六（1-6）
param2Array数组存放一个或多个Object类型数据

{id:’’,controllerH:0,callback:function(){}}
名称类型描述
idStringslider的id
controllerHNumberslider底部controller多余的高度（实际值）
callbackFunction实例化完成的回调方法

slider实例可使用的方法
名称类型描述
playFunction自动播放，如sliderObj.slider1.play();
playToFunction播放到第几个滑动块，如sliderObj.slider1.playTo(2);
stopFunction停止自动播放，如sliderObj.slider1.stop();
prevFunction播放前一个，如sliderObj.slider1.prev();
nextFunction播放后一个，如sliderObj.slider1.next();

样式三（demo2）有接入广告系统 .mocha-slider-scheme3


slider 样式三（demo2）

1
2
3
4
5
6
7
8
9
10
11
12
<div id="slider6Wrapper" class="mocha-slider-wrapper">
  <div id="slider6" data-channelid="14482" data-showlink="true" data-tcssprefix="a20151208mocha.index.actshow3" data-psdw="640" data-sliderw="560" data-sliderh="300" class="mocha-slider mocha-slider-scheme3 mocha-slider-skin2">
    <ul class="content">
      <li data-posid="12359"></li>
      <li data-posid="12360"></li>
      <li data-posid="12361"></li>
      <li data-posid="12362"></li>
    </ul>
  </div>
  <a href="javascript:void(0);" class="mocha-slider-btn mocha-slider-btn-skin1 prevBtn">&lt;</a>
  <a href="javascript:void(0);" class="mocha-slider-btn mocha-slider-btn-skin1 nextBtn">&gt;</a>
</div>


可以在您的css中覆盖.mocha-slider-scheme3.mocha-slider-skin2和.mocha-slider-btn-skin1皮肤类
1
2
3
4
5
6
7
8
/* skin */
.mocha-slider-scheme3.mocha-slider-skin2 .controller{position:absolute;bottom:7px;right:0;height:10px;text-align:center;}
.mocha-slider-scheme3.mocha-slider-skin2 .controller li{width:10px;height:10px;margin:0 5px;border-radius:50%;-webkit-border-radius:50%;background-color:#8a8a8a;}
.mocha-slider-scheme3.mocha-slider-skin2 .controller li.current{background-color:#ffdb72;}
/* slider-btn-skin */
.mocha-slider-btn-skin1{color:#fff;font-size:.16rem;font-weight:bolder;padding:.08rem;width:.50rem;height:.50rem;line-height:.50rem;top:50%;background-color: #a72525;border-radius: 50%;-webkit-border-radius: 50%;}
.mocha-slider-btn-skin1.prevBtn{left:-.47rem;text-align: right;}
.mocha-slider-btn-skin1.nextBtn{right:-.47rem;text-align: left;}


自定义属性说明
自定义属性说明
data-psdw设计稿宽度
data-sliderw滑动块宽度
data-sliderh滑动块高度
data-channelid频道ID，不配置data-channelid，将不读取广告系统数据 频道ID如http://game.qq.com/time/qqadv/Info_new_14482.js（14482）
data-showlinktrue/false，代表slider每一项是否有a标签链接，不配置默认为true
data-tcssprefixslider每一项的tcss点击流前缀，不配置将不添加点击流统计代码。格式如：a20151208mocha.index.actshow1
data-posid广告位ID


创建实例
1
2
3
4
5
6
7
8
9
10
11
12
//Slider初始化
Slider.init(function(slider) {
  //创建实例sliderObj.slider6
  slider.type(3, [{
    id: 'slider6',
    controllerH: 0,
    callback: function() {
      console.log('slider6创建完成');
      sliderObj.slider6.play();
    }
  }]);
});


type(param1,parem2)参数描述
名称类型描述
param1Number数字代表Slider样式一~样式六（1-6）
param2Array数组存放一个或多个Object类型数据

{id:’’,controllerH:0,callback:function(){}}
名称类型描述
idStringslider的id
controllerHNumberslider底部controller多余的高度（实际值）
callbackFunction实例化完成的回调方法

slider实例可使用的方法
名称类型描述
playFunction自动播放，如sliderObj.slider1.play();
playToFunction播放到第几个滑动块，如sliderObj.slider1.playTo(2);
stopFunction停止自动播放，如sliderObj.slider1.stop();
prevFunction播放前一个，如sliderObj.slider1.prev();
nextFunction播放后一个，如sliderObj.slider1.next();

样式四 有接入广告系统 .mocha-slider-scheme4


slider 样式四

1
2
3
4
5
6
7
8
<div id="slider7" data-channelid="14482" data-showlink="true" data-tcssprefix="a20151208mocha.index.actshow4" data-psdw="640" data-sliderw="640" data-sliderh="380" data-liwidth="300" data-lipadding="20" class="mocha-slider mocha-slider-scheme4 mocha-slider-skin1">
  <ul class="content">
    <li data-posid="12359"></li>
    <li data-posid="12360"></li>
    <li data-posid="12361"></li>
    <li data-posid="12362"></li>
  </ul>
</div>


可以在您的css中覆盖.mocha-slider-scheme4.mocha-slider-skin1皮肤类
1
2
3
4
/* skin */
.mocha-slider-scheme4.mocha-slider-skin1 .controller{position:absolute;bottom:7px;right:0;height:20px;text-align:center;}
.mocha-slider-scheme4.mocha-slider-skin1 .controller li{width:10px;height:10px;margin:5px;border-radius:50%;-webkit-border-radius:50%;background-color:#8a8a8a;}
.mocha-slider-scheme4.mocha-slider-skin1 .controller li.current{background-color:#ffdb72;}


自定义属性说明
自定义属性说明
data-psdw设计稿宽度
data-sliderw滑动块宽度
data-sliderh滑动块高度
data-channelid频道ID，不配置data-channelid，将不读取广告系统数据 频道ID如http://game.qq.com/time/qqadv/Info_new_14482.js（14482）
data-showlinktrue/false，代表slider每一项是否有a标签链接，不配置默认为true
data-tcssprefixslider每一项的tcss点击流前缀，不配置将不添加点击流统计代码。格式如：a20151208mocha.index.actshow1
data-posid广告位ID


创建实例
1
2
3
4
5
6
7
8
9
10
11
12
//Slider初始化
Slider.init(function(slider) {
  //创建实例sliderObj.slider7
  slider.type(4, [{
    id: 'slider7',
    controllerH: 34,
    callback: function() {
      console.log('slider7创建完成');
      sliderObj.slider7.play();
    }
  }]);
});


type(param1,parem2)参数描述
名称类型描述
param1Number数字代表Slider样式一~样式六（1-6）
param2Array数组存放一个或多个Object类型数据

{id:’’,controllerH:0,callback:function(){}}
名称类型描述
idStringslider的id
controllerHNumberslider底部controller多余的高度（实际值）
callbackFunction实例化完成的回调方法

slider实例可使用的方法
名称类型描述
playFunction自动播放，如sliderObj.slider1.play();
playToFunction播放到第几个滑动块，如sliderObj.slider1.playTo(2);
stopFunction停止自动播放，如sliderObj.slider1.stop();
prevFunction播放前一个，如sliderObj.slider1.prev();
nextFunction播放后一个，如sliderObj.slider1.next();

样式五（demo1）没有接入广告系统 .mocha-slider-scheme5


slider 样式五（demo1）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="slider8" data-psdw="640" class="mocha-slider-wrapper">
  <div data-sliderw="640" data-sliderh="330" data-slidermarginbottom="20" class="gallery-top mocha-slider">
    <ul class="content">
      <li><a href='#'><img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/gallery-640x330-1.jpg" alt=""></a></li>
      <li><a href='#'><img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/gallery-640x330-2.jpg" alt=""></a></li>
      <li><a href='#'><img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/gallery-640x330-3.jpg" alt=""></a></li>
      <li><a href='#'><img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/gallery-640x330-4.jpg" alt=""></a></li>
      <li><a href='#'><img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/gallery-640x330-5.jpg" alt=""></a></li>
    </ul>
  </div>
  <div data-sliderw="640" data-sliderh="110" data-lipaddingright="20" class="gallery-thumbs mocha-slider mocha-slider-scheme5">
    <ul class="content">
      <li><img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/gallery-640x330-1.jpg" alt=""></li>
      <li><img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/gallery-640x330-2.jpg" alt=""></li>
      <li><img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/gallery-640x330-3.jpg" alt=""></li>
      <li><img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/gallery-640x330-4.jpg" alt=""></li>
      <li><img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/gallery-640x330-5.jpg" alt=""></li>
    </ul>
  </div>
</div>


自定义属性说明
自定义属性说明
data-psdw设计稿宽度
data-sliderw滑动块宽度
data-sliderh滑动块高度
data-slidermarginbottom大图与小图之间的间隙
data-lipaddingright小图之间的间隙


创建实例
1
2
3
4
5
6
7
8
9
10
11
//Slider初始化
Slider.init(function(slider) {
  //创建实例sliderObj.slider8
  slider.type(5, [{
    id: 'slider8',
    callback: function() {
      console.log('slider8创建完成');
      sliderObj.slider8.play();
    }
  }]);
});


type(param1,parem2)参数描述
名称类型描述
param1Number数字代表Slider样式一~样式六（1-6）
param2Array数组存放一个或多个Object类型数据

{id:’’,callback:function(){}}
名称类型描述
idStringslider的id
callbackFunction实例化完成的回调方法

slider实例可使用的方法
名称类型描述
playFunction自动播放，如sliderObj.slider1.play();
playToFunction播放到第几个滑动块，如sliderObj.slider1.playTo(2);
stopFunction停止自动播放，如sliderObj.slider1.stop();
prevFunction播放前一个，如sliderObj.slider1.prev();
nextFunction播放后一个，如sliderObj.slider1.next();

样式五（demo2）有接入广告系统 .mocha-slider-scheme5


slider 样式五（demo2）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="slider9" data-channelid="14482" data-showlink="true" data-tcssprefix="a20151208mocha.index.actshow5" data-psdw="640" class="mocha-slider-wrapper">
  <div data-sliderw="580" data-sliderh="300" data-slidermarginbottom="20" class="gallery-top mocha-slider">
    <ul class="content">
      <li data-posid="12359"></li>
      <li data-posid="12360"></li>
      <li data-posid="12361"></li>
      <li data-posid="12362"></li>
    </ul>
  </div>
  <div data-sliderw="580" data-sliderh="110" data-lipaddingright="20" class="gallery-thumbs mocha-slider mocha-slider-scheme5">
    <ul class="content">
    </ul>
  </div>
</div>


自定义属性说明
自定义属性说明
data-psdw设计稿宽度
data-sliderw滑动块宽度
data-sliderh滑动块高度
data-slidermarginbottom大图与小图之间的间隙
data-lipaddingright小图之间的间隙
data-channelid频道ID，不配置data-channelid，将不读取广告系统数据 频道ID如http://game.qq.com/time/qqadv/Info_new_14482.js（14482）
data-showlinktrue/false，代表slider每一项是否有a标签链接，不配置默认为true
data-tcssprefixslider每一项的tcss点击流前缀，不配置将不添加点击流统计代码。格式如：a20151208mocha.index.actshow1
data-posid广告位ID


创建实例
1
2
3
4
5
6
7
8
9
10
//Slider初始化
Slider.init(function(slider) {
  //创建实例sliderObj.slider9
  slider.type(5, [{
    id: 'slider9',
    callback: function() {
      console.log('slider9创建完成');
    }
  }]);
});


type(param1,parem2)参数描述
名称类型描述
param1Number数字代表Slider样式一~样式六（1-6）
param2Array数组存放一个或多个Object类型数据

{id:’’,callback:function(){}}
名称类型描述
idStringslider的id
callbackFunction实例化完成的回调方法

slider实例可使用的方法
名称类型描述
playFunction自动播放，如sliderObj.slider1.play();
playToFunction播放到第几个滑动块，如sliderObj.slider1.playTo(2);
stopFunction停止自动播放，如sliderObj.slider1.stop();
prevFunction播放前一个，如sliderObj.slider1.prev();
nextFunction播放后一个，如sliderObj.slider1.next();

样式六 视频播放（暂不提供接入广告系统） .mocha-slider-scheme6


slider 样式六 视频播放

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
<div id="slider10" data-psdw="640" data-proportion="16-9" class="mocha-slider-wrapper">
  <div id="slider10_player" data-sliderw="640" data-slidermarginbottom="20" class="video-top mocha-slider" onclick="pgvSendClick({hottag:'a20151208mocha.index.videoslider1.videotop'})"></div>
  <div data-sliderw="640" data-sliderh="110" data-lipaddingright="20" class="video-thumbs mocha-slider mocha-slider-scheme6">
    <ul class="content">
      <li data-vid="b14016xwapw" onclick="pgvSendClick({hottag:'a20151208mocha.index.videoslider1.videothumbs1'});">
        <img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/videoimg-320x180-1.jpg" alt="">
        <p>新版桶牛竞技场新版桶牛竞技场</p>
      </li>
      <li data-vid="d01452426av" onclick="pgvSendClick({hottag:'a20151208mocha.index.videoslider1.videothumbs2'});">
        <img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/videoimg-320x180-2.jpg" alt="">
        <p>新版桶牛竞技场</p>
      </li>
      <li data-vid="h0144kvxbl2" onclick="pgvSendClick({hottag:'a20151208mocha.index.videoslider1.videothumbs3'});">
        <img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/videoimg-320x180-3.jpg" alt="">
        <p>新版桶牛竞技场</p>
      </li>
      <li data-vid="h0144kvxbl2" onclick="pgvSendClick({hottag:'a20151208mocha.index.videoslider1.videothumbs4'});">
        <img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/videoimg-320x180-4.jpg" alt="">
        <p>新版桶牛竞技场</p>
      </li>
      <li data-vid="i0144nkkkdy" onclick="pgvSendClick({hottag:'a20151208mocha.index.videoslider1.videothumbs5'});">
        <img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/videoimg-320x180-5.jpg" alt="">
        <p>新版桶牛竞技场</p>
      </li>
      <li data-vid="w0144rtcynq" onclick="pgvSendClick({hottag:'a20151208mocha.index.videoslider1.videothumbs6'});">
        <img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/videoimg-320x180-6.jpg" alt="">
        <p>新版桶牛竞技场</p>
      </li>
    </ul>
  </div>
</div>


自定义属性说明
自定义属性说明
data-psdw设计稿宽度
data-sliderw滑动块宽度
data-sliderh滑动块高度
data-slidermarginbottom大图与小图之间的间隙
data-lipaddingright小图之间的间隙
data-proportion视频尺寸比例 如：16:9则填写16-9
data-vid视频id
data-src视频缩略图地址


创建实例
1
2
3
4
5
6
7
8
9
10
11
//Slider初始化
Slider.init(function(slider) {
  //创建实例sliderObj.slider10
  slider.type(6, [{
    id: 'slider10',
    callback: function() {
      console.log('slider10创建完成');
      sliderObj.slider10.play();
    }
  }]);
});


type(param1,parem2)参数描述
名称类型描述
param1Number数字代表Slider样式一~样式六（1-6）
param2Array数组存放一个或多个Object类型数据

{id:’’,callback:function(){}}
名称类型描述
idStringslider的id
callbackFunction实例化完成的回调方法

slider实例可使用的方法
名称类型描述
playFunction自动播放，如sliderObj.slider1.play();
playToFunction播放到第几个滑动块，如sliderObj.slider1.playTo(2);
stopFunction停止自动播放，如sliderObj.slider1.stop();
prevFunction播放前一个，如sliderObj.slider1.prev();
nextFunction播放后一个，如sliderObj.slider1.next();

countdown(倒计时)

作者：dereksu
版本：v.1
依赖：mocha.min.css countdown.min.js

点击运行Demo

demo1 Ajax请求favicon.ico获取服务器时间（演示自定义时间间隔符） .mocha-countdown-scheme1


countdown demo1

1
2
3
<div class="mocha-countdown mocha-countdown-scheme1 mocha-countdown-skin1">
  <p id="ctime1" class="content ctime1"></p>
</div>


可以在您的css中覆盖.mocha-countdown-skin1皮肤类
1
2
/* skin */
.mocha-countdown-skin1 .content{line-height: .3rem;font-size: .2rem;padding: .2rem .04rem;display: inline-block;letter-spacing: .01rem;background-color:#4e4e4e;color:#fff;}


JS代码
1
2
3
4
5
var ctimer1 = new countDown("ctime1",{
  ttime:[2025,10,11,12,00,00],
  gap:getServerTime().stgap,
  sp:["-","-","-",""]
});


demo2 通过PHP获取服务器时间（演示CSS3动画、自定义时间间隔符） .mocha-countdown-scheme1


countdown demo2

1
2
3
<div class="mocha-countdown mocha-countdown-scheme1 mocha-countdown-skin1">
  <p id="ctime2" class="content ctime2"></p>
</div>


可以在您的css中覆盖.mocha-countdown-skin1皮肤类
1
2
3
4
5
6
7
8
9
/* skin */
.mocha-countdown-skin1 .content{line-height: .3rem;font-size: .2rem;padding: .2rem .04rem;display: inline-block;letter-spacing: .01rem;background-color:#4e4e4e;color:#fff;}
.mocha-countdown-skin1 .content .ctime2_p{display:inline-block;vertical-align:middle;margin:0 .01rem;width:.16rem;height:.4rem;line-height:.4rem;overflow:hidden;text-align:center;color:#4e4e4e;border:1px solid #eee;border-radius:.05rem;background:#fff;box-shadow:3px 3px 7px rgba(0,0,0,0.3)}
.mocha-countdown-skin1 .content .nanistyle{-webkit-animation:nanistyle 0.8s;}
@-webkit-keyframes nanistyle{
  0% {opacity: 0;-webkit-transform-origin: 50% 0%;-webkit-transform: perspective(800px) rotateX(90deg);}
  50% {opacity: 1;-webkit-transform-origin: 50% 0%;-webkit-transform: perspective(800px) rotateX(-20deg);}
  100% {opacity: 1;-webkit-transform-origin: 50% 0%;-webkit-transform: perspective(800px) rotateX(0deg);}
}


JS代码
1
2
3
4
5
6
7
8
9
10
11
12
13
var scriptLoader=function(b,a,f){var d=b.split("."),c=d[d.length-1],e=document.createElement("script"),g="src";e.setAttribute(g,b);document.body.appendChild(e);e.onload=function(){if(typeof a=="function"){if(typeof f!="undefined"){a(f)}else{a()}}};e.onerror=function(){}};
scriptLoader('http://apps.game.qq.com/CommArticle/app/reg/gdate.php',function(){
//通过php获取本地与服务器时间差_gapTime，获取不到则使用客户端时间
var _gapTime = typeof(json_curdate)!=="undefined" ? +new Date(json_curdate.replace(/-/g,"/"))-(+new Date()) : 0;

var ctimer2 = new countDown("ctime2",{
  ttime:[2025,10,11,12,00,00],
  gap:_gapTime,
  nani:'nanistyle',
  sp:["天","时","分","秒"]
});

});


demo3 倒计时结束（演示当倒计时到00天的时候隐藏’00天’、倒计时完成的回调方法） .mocha-countdown-scheme1


countdown demo3

1
2
3
<div class="mocha-countdown mocha-countdown-scheme1 mocha-countdown-skin1">
  <p id="ctime3" class="content ctime3"></p>
</div>


可以在您的css中覆盖.mocha-countdown-skin1皮肤类
1
2
/* skin */
.mocha-countdown-skin1 .content{line-height: .3rem;font-size: .2rem;padding: .2rem .04rem;display: inline-block;letter-spacing: .01rem;background-color:#4e4e4e;color:#fff;}


JS代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var scriptLoader=function(b,a,f){var d=b.split("."),c=d[d.length-1],e=document.createElement("script"),g="src";e.setAttribute(g,b);document.body.appendChild(e);e.onload=function(){if(typeof a=="function"){if(typeof f!="undefined"){a(f)}else{a()}}};e.onerror=function(){}};
scriptLoader('http://apps.game.qq.com/CommArticle/app/reg/gdate.php',function(){
//通过php获取本地与服务器时间差_gapTime，获取不到则使用客户端时间
var _gapTime = typeof(json_curdate)!=="undefined" ? +new Date(json_curdate.replace(/-/g,"/"))-(+new Date()) : 0;

var ctimer3 = new countDown("ctime3",{
  ttime:[2015,12,25,18,41,00],
  gap:_gapTime,
  sp:["天","时","分","秒"],
  hideday:true,
  done:function(){
    console.info('ctime3倒计时时间到！');
  }
});

});


countDown(param1,parem2)参数描述
名称类型描述
param1String容器id，必选
param2Object
{ttime:[],gap:0,sp:[],nani:’’,hideday:true,done:function(){}}
名称类型描述
ttimeArray倒计时的时间，年月日时分秒，如[2016,12,25,12,00,00]，必选;
gapNumber客户端与服务器时间差(单位ms)，默认为0，调用客户端时间，可选;
spArray时间分隔符，默认为[“:”,”:”,”:”,””]，可选;
naniString数字变化时的CSS3效果，默认为’nani’，可选;
hidedayBoolean是否当倒计时到00天的时候隐藏’00天’，默认为false，可选;
doneFunction倒计时完成时的回调函数，可选


每个实例可使用的方法
名称类型描述
pauseFunction暂停倒计时，如ctimer1.pause();可在切换到其他场景时暂停倒计时的执行
playFunction暂停之后再次播放倒计时，如ctimer1.play();

sign-in(签到模块)

作者：dereksu
版本：v.1
依赖：mocha.min.css qqapi.js zepto.js milo.js reporting.js

点击运行Demo

样式一 日历签到 .mocha-sign-in-scheme1


sign-in 样式一

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="mocha-sign-in mocha-sign-in-scheme1 mocha-sign-in-skin1">
  <div class="title-panel clearfix">
    <span class="tit">签到日历</span>
    <span class="total">本月已累积签到<i class="num" id="queryCheckInRes">0</i>天</span>
    <span class="qqnum" id="login_qq_span"></span>
  </div>
  <div class="date-panel clearfix">
    <span class="nowdate" id="nowDate"></span>
  </div>
  <div id="cal" class="calendar">
    <!-- 组件自动填充日历表格 -->
  </div>
  <div class="btn-panel">
    <a class="signinbtn" onclick="amsSubmit(39028,216921)">签到</a>
    <a class="querysigninbtn" onclick="amsInit(39028,216920);">查询签到 </a>
  </div>
</div>


可以在您的css中覆盖.mocha-sign-in-scheme1.mocha-sign-in-skin1皮肤类
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
/* skin */
.mocha-sign-in-scheme1.mocha-sign-in-skin1{background: #bbb;border: #2a2a2a solid 1px;}
.mocha-sign-in-scheme1.mocha-sign-in-skin1 .title-panel{background:#2a2a2a;font-size: .12rem;color:#fff;line-height:.16rem;padding: .02rem 0;}
.mocha-sign-in-scheme1.mocha-sign-in-skin1 .title-panel .tit{padding-left: 5px;}
.mocha-sign-in-scheme1.mocha-sign-in-skin1 .title-panel .total{padding-right:5px;}
.mocha-sign-in-scheme1.mocha-sign-in-skin1 .title-panel .qqnum{padding-right:5px;}
.mocha-sign-in-scheme1.mocha-sign-in-skin1 .date-panel{font-size: .12rem;line-height: .16rem;padding: .02rem 0;color:#171717;border-top:1px #65655b solid;border-bottom: 1px #65655b solid;}
.mocha-sign-in-scheme1.mocha-sign-in-skin1 .date-panel .nowdate{padding-right:5px;}
.mocha-sign-in-scheme1.mocha-sign-in-skin1 .btn-panel{font-size: .12rem;color:#fff;line-height: .22rem;}
.mocha-sign-in-scheme1.mocha-sign-in-skin1 .btn-panel .signinbtn{border: 1px solid #ccc;border-radius: 5px;background: #009dfe;margin:.1rem .05rem;padding:0 .05rem;}
.mocha-sign-in-scheme1.mocha-sign-in-skin1 .btn-panel .querysigninbtn{border: 1px solid #ccc;border-radius: 5px;background: #009dfe;margin:.1rem .05rem;padding:0 .05rem;}
/*日历请用TABLE构造 以下为基础样式*/
.mocha-sign-in-scheme1.mocha-sign-in-skin1 .calendar table{ border-collapse:collapse;margin:0 auto;padding:0;border: 0;}
.mocha-sign-in-scheme1.mocha-sign-in-skin1 .calendar td{ border:5px #bbb solid; padding:.3em .3em;text-align:center;}
.mocha-sign-in-scheme1.mocha-sign-in-skin1 .calendar th{border:5px #bbb solid; padding:.3em .3em;text-align:center;}
.mocha-sign-in-scheme1.mocha-sign-in-skin1 .calendar tbody{background: #4f4f4f; color: #bbb; }
.mocha-sign-in-scheme1.mocha-sign-in-skin1 .calendar thead{background: #bbb; color: #171717; }
/*以下样式为组件根据类名自动为对应元素追加的样式*/
/*可不用此类名，也可更改对应DOM结构，只需要修改对应控件接口即可*/
/*main是追加在标签TABLE上的样式*/
.mocha-sign-in-scheme1.mocha-sign-in-skin1 .calendar .main{background: #4f4f4f; color: #bbb;font-size: .14rem;}
/*head是追加在标签THEAD上的样式*/
.mocha-sign-in-scheme1.mocha-sign-in-skin1 .calendar .head{background: #bbb; color: #171717;}
/*head是追加在标签TBODY上的样式*/
.mocha-sign-in-scheme1.mocha-sign-in-skin1 .calendar .body{}
/*week是追加在标签TBODY中的TR的样式*/
.mocha-sign-in-scheme1.mocha-sign-in-skin1 .calendar .week{background: #4f4f4f; color: #bbb;}
/*normal是追加在标签TD上的样式，用以表示普通日的样式*/
.mocha-sign-in-scheme1.mocha-sign-in-skin1 .calendar .normal{color:#fefefe;}
/*normal是追加在标签TD上的样式，用以表示非活动日的样式*/
.mocha-sign-in-scheme1.mocha-sign-in-skin1 .calendar .noday{color: #bbb;}
/*normal是追加在标签TD上的样式，用以表示今日的样式*/
.mocha-sign-in-scheme1.mocha-sign-in-skin1 .calendar .today{color: green;}
/*normal是追加在标签TD上的样式，用以表示特殊日的样式*/
.mocha-sign-in-scheme1.mocha-sign-in-skin1 .calendar .special{color: #000; background:red;}
/*normal是追加在标签TD上的样式，用以表示周末的样式*/
.mocha-sign-in-scheme1.mocha-sign-in-skin1 .calendar .weekend{color:red;}
/*normal是追加在标签TD上的样式，用以表示签到日的样式，仅在签到日历中使用*/
.mocha-sign-in-scheme1.mocha-sign-in-skin1 .calendar .signcls{background:green;color:black;}
/*normal是追加在标签TD上的样式，用以表示未签到日的样式，仅在签到日历中使用*/
.mocha-sign-in-scheme1.mocha-sign-in-skin1 .calendar .nosigncls{background:gray;color:black;}


JS代码
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
42
43
44
45
46
47
48
49
50
51
52
53
//获取当前的日期
var myDate = new Date();
var nowYear = myDate.getFullYear(); //年
var nowMonth = myDate.getMonth() + 1; //月
var nowDate = myDate.getDate(); //日
document.getElementById('nowDate').innerHTML = nowYear + '年' + nowMonth + '月' + nowDate + '日';
//提交签到的配置
amsCfg_216921 = {
  type: "comit",
  sData: {
    "appid": "363"
  },
  success: function(res) {
    amsInit(39028, 216920);
    console.log(res.sMsg);
  }
};
//查询签到的配置
amsCfg_216920 = {
  type: "query",
  sData: {
    "appid": "363"
  },
  success: function(checkInInfo, signDateList) { //返回总天数
    g("queryCheckInRes").innerHTML = checkInInfo.total;
  },
  calCfg: { //日历显示的配置对象，更多参数可参考Calendar & SignCalendar 类
    specialday: [], //特殊日期
    container: "cal", //日历显示容器
    onCreateDay: function(day, type, y, m, d) { //日历对象的dom内容
      day.innerHTML = "" + d + "";
    },
    signDateList: []
  },
  css: "biz.calendar.cal", //css样式，有特殊样式，请用绝对地址
  calShow: true, //日历是否显示
  msg: { //msg 提示语句对象
    "systemError": "很抱歉，系统繁忙，请稍后再试",
    "hasCheckin": "您今天已签到",
    "checkinSuccess": "签到成功",
    "checkinFailure": "签到成功"
  }
};
//初始化签到
amsInit(39028, 216920);
//获取当前登录的QQ号
milo.ready(function() {
  need("biz.login", function(LoginManager) {
    LoginManager.checkLogin(function() {
      g("login_qq_span").innerHTML = LoginManager.getUserUin();
    });
  });
});


样式二 短期签到 .mocha-sign-in-scheme2


sign-in 样式二

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="mocha-sign-in mocha-sign-in-scheme2 mocha-sign-in-skin1">
  <div class="content">
    <div class="signinbox clearfix">
      <a href="javascript:void(0);" class="signinitem signcls"></a>
      <a href="javascript:void(0);" class="signinitem signcls"></a>
      <a href="javascript:void(0);" class="signinitem signcls"></a>
      <a href="javascript:void(0);" onclick="amsSubmit(39028,216921)" class="signinitem today">签</a>
      <a href="javascript:void(0);" class="signinitem normal"></a>
      <a href="javascript:void(0);" class="signinitem normal"></a>
      <a href="javascript:void(0);" class="signinitem normal"></a>
    </div>
  </div>
</div>


可以在您的css中覆盖.mocha-sign-in-scheme2.mocha-sign-in-skin1皮肤类
1
2
3
4
5
6
7
8
9
10
/* skin */
.mocha-sign-in-scheme2.mocha-sign-in-skin1 .content{width: 2.7rem;height:0.30rem;}
.mocha-sign-in-scheme2.mocha-sign-in-skin1 .content:before{background: #4e4e4e;height: 0.06rem;margin-top: -0.03rem;}
.mocha-sign-in-scheme2.mocha-sign-in-skin1 .content .signinbox{color:#fefefe;font-size: .12rem;text-align: center;line-height: 0.3rem;}
.mocha-sign-in-scheme2.mocha-sign-in-skin1 .content .signinbox .signinitem{background: #4e4e4e;border-radius: 50%;color: inherit;width:.3rem;margin: 0 .05rem;}
.mocha-sign-in-scheme2.mocha-sign-in-skin1 .content .signinbox .signinitem.normal{background: #4e4e4e;}
.mocha-sign-in-scheme2.mocha-sign-in-skin1 .content .signinbox .signinitem.signcls{background: green;}
.mocha-sign-in-scheme2.mocha-sign-in-skin1 .content .signinbox .signinitem.today{background: #009dfe;}
.mocha-sign-in-scheme2.mocha-sign-in-skin1 .content .signinbox .signinitem:first-child{margin-left: 0;}
.mocha-sign-in-scheme2.mocha-sign-in-skin1 .content .signinbox .signinitem:last-child{margin-right: 0;}


其他说明
amsSubmit(39028活动ID,216921提交签到ID)
amsInit(39028活动ID,216920查询签到ID)
amsCfg_216921.sData.appid：开发那边配置的，一般用于检测用户是否已经关注了微信公众号等操作
注：活动ID、提交签到ID、查询签到ID都是由开发同学在系统中配置的。所以前端同学编写完JS代码之后还要交给开发同学进一步开发完成

lottery(抽奖模块)

作者：dereksu
版本：v.1
依赖：mocha.min.css zepto.js lottery.min.js

点击运行Demo

样式一 方形抽奖 .mocha-lottery-scheme1


lottery 样式一（方形）

1
2
3
<div id="lottery1" data-psdw="640" data-isscale="true" class="mocha-lottery mocha-lottery-scheme1 mocha-lottery-skin1">
  <div id="lottery1content" class="content"></div>
</div>


可以在您的css中覆盖.mocha-lottery-scheme1.mocha-lottery-skin1皮肤类
1
2
/* skin */
.mocha-lottery-scheme1.mocha-lottery-skin1 .content{width:614px; height: 494px;background: url(http://game.gtimg.cn/images/moba/cp/a20151016bbzbm/cj_bg.jpg) no-repeat;background-size: 100% auto;}


自定义属性说明
自定义属性说明
data-psdw设计稿宽度
data-isscaletrue/false，代表是否要自适应屏幕尺寸进行缩放，不配置默认为true。(如果本身body有进行整体缩放的话，这里就不要再缩放了，即设为false)


JS代码
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
//缩放方法
function lotteryScaleFun(a){var b=parseInt($("#"+a).data("psdw"));document.getElementById(a).style.width=b+"px";var c=document.documentElement.clientWidth?document.documentElement.clientWidth:b;document.getElementById(a).style.zoom=c/b}function lotteryScale(b){var a=$("#"+b).data("isscale");if(a!==false){lotteryScaleFun(b);$(window).bind("orientationchange",function(c){lotteryScaleFun(b)});$(window).bind("resize",function(c){lotteryScaleFun(b)})}};

//点击开始抽奖
function callJsToStart1() {
  callFlashToRoll1(3);
}
//开发获得抽奖结果 开始播放效果
function callFlashToRoll1(id) {
  //通知转盘转到对应的中奖产品的id （序号从0,1,2.....，0是指针初始指示的位置，沿着顺时针的方向递增）
  if (lotteryObj1) lotteryObj1.stopRoll(id);
}
//动画完成通知js
function callJsToComplete1() {
  alert('lotteryObj1-恭喜你获奖了！');
}
//初始化抽奖对象的lotteryObj1 
var lotteryObj1 = new mo.Lottery({
  //'lighturl':'http://ossweb-img.qq.com/images/motion/lottery/light.png',
  'total': 12,
  'width': 614,
  'height': 494,
  'sbtnx': 154,
  'sbtny': 124,
  'sbtnw': 306,
  'sbtnh': 246,
  'boxw': 150,
  'boxh': 120,
  'position': "0_0,154_0,308_0,462_0,462_124,462_248,462_372,308_372,154_372,0_372,0_248,0_124",
  'contentId': 'lottery1content',
  'onClickRollEvent': callJsToStart1,
  'onCompleteRollEvent': callJsToComplete1
});
//执行缩放
lotteryScale('lottery1');


样式二 圆形抽奖 .mocha-lottery-scheme2


lottery 样式二（圆形）

1
2
3
<div id="lottery2" data-psdw="640" data-isscale="true" class="mocha-lottery mocha-lottery-scheme2 mocha-lottery-skin1">
  <div id="lottery2content" class="content"></div>
</div>


可以在您的css中覆盖.mocha-lottery-scheme2.mocha-lottery-skin1皮肤类
1
2
/* skin */
.mocha-lottery-scheme2.mocha-lottery-skin1 .content{width:488px; height: 488px;}


自定义属性说明
自定义属性说明
data-psdw设计稿宽度
data-isscaletrue/false，代表是否要自适应屏幕尺寸进行缩放，不配置默认为true。(如果本身body有进行整体缩放的话，这里就不要再缩放了，即设为false)


JS代码
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
//缩放方法
function lotteryScaleFun(a){var b=parseInt($("#"+a).data("psdw"));document.getElementById(a).style.width=b+"px";var c=document.documentElement.clientWidth?document.documentElement.clientWidth:b;document.getElementById(a).style.zoom=c/b}function lotteryScale(b){var a=$("#"+b).data("isscale");if(a!==false){lotteryScaleFun(b);$(window).bind("orientationchange",function(c){lotteryScaleFun(b)});$(window).bind("resize",function(c){lotteryScaleFun(b)})}};

//点击开始抽奖
function callJsToStart2() {
  callFlashToRoll2(5);
}
//开发获得抽奖结果 开始播放效果 
function callFlashToRoll2(id) {
  //通知转盘转到对应的中奖产品的id （序号从0,1,2.....，0是指针初始指示的位置，沿着顺时针的方向递增）
  if (lotteryObj2) lotteryObj2.stopRoll(id);
}
//动画完成通知js
function callJsToComplete2() {
  alert('lotteryObj2-恭喜你获奖了！');
}
//初始化抽奖对象的lotteryObj2 
var lotteryObj2 = new mo.Lottery({
  //'flashUrl' : 'http://ossweb-img.qq.com/images/flash/lottery/circle/lotteyround_2013_v1.swf',
  'r': 8, //奖品总数
  'width': 488, //转盘宽度
  'height': 488, //转盘高度
  'flashFirst': false,
  'b': 'http://ossweb-img.qq.com/images/flash/lottery/circle/g.png', //圆盘的图片
  's': 'http://ossweb-img.qq.com/images/flash/lottery/circle/z.png', //开始抽奖按钮图片
  'bx': 0, //圆盘的图片位置x坐标 （转盘的中心点坐标为（0,0））
  'by': 0, //圆盘的图片位置y坐标
  'sx': 0, //开始抽奖按钮x坐标
  'sy': 0, //开始抽奖按钮y坐标
  'contentId': 'lottery2content', //转盘div层的id 
  'onClickRollEvent': callJsToStart2, //对应上面接口
  'onCompleteRollEvent': callJsToComplete2 //对应上面接口
});
//执行缩放
lotteryScale('lottery2');


layout(布局)

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

点击运行Demo

左右布局 .mocha-layout-scheme1

左右布局 - 左2右2

A
B
C
D

1
2
3
4
5
6
7
8
9
10
<div class="mocha-layout mocha-layout-scheme1">
	<div class="mocha-layout-flex">
		<div class="mocha-layout-box">A</div>
		<div class="mocha-layout-box">B</div>
	</div>
	<div class="mocha-layout-flex">
		<div class="mocha-layout-box">C</div>
		<div class="mocha-layout-box">D</div>
	</div>
</div>


左右布局 - 左2右1

A
B
C

1
2
3
4
5
6
7
8
9
<div class="mocha-layout mocha-layout-scheme1">
	<div class="mocha-layout-flex">
		<div class="mocha-layout-box">A</div>
		<div class="mocha-layout-box">B</div>
	</div>
	<div class="mocha-layout-flex">
		<div class="mocha-layout-box">C</div>
	</div>
</div>


左右布局 - 左1右2

A
B
C

1
2
3
4
5
6
7
8
9
<div class="mocha-layout mocha-layout-scheme1">
	<div class="mocha-layout-flex">
		<div class="mocha-layout-box">A</div>
	</div>
	<div class="mocha-layout-flex">
		<div class="mocha-layout-box">B</div>
		<div class="mocha-layout-box">C</div>
	</div>
</div>


左右布局 - 左右非等分

左右1:2 .mocha-layout-row-1-2

A
B

1
2
3
4
5
6
7
8
<div class="mocha-layout mocha-layout-scheme1 mocha-layout-row-1-2">
	<div class="mocha-layout-flex">
		<div class="mocha-layout-box">A</div>
	</div>
	<div class="mocha-layout-flex">
		<div class="mocha-layout-box">B</div>
	</div>
</div>


左右2:3 .mocha-layout-row-2-3

A
B

1
2
3
4
5
6
7
8
<div class="mocha-layout mocha-layout-scheme1 mocha-layout-row-2-3">
	<div class="mocha-layout-flex">
		<div class="mocha-layout-box">A</div>
	</div>
	<div class="mocha-layout-flex">
		<div class="mocha-layout-box">B</div>
	</div>
</div>


左右3:2 .mocha-layout-row-3-2

A
B

1
2
3
4
5
6
7
8
<div class="mocha-layout mocha-layout-scheme1 mocha-layout-row-3-2">
	<div class="mocha-layout-flex">
		<div class="mocha-layout-box">A</div>
	</div>
	<div class="mocha-layout-flex">
		<div class="mocha-layout-box">B</div>
	</div>
</div>


左右2:1 .mocha-layout-row-2-1

A
B

1
2
3
4
5
6
7
8
<div class="mocha-layout mocha-layout-scheme1 mocha-layout-row-2-1">
	<div class="mocha-layout-flex">
		<div class="mocha-layout-box">A</div>
	</div>
	<div class="mocha-layout-flex">
		<div class="mocha-layout-box">B</div>
	</div>
</div>


上下布局 .mocha-layout-scheme2

上下布局 上2下1

A
B
C

1
2
3
4
5
6
7
8
9
<div class="mocha-layout mocha-layout-scheme2">
	<div class="mocha-layout-flex">
		<div class="mocha-layout-box">A</div>
		<div class="mocha-layout-box">B</div>
	</div>
	<div class="mocha-layout-flex">
		<div class="mocha-layout-box">C</div>
	</div>
</div>


上下布局 上1下2

A
B
C

1
2
3
4
5
6
7
8
9
<div class="mocha-layout mocha-layout-scheme2">
	<div class="mocha-layout-flex">
		<div class="mocha-layout-box">A</div>
	</div>
	<div class="mocha-layout-flex">
		<div class="mocha-layout-box">B</div>
		<div class="mocha-layout-box">C</div>
	</div>
</div>


上下布局 - 左右非等分

左右1:2 .mocha-layout-row-1-2

A
B
C

1
2
3
4
5
6
7
8
9
<div class="mocha-layout mocha-layout-scheme2">
	<div class="mocha-layout-flex">
		<div class="mocha-layout-box">A</div>	
	</div>
	<div class="mocha-layout-flex mocha-layout-row-1-2">
		<div class="mocha-layout-box">B</div>
		<div class="mocha-layout-box">C</div>
	</div>
</div>


左右2:3 .mocha-layout-row-2-3

A
B
C

1
2
3
4
5
6
7
8
9
<div class="mocha-layout mocha-layout-scheme2">
	<div class="mocha-layout-flex">
		<div class="mocha-layout-box">A</div>
	</div>
	<div class="mocha-layout-flex mocha-layout-row-2-3">
		<div class="mocha-layout-box">B</div>
		<div class="mocha-layout-box">C</div>
	</div>
</div>


左右3:2 .mocha-layout-row-3-2

A
B
C

1
2
3
4
5
6
7
8
9
<div class="mocha-layout mocha-layout-scheme2">
	<div class="mocha-layout-flex">
		<div class="mocha-layout-box">A</div>
	</div>
	<div class="mocha-layout-flex mocha-layout-row-3-2">
		<div class="mocha-layout-box">B</div>
		<div class="mocha-layout-box">C</div>
	</div>
</div>


左右2:1 .mocha-layout-row-2-1

A
B
C

1
2
3
4
5
6
7
8
9
<div class="mocha-layout mocha-layout-scheme2">
	<div class="mocha-layout-flex">
		<div class="mocha-layout-box">A</div>
	</div>
	<div class="mocha-layout-flex mocha-layout-row-2-1">
		<div class="mocha-layout-box">B</div>
		<div class="mocha-layout-box">C</div>
	</div>
</div>


data-user(用户资料)

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

点击运行Demo

样式1-资料位1个 .mocha-data-user-scheme1

样式1-资料位1个

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="mocha-data-user mocha-data-user-scheme1 mocha-data-user-skin1">
    <div class="mocha-data-user-hd">
        <div class="mocha-data-user-img"><img src="http://dummyimage.com/100x100/222/fff.png&text=head" alt="头像"></div>
        <div class="mocha-data-user-content">
            <span class="mocha-data-user-level">Lv.51</span>
            <h1 class="mocha-data-user-name">哟呵123</h1>
        </div>
    </div>
    <div class="mocha-data-user-bd">
        <div class="mocha-data-user-box">
            <p>战斗力</p>
            <span class="mocha-data-user-num">6186</span>
        </div>
    </div>
    <div class="mocha-data-user-btn">
        <a href="javascript:;">跳转按钮<i class="mocha-data-user-ui"></i></a>
    </div>
</div>

样式2-资料位2个 .mocha-data-user-scheme2

样式2-资料位2个

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="mocha-data-user mocha-data-user-scheme2 mocha-data-user-skin1">
    <div class="mocha-data-user-hd">
        <div class="mocha-data-user-img"><img src="http://dummyimage.com/100x100/222/fff.png&text=head" alt="头像"></div>
        <div class="mocha-data-user-content">
            <span class="mocha-data-user-level">Lv.51</span>
            <h1 class="mocha-data-user-name">哟呵123</h1>
        </div>
    </div>
    <div class="mocha-data-user-bd">
        <div class="mocha-data-user-box">
            <p>战斗力</p>
            <span class="mocha-data-user-num">6186</span>
        </div>
    </div>
    <div class="mocha-data-user-bd">
        <div class="mocha-data-user-box">
            <p>累积杀敌数</p>
            <span class="mocha-data-user-num">0</span>
        </div>
    </div>
    <div class="mocha-data-user-btn">
        <a href="javascript:;">跳转按钮<i class="mocha-data-user-ui"></i></a>
    </div>
</div>

样式3-资料位3个 .mocha-data-user-scheme3

样式3-资料位3个

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-data-user mocha-data-user-scheme3 mocha-data-user-skin1">
    <div class="mocha-data-user-hd">
        <div class="mocha-data-user-img"><img src="http://dummyimage.com/100x100/222/fff.png&text=head" alt="头像"></div>
        <div class="mocha-data-user-content">
            <span class="mocha-data-user-level">Lv.51</span>
            <h1 class="mocha-data-user-name">哟呵123</h1>
        </div>
    </div>
    <div class="mocha-data-user-bd">
        <div class="mocha-data-user-box">
            <p>战斗力</p>
            <span class="mocha-data-user-num">6186</span>
        </div>
    </div>
    <div class="mocha-data-user-bd">
        <div class="mocha-data-user-box">
            <p>累积杀敌数</p>
            <span class="mocha-data-user-num">0</span>
        </div>
    </div>
    <div class="mocha-data-user-bd">
        <div class="mocha-data-user-box">
            <p>通宝数量</p>
            <span class="mocha-data-user-num">0</span>
        </div>
    </div>
    <div class="mocha-data-user-btn">
        <a href="javascript:;">跳转按钮<i class="mocha-data-user-ui"></i></a>
    </div>
</div>

修改模块皮肤CSS

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

1
2
3
4
5
6
7
8
9
10
11
/* skin */
.mocha-data-user-skin1{color: #474747;background: #e5e5e5;border:1px solid #afaeae;}
.mocha-data-user-skin1 .mocha-data-user-bd{border-left: 1px solid #c4c4c4;}
.mocha-data-user-skin1 .mocha-data-user-level{background: #818181;colfff;}
.mocha-data-user-skin1 .mocha-data-user-content p,.mocha-data-user-skimocha-data-user-bd p{font-size: .09rem;line-height: .14rem;color:#474747;}
.mocha-data-user-skin1 .mocha-data-user-name,.mocha-data-user-skin1 .modata-user-num{font-size: .15rem;line-height: .24rem;}
.mocha-data-user-skin1 .mocha-data-user-num{font-size: .18rem;font-weibold;}
.mocha-data-user-skin1 .mocha-data-user-level{font-size: .09rem;line-he: .14rem;}
.mocha-data-user-skin1 .mocha-data-user-btn a{font-size: .13rem;backgro #afaeae;color:#fff;}
.mocha-data-user-skin1 .mocha-data-user-ui{color: #fff;border: 1px solfff;}
.mocha-data-user-skin1 .mocha-data-user-ui:before{border-color: #fff;}

loading(进度条)

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

点击运行Demo

样式1-局部加载中 .mocha-loading-scheme1

努力加载中…


1
2
3
4
<div class="mocha-loading mocha-loading-scheme1">
	<p class="mocha-loading-txt">努力加载中...</p>
	<i class="mocha-loading-icon"></i>
</div>

样式2 页面加载中 .mocha-loading-scheme2

努力加载中…


1
2
3
4
<div class="mocha-loading mocha-loading-scheme2 mocha-loading-skin1">
	<i class="mocha-loading-icon"></i>
	<p class="mocha-loading-txt">努力加载中...</p>
</div>

修改模块皮肤CSS

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

1
2
/* skin */
.mocha-loading-skin1{width:100px;height:70px;background: rgba(0,0,0,.65); border-radius: 6px; color: #fff;}

fill-info(填写资料)

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

点击运行Demo

默认样式

男女
确认提交

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
42
43
<div class="mocha-fill-info">
	<div class="mocha-fill-main">
        <div class="mocha-fill-hd">
            <div class="mocha-fill-mark"></div>
        </div>
        <div class="mocha-fill-info-bd">
            <div class="mocha-fill-info-box">
                <div class="mocha-fill-info-panel">
                    <label>用户姓名：</label>
                    <input type="text" class="mocha-fill-info-name">
                </div>
                <div class="mocha-fill-info-panel" id="isex">
                    <label>性别：</label>
                    <span>男</span>
                    <input type="radio" name="sex" value="0" checked="">
                    <span>女</span>
                    <input type="radio" name="sex" value="1">
                </div>
            </div>
            <div class="mocha-fill-info-box">
                <div class="mocha-fill-info-panel">
                    <label>身份证号：</label>
                    <input type="text" class="mocha-fill-info-id">
                </div>
                <div class="mocha-fill-info-panel">
                    <label>联系电话：</label>
                    <input type="text" class="mocha-fill-info-mob" >
                </div>
            </div>
            <div class="mocha-fill-info-box">
                <label>QQ号码&nbsp;：</label>
                <input type="text" class="mocha-fill-info-post">
            </div>
            <div class="mocha-fill-info-box">
                <label>收货地址：</label>
                <input type="text" class="mocha-fill-info-addr" >
            </div>
        </div>
        <div class="mocha-fill-info-fd">
            <a class="mocha-fill-info-btn-submit" href="#">确认提交</a>
        </div>
   </div>
</div>