From a6abfa968354673c9d463f3896e375e77a378334 Mon Sep 17 00:00:00 2001
From: wupengFEX <smartfutureplayer@gmail.com>
Date: Thu, 23 Nov 2017 19:56:24 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20=E6=B7=BB=E5=8A=A0=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/mip-nav-slidedown/README.md              | 141 +++++++
 src/mip-nav-slidedown/mip-nav-slidedown.js   | 162 ++++++++
 src/mip-nav-slidedown/mip-nav-slidedown.less | 231 +++++++++++
 src/mip-nav-slidedown/package.json           |  14 +
 src/mip-nav-slidedown/setting/example.preset |   5 +
 src/mip-stats-tianrun/README.md              |  26 ++
 src/mip-stats-tianrun/mip-stats-tianrun.js   |  31 ++
 src/mip-stats-tianrun/package.json           |  13 +
 src/mip-vd-tabs/README.md                    | 151 ++++++++
 src/mip-vd-tabs/mip-vd-tabs.js               | 387 +++++++++++++++++++
 src/mip-vd-tabs/mip-vd-tabs.less             | 233 +++++++++++
 src/mip-vd-tabs/package.json                 |  13 +
 src/mip-vd-tabs/tab.js                       | 257 ++++++++++++
 13 files changed, 1664 insertions(+)
 create mode 100644 src/mip-nav-slidedown/README.md
 create mode 100644 src/mip-nav-slidedown/mip-nav-slidedown.js
 create mode 100644 src/mip-nav-slidedown/mip-nav-slidedown.less
 create mode 100644 src/mip-nav-slidedown/package.json
 create mode 100644 src/mip-nav-slidedown/setting/example.preset
 create mode 100644 src/mip-stats-tianrun/README.md
 create mode 100755 src/mip-stats-tianrun/mip-stats-tianrun.js
 create mode 100644 src/mip-stats-tianrun/package.json
 create mode 100644 src/mip-vd-tabs/README.md
 create mode 100644 src/mip-vd-tabs/mip-vd-tabs.js
 create mode 100644 src/mip-vd-tabs/mip-vd-tabs.less
 create mode 100644 src/mip-vd-tabs/package.json
 create mode 100644 src/mip-vd-tabs/tab.js

diff --git a/src/mip-nav-slidedown/README.md b/src/mip-nav-slidedown/README.md
new file mode 100644
index 000000000..e9a6ca33c
--- /dev/null
+++ b/src/mip-nav-slidedown/README.md
@@ -0,0 +1,141 @@
+# mip-nav-slidedown 菜单
+
+响应式菜单，在mip官网有引用。
+
+标题|内容
+----|----
+类型|通用
+支持布局|responsive,fixed-height,fill,container,fixed
+所需脚本|https://mipcache.bdstatic.com/static/v1/mip-nav-slidedown/mip-nav-slidedown.js
+
+## 示例
+### 基本使用
+```html
+<div class="mip-nav-wrapper">
+    <mip-nav-slidedown
+        data-id="bs-navbar"
+        class="mip-element-sidebar container"
+        data-showbrand="1"
+        data-brandname="MIP官网">
+        <nav id="bs-navbar" class="navbar-collapse collapse navbar navbar-static-top">
+            <ul class="nav navbar-nav navbar-right">
+                <li>
+                    <a href="//www.mipengine.org/">首页</a>
+                </li>
+                <li>
+                    <a href="//www.mipengine.org/timeline.html">动态</a>
+                </li>
+                <li>
+                    <a href="http://www.cnblogs.com/mipengine/">博客</a>
+                </li>
+                <li class="navbar-wise-close">
+                    <span id="navbar-wise-close-btn"></span>
+                </li>
+            </ul>
+        </nav>
+    </mip-nav-slidedown>
+</div>
+```
+
+### 导航菜单个数多
+导航菜单个数较多时，菜单展开可以上下滚动
+```html
+<div class="mip-nav-wrapper">
+    <mip-nav-slidedown
+        data-id="bs-navbar"
+        class="mip-element-sidebar container"
+        data-showbrand="1"
+        data-brandname="MIP官网">
+        <nav id="bs-navbar" class="navbar-collapse collapse navbar navbar-static-top">
+            <ul class="nav navbar-nav navbar-right">
+                <li><a href="//www.mipengine.org/">菜单1</a></li>
+                <li><a href="//www.mipengine.org/">菜单2</a></li>
+                <li><a href="//www.mipengine.org/">菜单3</a></li>
+                <li><a href="//www.mipengine.org/">菜单4</a></li>
+                <li><a href="//www.mipengine.org/">菜单5</a></li>
+                <li><a href="//www.mipengine.org/">菜单6</a></li>
+                <li><a href="//www.mipengine.org/">菜单7</a></li>
+                <li><a href="//www.mipengine.org/">菜单8</a></li>
+                <li><a href="//www.mipengine.org/">菜单9</a></li>
+                <li><a href="//www.mipengine.org/">菜单10</a></li>
+                <li><a href="//www.mipengine.org/">菜单11</a></li>
+                <li class="navbar-wise-close">
+                    <span id="navbar-wise-close-btn"></span>
+                </li>
+            </ul>
+        </nav>
+    </mip-nav-slidedown>
+</div>
+```
+
+### 增加二级菜单
+直接添加`<ul>`可以展现二级菜单效果。
+```html
+<div class="mip-nav-wrapper">
+    <mip-nav-slidedown 
+        data-id="bs-navbar"
+        class="mip-element-sidebar container"
+        data-showbrand="1"
+        data-brandname="MIP官网">
+        <nav id="bs-navbar" class="navbar-collapse collapse navbar navbar-static-top">
+            <ul class="nav navbar-nav navbar-right">
+                <li>
+                    <a href="//www.mipengine.org/">首页</a>
+                </li>
+                <li>
+                    <span class="navbar-more">常用工具</span>
+                    <ul>
+                        <li> <a href="//www.mipengine.org/">子菜单01</a> </li>
+                        <li> <a href="//www.mipengine.org/">子菜单02</a> </li>
+                        <li> <a href="//www.mipengine.org/">子菜单03</a> </li>
+                        <li> <a href="//www.mipengine.org/">子菜单04</a> </li>
+                    </ul>
+                </li>
+                <li>
+                    <a href="//www.mipengine.org/timeline.html">动态</a>
+                </li>
+                <li>
+                    <span class="navbar-more">下拉菜单</span>
+                    <ul>
+                        <li> <a href="//www.mipengine.org/">子菜单01</a> </li>
+                        <li> <a href="//www.mipengine.org/">子菜单02</a> </li>
+                        <li> <a href="//www.mipengine.org/">子菜单03</a> </li>
+                        <li> <a href="//www.mipengine.org/">子菜单04</a> </li>
+                    </ul>
+                </li>
+                <li class="navbar-wise-close">
+                    <span id="navbar-wise-close-btn"></span>
+                </li>
+            </ul>
+        </nav>
+    </mip-nav-slidedown>
+</div>
+```
+
+## 属性
+
+### data-id  
+说明：内部菜单id  
+必选项：是  
+类型：字符串  
+
+### data-showbrand  
+说明：是否需要左上角显示可点击区域  
+必选项：否  
+类型：数字  
+取值：0（不显示），1（显示）  
+默认值：1
+
+### data-brandname  
+说明：左上角显示可点击区域文字，仅在data-showbrand=1时显示  
+必选项：否  
+类型：字符串，如"MIP官网"  
+
+### data-brandhref  
+说明：左上角图标跳转链接，在data-showbrand为1时有效  
+必选项：否  
+类型：url  
+默认：'/'
+
+## 注意事项
+1. 一个页面内，只能存在一个下拉菜单，data-id="bs-navbar"
diff --git a/src/mip-nav-slidedown/mip-nav-slidedown.js b/src/mip-nav-slidedown/mip-nav-slidedown.js
new file mode 100644
index 000000000..4c727559c
--- /dev/null
+++ b/src/mip-nav-slidedown/mip-nav-slidedown.js
@@ -0,0 +1,162 @@
+/**
+ * @file 菜单 mip-nav-slidedown
+ * @author liangjiaying
+ * @time 2016.09
+ */
+define(function (require) {
+    var customElement = require('customElement').create();
+    var $ = require('zepto');
+
+    function build() {
+        var element = this.element;
+        render(element);
+        bindEvents(element);
+        showNavBar(element);
+    }
+
+    /**
+     * 渲染dom
+     *
+     * @param  {obj} me this
+     */
+    function render(me) {
+        var $this = $(me);
+        var id = $this.data('id');
+        var showBrand = !($this.data('showbrand') === 0);
+        var brandName = $this.data('brandname') || '';
+        var brandHref = $this.data('brandhref') || '#';
+        var $ulNav = $this.find('#' + id);
+        var $container = $('<div></div>');
+        var $btnWrap = '<div class="navbar-header">'
+            + '<button class="navbar-toggle collapsed" type="button" data-target="#'
+            + id + '" aria-controls="' + id + '" aria-expanded="false">'
+            + '<span class="sr-only">导航</span>'
+            + '<span class="icon-bar"></span>'
+            + '<span class="icon-bar"></span>'
+            + '<span class="icon-bar"></span>'
+            + '</button>'
+            + (showBrand ? '<a href=' + brandHref + ' class="navbar-brand">' + brandName + '</a>' : '')
+            + '</div>';
+        $container.append($btnWrap).append($ulNav).appendTo($this);
+        $('.mip-nav-wrapper').addClass('show');
+    }
+
+    /**
+     * 绑定事件
+     *
+     * @param  {obj} me this
+     */
+    function bindEvents(me) {
+        var bodyClass = $('body').attr('class');
+        $('#bs-navbar').find('.' + bodyClass).addClass('active');
+
+        $(document).on('click', '.navbar-header .navbar-toggle', navClickHandler);
+
+        // 主菜单关闭按钮 touchstart touchend mousedown mouseup变色
+        addHoverClass($('#navbar-wise-close-btn'));
+        $('#navbar-wise-close-btn').on('touchend', function (e) {
+            $('.navbar-header .navbar-toggle').trigger('click');
+            e.preventDefault();
+            e.stopPropagation();
+        }).on('click', function () {
+            $('.navbar-header .navbar-toggle').trigger('click');
+        });
+    }
+
+    /**
+     * 展开关闭菜单效果
+     *
+     * @param  {event} e click event
+     */
+    function navClickHandler(e) {
+        if (window.innerWidth > 767) {
+            return;
+        }
+
+        var $wiseNav = $('#bs-navbar');
+
+        if ($wiseNav.hasClass('in')) {
+            // 关闭菜单
+            $wiseNav.height('0px');
+            $('body').css('overflow', 'scroll');
+            $('.navbar-wise-close').css('margin-top', '20px');
+            $(window).off('orientationchange');
+            $('html').add($('body')).removeClass('noscroll');
+            setTimeout(function () {
+                $wiseNav.removeClass('in');
+            }, 500);
+        }
+        else {
+            // 打开菜单
+            var closeBtnTop = 20;
+            $wiseNav = $('#bs-navbar');
+
+            $('html').add($('body')).addClass('noscroll');
+            setNavHeight('open');
+
+            $(window).on('orientationchange', function () {
+                window.setTimeout(function () { // hack: orientationchange 取window高度不及时
+                    setNavHeight('resize');
+                }, 100);
+            }).on('resize', function () {
+                setNavHeight('resize');
+            });
+        }
+
+        /**
+         * 计算窗口高度
+         *
+         * @param {string} mode 用于区分模式
+         */
+        function setNavHeight(mode) {
+            if (mode === 'open') {
+                $wiseNav.addClass('in');
+            }
+
+            if (mode === 'resize' && $wiseNav.hasClass('in') || mode === 'open') {
+                var listNum = $('#bs-navbar li').length;
+                var offsetTop = $('mip-nav-slidedown')[0] ? $('mip-nav-slidedown')[0].getBoundingClientRect().top : 0;
+                var navHeight = window.innerHeight - $('.navbar-header').height() - offsetTop;
+                $wiseNav.height(navHeight);
+                // 关闭按钮距离底部固定为90px
+                closeBtnTop = navHeight - ($('.navbar-right li').height()) * listNum - 90;
+                if (closeBtnTop > 20) {
+                    $('.navbar-wise-close').css('margin-top', closeBtnTop + 'px');
+                }
+                else {
+                    $('.navbar-wise-close').css('margin-top', '20px');
+                }
+            }
+        }
+    }
+
+    /**
+     * 增加按钮按下class对应颜色
+     *
+     * @param {obj} $dom dom object
+     */
+    function addHoverClass($dom) {
+        $dom.on('touchstart', function () {
+            // 按钮按下时，改变颜色
+            $(this).addClass('down');
+        }).on('mousedown', function () {
+            // 鼠标按下时，改变颜色
+            $(this).addClass('down');
+        }).on('touchend', function () {
+            // 按钮抬起时，改变颜色*2，收起菜单
+            $(this).removeClass('down');
+        }).on('mouseup', function () {
+            // 鼠标抬起时，改变颜色*2，收起菜单
+            $(this).removeClass('down');
+        });
+    }
+
+    function showNavBar(me) {
+        var $this = $(me);
+        $this.removeAttr('style');
+    }
+
+    // build 方法，元素插入到文档时执行，仅会执行一次
+    customElement.prototype.build = build;
+    return customElement;
+});
diff --git a/src/mip-nav-slidedown/mip-nav-slidedown.less b/src/mip-nav-slidedown/mip-nav-slidedown.less
new file mode 100644
index 000000000..4e1d49691
--- /dev/null
+++ b/src/mip-nav-slidedown/mip-nav-slidedown.less
@@ -0,0 +1,231 @@
+.mip-nav-wrapper {
+    height: 72px;
+    &.show {
+        opacity: 1!important;
+    }
+    .hr-xs {
+        display: none;
+    }
+}
+mip-nav-slidedown{
+    #bs-navbar {
+        margin-bottom: 0;
+        margin-right: 0px;
+        float: right;
+        .navbar-nav {
+            display: -ms-flexbox;
+            display: -webkit-box;
+            display: -webkit-flex;
+            display: flex;
+            margin-top: 10px;
+            margin-right: -25px;
+            li {
+                list-style: none;
+                line-height: 50px;
+                &.active a,
+                &.active mip-link
+                &.active span {
+                    color: black;
+                    font-weight: bold;
+
+                }
+            }
+            mip-link,
+            a,
+            span {
+                white-space: nowrap;
+                margin: 15px;
+                padding: 10px;
+                color: #666;
+                &:hover,
+                &:focus {
+                    text-decoration: none;
+                    background: transparent;
+                    color: black;
+                }
+            }
+        }
+    }
+    .navbar-wise-close {
+        display: none;
+    }
+    .navbar-brand {
+        float: none;
+        display: inline-block;
+        margin: 15px 0 10px;
+        height: 41px;
+        background-size: 100% auto;
+        position: absolute;
+        font-size: 26px;
+        &:hover,
+        &:active {
+            color: rgba(255, 255, 255, 0.85);
+        }
+    }
+    .navbar-header {
+        float: left;
+    }
+    .navbar-toggle {
+        display: none;
+    }
+
+}
+@media screen and (max-width: 767px) {
+    .mip-nav-wrapper {
+        height: 44px;
+        #bs-navbar {
+            height: 0;
+            transition: height 0.3s;
+            width: 100%;
+            left: 0;
+            overflow-y: scroll;
+            -webkit-overflow-scrolling : touch;
+            overflow-scrolling : touch;
+            z-index: 1000;
+            border: 0;
+            float: none;
+            position: absolute;
+            background-color: white;
+            .navbar-nav {
+                margin: 0;
+                min-height: 283px;
+                height: 100%;
+                display: block;
+                li {
+                    padding: 5px 0;
+                }
+                a,
+                mip-link,
+                span {
+                    text-align: center;
+                    color: #333;
+                    font-size: 18px;
+                    padding: 0;
+                    margin: 0 auto;
+                    display: block;
+                }
+            }
+        }
+        .navbar-header {
+            float: none;
+            overflow: hidden;
+        }
+        .container > .navbar-collapse {
+            padding: 0;
+            background-color: white;
+        }
+        .navbar-static-top .navbar-brand {
+            left: 50%;
+            margin-left: -30px;
+        }
+        .navbar-static-top a {
+            margin: 0;
+        }
+        .navbar-brand {
+            margin: 5px 0 0;
+            height: 33px;
+            font-size: 23px;
+        }
+        .navbar-toggle {
+            display: block;
+            margin: 8px 0;
+            padding: 5px;
+            border: 0;
+            background: transparent;
+            float: right;
+            .icon-bar {
+                background-color: white;
+                height: 2px;
+                width: 23px;
+                background: #999;
+                display: block;
+            }
+            .icon-bar + .icon-bar {
+                margin-top: 6px;
+            }
+        }
+        .hr-xs {
+            display: block!important;
+            border-color: #eee;
+            margin: 0 10px;
+            border-top: 0;
+        }
+        .navbar-wise-close {
+            display: block;
+            text-align: center;
+            margin: 20px 0;
+        }
+        #navbar-wise-close-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            border: 1px solid #d4d4d4;
+            display: inline-block;
+            position: relative;
+            &:before {
+                content: '';
+                width: 1px;
+                height: 25px;
+                display: inline-block;
+                position: absolute;
+                background: #d4d4d4;
+                transform: rotate(45deg);
+                -webkit-transform: rotate(45deg);
+                top: 7px;
+            }
+            &:after {
+                content: '';
+                width: 1px;
+                height: 25px;
+                display: inline-block;
+                position: absolute;
+                background: #d4d4d4;
+                transform: rotate(-45deg);
+                -webkit-transform: rotate(-45deg);
+                top: 7px;
+            }
+            &.down {
+                background: #f3f3f3;
+            }
+        }
+        .sr-only {
+            position: absolute;
+            width: 1px;
+            height: 1px;
+            padding: 0;
+            margin: -1px;
+            overflow: hidden;
+            clip: rect(0, 0, 0, 0);
+            border: 0;
+        }
+    }
+}
+@media screen and (min-width: 768px) {
+    mip-nav-slidedown #bs-navbar{
+        li{
+            .navbar-more:after {
+                content: '';
+                position: relative;
+                display: inline-block;
+                border: 4px solid;
+                top: 1px;
+                border-color: #666 transparent transparent;
+                left: 3px;
+            }
+            &:hover .navbar-more:after {
+                border-color: transparent transparent #666;
+                top: -3px;
+            }
+        }
+        li > ul {
+            display: none;
+            list-style: none;
+            position: absolute;
+            background: white;
+        }
+        li:hover > ul {
+            display:inherit;
+            z-index: 10;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/mip-nav-slidedown/package.json b/src/mip-nav-slidedown/package.json
new file mode 100644
index 000000000..8eea2b460
--- /dev/null
+++ b/src/mip-nav-slidedown/package.json
@@ -0,0 +1,14 @@
+{
+    "name": "mip-nav-slidedown",
+    "version": "1.1.4",
+    "description":"响应式菜单，在mip官网有引用。",   
+    "contributors": [
+        {
+            "name": "liangjiaying",
+            "email": "liangjiaying@baidu.com"
+        } 
+    ],
+    "engines": {
+        "mip": ">=1.1.0"
+    }
+}
diff --git a/src/mip-nav-slidedown/setting/example.preset b/src/mip-nav-slidedown/setting/example.preset
new file mode 100644
index 000000000..c92e727a0
--- /dev/null
+++ b/src/mip-nav-slidedown/setting/example.preset
@@ -0,0 +1,5 @@
+<style mip-custom>
+    .body {
+        background: #eee
+    }
+ </style>
\ No newline at end of file
diff --git a/src/mip-stats-tianrun/README.md b/src/mip-stats-tianrun/README.md
new file mode 100644
index 000000000..d85bea410
--- /dev/null
+++ b/src/mip-stats-tianrun/README.md
@@ -0,0 +1,26 @@
+# mip-stats-tianrun 天润统计
+
+添加天润统计。
+
+标题|内容
+----|----
+类型|通用，定制
+支持布局|responsive,fixed-height,fill,container,fixed
+所需脚本|https://mipcache.bdstatic.com/static/v1/mip-stats-tianrun/mip-stats-tianrun.js
+
+## 示例
+
+MIP 提供天润的插件，便于站长更好的接入 MIP，noscript 标签中是的代码是当访客手机不支持JS时直接URL回传统计数据，内容由第三方站长自己实现参数填充，代码示例：
+
+```html
+<!-- 人民网CMS自己实现参数填充 noscript 示例：-->
+<mip-stats-tianrun>
+    <noscript>
+        <img src="//cl2.webterren.com/11.gif?z=26&amp;_wdxid=000000000000000000000000000000000000000000&amp;_wdt=011&amp;_wdc=w_2930&amp;_wdci=7678771&amp;_wda=254&amp;_wdp=2016-10-08&amp;_wdori=%u4e2d%u56fd%u53f0%u6e7e%u7f51%u7efc%u5408&amp;_wdti=%u6e56%u5317%u8b66%u6821%u6821%u82b1%u6652%u82f1%u6b66%u5236%u670d%u7167%u0030%u7ec6%u6570%u8b66%u5bdf%u754c%u7684%u4eba%u6c14%u201c%u7f51%u7ea2%u201d&amp;_wdurl=http://m2.people.cn/mip/r/MV80Xzc2Nzg3NzFfMjkzMF8xNDc1ODgzNjcz?s=baidu-mip&amp;_wdqd=m2_baidu&amp;_wdvs=wap&amp;_wda2=254&amp;_wdot=0" width="0" height="0" alt=""/>
+    </noscript>
+</mip-stats-tianrun>
+```
+
+## 注意事项
+
+`img` 的 `src` 不能写协议
diff --git a/src/mip-stats-tianrun/mip-stats-tianrun.js b/src/mip-stats-tianrun/mip-stats-tianrun.js
new file mode 100755
index 000000000..e266f0c7b
--- /dev/null
+++ b/src/mip-stats-tianrun/mip-stats-tianrun.js
@@ -0,0 +1,31 @@
+/**
+ * @file 天润统计
+ *
+ * @author wangpei
+ * @copyright 2016 Baidu.com, Inc. All Rights Reserved
+ */
+
+define(function (require) {
+    var customElement = require('customElement').create();
+    var util = require('util');
+    
+    customElement.prototype.build = function () {
+        var _this = this;
+
+        util.css(_this.element, 'display', 'none');
+
+        var node = document.createElement('script');
+        node.type = 'text/javascript';
+        node.src = '//cl2.webterren.com/webdig.js?z=26';
+        _this.element.appendChild(node);
+
+        node.onload = function() {
+            var node2 = document.createElement('script');
+            node2.type = 'text/javascript';
+            node2.innerHTML = 'wd_paramtracker("_wdxid=000000000000000000000000000000000000000000");';
+            _this.element.appendChild(node2);
+        };
+    }
+    return customElement;
+
+});
diff --git a/src/mip-stats-tianrun/package.json b/src/mip-stats-tianrun/package.json
new file mode 100644
index 000000000..79e56a601
--- /dev/null
+++ b/src/mip-stats-tianrun/package.json
@@ -0,0 +1,13 @@
+{
+    "name": "mip-stats-tianrun",
+    "version": "1.1.2",
+    "description": "添加天润统计。",
+    "author": {
+        "name": "MIP authors",
+        "email": "mip-support@baidu.com",
+        "url": "https://www.mipengine.org"
+    },
+    "engines": {
+        "mip": ">=1.1.0"
+    }
+}
\ No newline at end of file
diff --git a/src/mip-vd-tabs/README.md b/src/mip-vd-tabs/README.md
new file mode 100644
index 000000000..5dc8ec072
--- /dev/null
+++ b/src/mip-vd-tabs/README.md
@@ -0,0 +1,151 @@
+# mip-vd-tabs tab 切换组件
+
+在网页中显示标签。标签页内元素较多时不建议使用,会影响页面性能.
+
+标题|内容
+----|----
+类型|通用
+支持布局|responsive,fixed-height,fill,container,fixed
+所需脚本|https://mipcache.bdstatic.com/static/v1/mip-vd-tabs/mip-vd-tabs.js
+
+## 示例
+
+一共支持5种样式
+
+### 等分固定标签页
+
+```
+<mip-vd-tabs>
+    <section>
+        <li>第一页</li>
+        <li>第二页</li>
+        <li>第三页</li>
+        <li>第四页</li>
+    </section>
+    <div>内容1</div>
+    <div>内容2</div>
+    <div>内容3</div>
+    <div>内容4</div>
+</mip-vd-tabs>
+```
+### 横滑标签页
+
+```
+<mip-vd-tabs allow-scroll>
+    <section>
+        <li>第一季</li>
+        <li>第二季</li>
+        <li>第三季</li>
+        <li>第四季</li>
+        <li>第五季</li>
+        <li>第六季更新至09</li>
+    </section>
+    <div>内容1</div>
+    <div>内容2</div>
+    <div>内容3</div>
+    <div>内容4</div>
+    <div>内容5</div>
+    <div>内容6</div>
+</mip-vd-tabs>
+```
+
+### 带下拉按钮的横滑标签页
+
+```
+<mip-vd-tabs allow-scroll toggle-more toggle-label="自定义文字">
+    <section>
+        <li>第一季</li>
+        <li>第二季</li>
+        <li>第三季</li>
+        <li>第四季更新至09</li>
+    </section>
+    <div>内容1</div>
+    <div>内容2</div>
+    <div>内容3</div>
+    <div>内容4</div>
+</mip-vd-tabs>
+```
+
+### 底部标签页
+
+```
+<mip-vd-tabs allow-scroll type="bottom" current="3">
+    <div>内容1</div>
+    <div>内容2</div>
+    <div>内容3</div>
+    <div>内容4</div>
+    <section>
+        <li>第一季</li>
+        <li>第二季</li>
+        <li>第三季</li>
+        <li>第四季更新至09</li>
+    </section>
+</mip-vd-tabs>
+```
+
+### 剧情展开标签页
+```
+<mip-vd-tabs
+    type="episode"
+    toggle-more
+    toggle-label="老九门剧情选集"
+    allow-scroll
+    total="23"
+    current="11"
+    text-tpl="看第{{x}}集"
+    link-tpl="http://www.baidu.com/{{x}}/juji">
+</mip-vd-tabs>
+```
+
+## 属性
+
+### type
+
+说明：一共有三种特型, bottom(底部选项卡), episode(剧情选项卡), 不填则为默认特型  
+必填项：否
+
+### allow-scroll
+
+说明：允许滑动  
+必填项：否
+
+### toggle-more
+
+说明：是否显示下拉按钮. 前置依赖于allow-scroll属性  
+必填项：否
+
+### toggle-label
+
+说明：下拉说明文字. 前置依赖于toggle-more属性  
+必填项：否
+
+### current
+
+说明：当前已选标签页, 从0开始计数(current="3"表示第4个标签页). 当type="episode"时,表示当前剧集,从1开始计数(current="4"表示第4集),默认为1.  
+必填项：否
+
+### total
+
+说明：剧集总数. 前置依赖于type="episode",并且当type="episode"为必填  
+必填项：否
+
+### page-size
+
+说明：每页显示剧集数. 前置依赖于type="episode",默认为50  
+必填项：否
+
+### text-tpl
+
+说明：显示在标签页上的剧集文案, "第{{x}}集"里的"{{x}}"将被替换成表示集数的数字. 前置依赖于type="episode".  
+必填项：否
+
+### link-tpl
+
+说明：标签页和下拉菜单里的剧集跳转链接, 链接里的"{{x}}"将被替换成表示集数的数字. 前置依赖于type="episode",当type="episode"为必填.  
+必填项：否
+
+### head-title
+
+说明：标签页和下拉菜单里的剧集跳转新页面的头部标题. 前置依赖于type="episode",当type="episode"为必填.  
+必填项：否
+
diff --git a/src/mip-vd-tabs/mip-vd-tabs.js b/src/mip-vd-tabs/mip-vd-tabs.js
new file mode 100644
index 000000000..e3e55056d
--- /dev/null
+++ b/src/mip-vd-tabs/mip-vd-tabs.js
@@ -0,0 +1,387 @@
+/**
+ * @file tab组件
+ *
+ * @author zhangjignfeng
+ * @copyright 2016 Baidu.com, Inc. All Rights Reserved
+ */
+
+define(function (require) {
+    var $ = require('zepto');
+
+    var customElement = require('customElement').create();
+    var Tab = require('./tab');
+    var EPISODE_RANGE = 25;
+    var EPISODE_PAGE_SIZE = 50;
+    var ICON_SRC = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAQCAMAAAA/D5+aAAAAUVBMVEUAAABmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmbIinYlAAAAGnRSTlMABKqP+IFs7+fStaZaSjsuGBAK3tzGw3gkIaqv3YsAAABmSURBVBjTddE5FoMwEMBQGcy+Q1bd/6Cp8xir/aWARKn3FFjdAK2O5020gVp9HjexStCowx4JtOr1iQTmrP0WCSxZuzUSWDvNSySw9ZrnSOD7UNtIYB/UUOB4lQTOsSSQpqp84U9+ascIWXpxA/QAAAAASUVORK5CYII=';
+    var ALLOW_SCROLL = 'allow-scroll';
+    var TOGGLE_MORE = 'toggle-more';
+    var CURRENT = 'current';
+    var TYPE = 'type';
+    var WRAPPER_CLS = 'mip-vd-tabs';
+    var CONTENT_CLS = 'mip-vd-tabs-content';
+    var SELECTED_CLS = 'mip-vd-tabs-nav-selected';
+    var ITEM_CLS = 'mip-vd-tabs-nav-li';
+    var NAV_CLS = 'mip-vd-tabs-nav';
+    var VIEW_CLS = 'mip-vd-tabs-nav-view';
+    var TOGGLE_CLS = 'mip-vd-tabs-nav-toggle';
+    var BOTTOM_CLS = 'mip-vd-tabs-nav-bottom';
+    var TPL_REG = /\{\{\w}}/g;
+    /**
+     * 渲染
+     */
+    customElement.prototype.build = function () {
+        var el = this.element;
+        var type = el.getAttribute(TYPE);
+        switch (type) {
+            case 'episode':
+                var $result = generateWrapper.call(this);
+                if (el.hasAttribute(TOGGLE_MORE)) {
+                    $result = generateToggle.call(this, $result);
+                }
+                generateEpisode.call(
+                    this,
+                    $result,
+                    el.getAttribute('total'),
+                    el.getAttribute(CURRENT),
+                    el.getAttribute('text-tpl'),
+                    el.getAttribute('link-tpl'),
+                    el.getAttribute('head-title')
+                );
+                break;
+            case 'bottom':
+            default:
+                generateCommonTab.call(this, $result);
+        }
+
+    }
+
+    function generateCommonTab() {
+        var el = this.element;
+        var $el = $(el);
+        var type = el.getAttribute(TYPE);
+        var allowScroll = !!el.hasAttribute(ALLOW_SCROLL);
+        var toggleMore = !!el.hasAttribute(TOGGLE_MORE);
+        var current = parseInt(el.getAttribute(CURRENT), 0) || 0;
+        var $header = null;
+        $el.addClass(WRAPPER_CLS);
+
+        if (type === 'bottom') {
+            $header = $(el.children.item(el.children.length - 1));
+        } else {
+            $header = $(el.children.item(0));
+        }
+
+        $header.detach();
+        $header.children().each(function (index, element) {
+            var $element = $(element);
+            if (current === index) {
+                $element.addClass(SELECTED_CLS);
+            }
+            $element.addClass(ITEM_CLS);
+        });
+        if (allowScroll) {
+            $header
+                .addClass(VIEW_CLS)
+                .append(
+                    $('<div class="' + NAV_CLS + '"></div>')
+                    .append($header.children())
+                );
+            if (toggleMore) {
+                $header.append('<div class="mip-vd-tabs-nav-toggle"><img src=' + ICON_SRC + '></div>');
+            }
+        } else {
+            $header
+                .addClass('mip-vd-tabs-row-tile')
+                .append(
+                    $('<div class="' + NAV_CLS + '"></div>')
+                        .append($header.children())
+                );
+        }
+
+        $el.children()
+            .addClass(CONTENT_CLS)
+            .css('display', 'none')
+            .eq(current)
+            .css('display', 'block');
+
+        if (type === 'bottom') {
+            $el.append($header);
+        } else {
+            $el.prepend($header);
+        }
+
+        new Tab($el, {
+            allowScroll: allowScroll,
+            current: parseInt($el.attr(CURRENT), 10) || 1,
+            toggleMore: toggleMore,
+            toggleLabel: $el.attr('toggle-label') || '请选择',
+            currentClass: SELECTED_CLS,
+            navWrapperClass: NAV_CLS,
+            viewClass: VIEW_CLS,
+            contClass: CONTENT_CLS,
+            navClass: ITEM_CLS,
+            logClass: 'mip-vd-tabs-log',
+            toggleClass: TOGGLE_CLS,
+            layerClass: 'mip-vd-tabs-nav-layer',
+            layerUlClass: 'mip-vd-tabs-nav-layer-ul'
+        });
+    }
+
+    /**
+     * 生成剧集选择下拉列表
+     * @returns {jQuery|HTMLElement}
+     */
+
+    function generateEpisodeDown(linkTpl) {
+        var $el = $(this.element);
+        var pageSize = parseInt($el.attr('page-size'), 10) || EPISODE_PAGE_SIZE;
+        var currentNum = parseInt($el.attr(CURRENT), 10) || 1;
+        var totalNum = parseInt($el.attr('total'), 10) || 1;
+        var tabCount = Math.ceil(totalNum / pageSize);
+        var tabCurNum = Math.floor((currentNum - 1) / pageSize);
+        var tabList = [];
+
+
+        for (var i = 0; i < tabCount; i++) {
+            var from = pageSize * i + 1;
+            var to = Math.min(totalNum, pageSize * (i + 1));
+            tabList.push({
+                from: from,
+                to : to,
+                text: '' + from + (from < to ? ' - ' + to : '')
+            });
+        }
+
+
+        var wrapper = $('<div class="' + WRAPPER_CLS + '"></div>');
+        wrapper.append(
+            tabList.map(function (v, index) {
+                var epFragment = '<div class="'
+                    + CONTENT_CLS
+                    + ' mip-vd-tabs-episode-content" '
+                    + (index === tabCurNum ? '' : 'style="display:none;" ')
+                    + ' >';
+                for (var j = v.from; j <= v.to; j++) {
+                    var selectedClass = j === currentNum ? 'mip-vd-tabs-episode-item-selected' : '';
+                    var link = (linkTpl ? ' href="' + linkTpl.replace(TPL_REG, j) + '"' : '' );
+                    epFragment = epFragment
+                        + '<span class="mip-vd-tabs-episode-item '
+                        + selectedClass + '"'
+                        + link + '>'
+                        + j
+                        + '</span>';
+                }
+                epFragment += '</div>';
+                return epFragment;
+            }).join('')
+        );
+
+        if (tabCount > 1) {
+            var tabFragment = '';
+            var scrollNum = 4;
+            if (tabCount > scrollNum) {
+                tabFragment = '<div class="' + VIEW_CLS + '">';
+            }
+            tabFragment += '<ul class="' + NAV_CLS + ' ' + BOTTOM_CLS + ' ' + 'mip-vd-tabs-episode-bottom-nav">';
+            tabFragment += tabList.map(function (v, index) {
+                var selectedClass = index === tabCurNum ? SELECTED_CLS : '';
+                return '<li class="' + ITEM_CLS + ' ' + selectedClass + '">' + v.text + '</li>';
+            }).join('');
+            tabFragment += '</ul>';
+            if (tabCount > scrollNum) {
+                tabFragment += '</div>';
+            }
+            wrapper.append(tabFragment);
+
+            new Tab(wrapper, {
+                allowScroll: tabCount > scrollNum,
+                current: Math.floor((currentNum - 1) / pageSize) || 1,
+                currentClass: SELECTED_CLS,
+                navWrapperClass: NAV_CLS,
+                viewClass: VIEW_CLS,
+                contClass: CONTENT_CLS,
+                navClass: ITEM_CLS,
+                logClass: 'mip-vd-tabs-log',
+                toggleClass: TOGGLE_CLS
+            })
+        }
+        return wrapper;
+    }
+
+    function generateWrapper() {
+        var $el = $(this.element);
+        var $result = null;
+        $el.addClass(WRAPPER_CLS);
+        var totalNum = parseInt($el.attr('total'), 10) || 1;
+        if (totalNum > 4) {
+            $result = $('<div class="' + VIEW_CLS + '">'
+                + '<ul class="' + NAV_CLS + '"></ul>'
+                + '</div>'
+            );
+        } else {
+            $result = $('<div class="mip-vd-tabs-row-tile">'
+                + '<ul class="' + NAV_CLS + '"></ul>'
+                + '</div>'
+            );
+        }
+        return $result;
+    }
+
+    function generateToggle($result) {
+        var $el = $(this.element);
+        var totalNum = parseInt($el.attr('total'), 10) || 1;
+        if (totalNum <= 4) {
+            return $result;
+        }
+
+        $result.append('<div class="' + TOGGLE_CLS + '">'
+            + '<img src=' + ICON_SRC + '>'
+            + '</div>');
+        return $result;
+    }
+
+    function generateEpisode($result, total, current, textTpl, linkTpl, headTitle) {
+        var $el = $(this.element);
+
+        var totalNum = parseInt(total, 10);
+        var currentNum = parseInt(current, 10) || 1;
+        var tpl = textTpl || '第{x}集';
+        var html = '';
+        for (var i = Math.max(1, currentNum - EPISODE_RANGE),
+                 r = Math.min(totalNum, currentNum + EPISODE_RANGE);
+             i <= r;
+             i++) {
+            html = html
+                + '<a class="' + ITEM_CLS + ' '
+                + (i === currentNum ? SELECTED_CLS : '')+ '" '
+                + (linkTpl ? ' href="' + linkTpl.replace(TPL_REG, i) + '"' : '' ) + '>'
+                + tpl.replace(TPL_REG, '' + i)
+                + '</a>';
+        }
+
+        $result.find('.' + NAV_CLS).append(html);
+        $el.empty().append($result);
+
+
+        var tab = new Tab($el, {
+            allowScroll: !!$el.get(0).hasAttribute(ALLOW_SCROLL),
+            toggleMore: false,
+            current: currentNum || 1,
+            currentClass: SELECTED_CLS,
+            navWrapperClass: NAV_CLS,
+            viewClass: VIEW_CLS,
+            navClass: ITEM_CLS,
+            logClass: 'mip-vd-tabs-log',
+            toggleClass: TOGGLE_CLS,
+            toggleLabel: $el.attr('toggle-label') || '请选择'
+        });
+
+        // override toggle-more
+        (function register(ptr) {
+            var _this = tab;
+            var $navLayer = $('<div class="mip-vd-tabs-nav-layer"><p>' + _this.toggleLabel + '</p></div>');
+            var $navLayerUl = $('<ul class="mip-vd-tabs-nav-layer-ul"></ul>');
+            var $mask = $('<div class="mip-vd-tabs-mask"></div>');
+
+            _this.toggleState = 0;   // 展开状态 0-收起,1-展开
+
+            // 事件代理
+            $navLayerUl.on('click', '.mip-vd-tabs-episode-item ', function(){
+                toggleUp();
+            });
+
+            $mask.on('click', function () {
+                toggleUp();
+            }).on('touchmove', function (e) {
+                e.preventDefault();
+            });
+
+            _this.toggle.on('click', function() {
+                if (_this.toggleState == 0) {
+                    // 点击时为收起
+                    toggleDown();
+                } else {
+                    // 点击时为展开
+                    toggleUp();
+                }
+            });
+
+            // 收起
+            function toggleUp() {
+                $navLayerUl.empty();
+                $navLayer.hide();
+                $mask.hide();
+                $el
+                    .find('.mip-vd-tabs-nav-toggle,.mip-vd-tabs-scroll-touch')
+                    .css({'position': '', 'top': ''});
+                $el
+                    .find('.mip-vd-tabs-nav-layer')
+                    .css({'position': '', 'border-top': '', 'top': ''});
+                _this.toggle.css({
+                    '-webkit-transform': 'scaleY(1)',
+                    'transform': 'scaleY(1)'
+                });
+                _this.toggleState = 0;
+            }
+
+            // 展开
+            function toggleDown() {
+                $navLayerUl.html(generateEpisodeDown.call(ptr, linkTpl));
+                $navLayer.append($navLayerUl);
+                $el.append($mask.show());
+                _this.view.after($navLayer.show());
+                $el
+                    .find('.mip-vd-tabs-scroll-touch,.mip-vd-tabs-nav-toggle')
+                    .css({'position': 'fixed', 'top': '1px'});
+                $el
+                    .find('.mip-vd-tabs-nav-layer')
+                    .css({'position': 'fixed', 'border-top': '1px solid #ccc', 'top': '0'});
+                _this.toggle.css({
+                    '-webkit-transform': 'scaleY(1)',
+                    'transform': 'scaleY(-1)'
+                });
+                _this.toggleState = 1;
+            }
+        })(this);
+
+
+        $el.delegate('.' + ITEM_CLS + ', .mip-vd-tabs-episode-item', 'click' , function(ev) {
+
+            ev.preventDefault();
+
+            var href = $(this).attr("href");
+
+            if (!href) {
+                return;
+            }
+
+
+            // 顶部标题
+            var head = $(this).text();
+
+            if (!head) {
+                head = $(this).find('.' + ITEM_CLS).text();
+            }
+
+            var message = {
+                "event": "loadiframe",
+                "data": {
+                    "url": href,
+                    "title": headTitle || head,
+                    "click": $el.data('click')
+                }
+            };
+
+            if (window.parent !== window) {
+                window.parent.postMessage(message, '*');
+            }
+            else {
+                location.href = href;
+            }
+
+        });
+    }
+
+    return customElement;
+
+});
diff --git a/src/mip-vd-tabs/mip-vd-tabs.less b/src/mip-vd-tabs/mip-vd-tabs.less
new file mode 100644
index 000000000..90bb97c01
--- /dev/null
+++ b/src/mip-vd-tabs/mip-vd-tabs.less
@@ -0,0 +1,233 @@
+mip-vd-tabs{
+    &.mip-vd-tabs {
+        position: relative;
+    }
+
+    .mip-vd-tabs-nav {
+        display: -webkit-box;
+        display: -webkit-flex;
+        height: 44px;
+        font-size: 14px;
+        white-space: nowrap;
+        background-color: #fff;
+
+        -webkit-align-content: flex-start;
+        -webkit-align-items: stretch;
+        -webkit-box-align: stretch;
+        -webkit-box-direction: normal;
+        -webkit-box-lines: single;
+        -webkit-box-orient: horizontal;
+        -webkit-box-pack: justify;
+        -webkit-flex-direction: row;
+        -webkit-flex-wrap: nowrap;
+        -webkit-justify-content: space-between;
+        padding: 0 16px;
+    }
+
+    .mip-vd-tabs-nav * {
+        -webkit-box-sizing: border-box;
+        box-sizing: border-box;
+    }
+
+    .mip-vd-tabs-nav-li {
+        display: block;
+        overflow: hidden;
+        width: 16.66666667%;
+        height: 44px;
+        padding: 0 14px 0 15px;
+        line-height: 44px;
+        text-align: center;
+        white-space: nowrap;
+        text-decoration: none;
+        text-overflow: ellipsis;
+        list-style: none;
+        color: #333;
+
+        -webkit-box-flex: 1;
+        -webkit-flex: 1 1 auto;
+    }
+
+    .mip-vd-tabs-nav .mip-vd-tabs-nav-selected {
+        border-bottom: 1px solid #38f;
+        color: #38f;
+    }
+
+    .mip-vd-tabs-nav-bottom {
+        border-top: 1px solid #eee;
+        background: #f8f8f8;
+    }
+
+    .mip-vd-tabs-nav-bottom .mip-vd-tabs-nav-li {
+        color: #666;
+    }
+
+    .mip-vd-tabs-nav-bottom .mip-vd-tabs-nav-icon {
+        display: none;
+    }
+
+    .mip-vd-tabs-nav-bottom .mip-vd-tabs-nav-li.mip-vd-tabs-nav-selected {
+        position: relative;
+        top: -1px;
+        height: 38px;
+        border: 1px solid #f1f1f1;
+        border-color: #fff #f1f1f1 #38f #f1f1f1;
+        line-height: 38px;
+        color: #333;
+        background-color: #fff;
+    }
+
+    .mip-vd-tabs-nav-bottom .mip-vd-tabs-nav-selected:first-child {
+        margin-left: -1px;
+    }
+
+    .mip-vd-tabs-nav-bottom .mip-vd-tabs-nav-selected .mip-vd-tabs-nav-icon {
+        display: inline-block;
+    }
+
+    .mip-vd-tabs-nav-view {
+        position: relative;
+        overflow: hidden;
+        height: 44px;
+        text-align: left;
+        background-color: #fff;
+    }
+
+    .mip-vd-tabs-nav-view .mip-vd-tabs-nav {
+        display: inline-block;
+        position: relative;
+    }
+
+    .mip-vd-tabs-nav-view .mip-vd-tabs-nav .mip-vd-tabs-nav-li {
+        display: inline-block;
+        vertical-align: middle;
+        width: auto;
+        padding: 0 15px;
+    }
+
+    .mip-vd-tabs-nav-view .mip-vd-tabs-nav.mip-vd-tabs-nav-bottom {
+        background-color: #f8f8f8;
+        position: relative;
+        display: inline-block;
+        vertical-align: middle;
+    }
+
+    .mip-vd-tabs-nav-layer {
+        position: absolute;
+        z-index: 8;
+        top: 0;
+        width: 100%;
+        border-bottom: 1px solid #e7e7e7;
+        background-color: #fff;
+    }
+
+    .mip-vd-tabs-nav-layer p {
+        height: 44px;
+        padding: 0 16px;
+        border-bottom: 1px solid #eee;
+        line-height: 44px;
+        text-align: left;
+        color: #333;
+    }
+
+    .mip-vd-tabs-nav-layer-ul .mip-vd-tabs-nav-li {
+        display: inline-block;
+        width: 16.66666667%;
+        padding: 0;
+    }
+
+    .mip-vd-tabs-nav-layer-ul .mip-vd-tabs-nav-selected {
+        color: #38f;
+    }
+
+    .mip-vd-tabs .mip-vd-tabs-nav-toggle {
+        position: absolute;
+        z-index: 9;
+        top: 0;
+        right: 0;
+        display: block;
+        width: 42px;
+        height: 26px;
+        margin: 9px 0;
+        border-left: 1px solid #ccc;
+        text-align: center;
+        background-color: #fff;
+        img {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            display: inline-block;
+            width: 10px;
+            height: 6px;
+            margin: -3px 0 0 -5px;
+        }
+    }
+
+    .mip-vd-tabs .mip-vd-tabs-nav-toggle-holder {
+        display: inline-block;
+        width: 29px;
+        height: 1px;
+        visibility: hidden;
+    }
+
+    .mip-vd-tabs-scroll-touch {
+        position: relative;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+        padding-bottom: 30px;
+        margin-top: -30px;
+        -webkit-transform: translateY(30px);
+        transform: translateY(30px);
+        width: 1px;
+        min-width: 100%;
+    }
+
+    .mip-vd-tabs-episode-content {
+        padding: 15px 16px;
+        text-align: left;
+    }
+
+    .mip-vd-tabs-episode-item {
+        display: inline-block;
+        width: 20%;
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+    }
+
+    .mip-vd-tabs-episode-item-selected {
+        color: #38f;
+    }
+
+    .mip-vd-tabs-episode-bottom-nav {
+        padding: 0;
+        height: 38px;
+    }
+
+    .mip-vd-tabs-episode-bottom-nav .mip-vd-tabs-nav-li {
+        height: 38px;
+        line-height: 38px;
+    }
+
+    .mip-vd-tabs-nav-view > .mip-vd-tabs-scroll-touch > .mip-vd-tabs-episode-bottom-nav.mip-vd-tabs-nav > .mip-vd-tabs-nav-li {
+        display: inline-block;
+    }
+
+    .mip-vd-tabs-episode-bottom-nav.mip-vd-tabs-nav .mip-vd-tabs-nav-li {
+        display: block;
+    }
+
+    .mip-vd-tabs-row-tile {
+        width: 100%;
+        position: relative;
+        overflow: hidden;
+    }
+
+    .mip-vd-tabs-mask {
+        position: fixed;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        background: rgba(0,0,0,.4);
+    }
+}
\ No newline at end of file
diff --git a/src/mip-vd-tabs/package.json b/src/mip-vd-tabs/package.json
new file mode 100644
index 000000000..dcb4a9024
--- /dev/null
+++ b/src/mip-vd-tabs/package.json
@@ -0,0 +1,13 @@
+{
+    "name": "mip-vd-tabs",
+    "version": "1.1.2",
+    "description": "在网页中显示标签。标签页内元素较多时不建议使用,会影响页面性能。",   
+    "author": {
+        "name": "MIP authors",
+        "email": "mip-support@baidu.com",
+        "url": "https://www.mipengine.org"
+    },
+    "engines": {
+        "mip": ">=1.1.0"
+    }
+}
\ No newline at end of file
diff --git a/src/mip-vd-tabs/tab.js b/src/mip-vd-tabs/tab.js
new file mode 100644
index 000000000..4e4e9b2da
--- /dev/null
+++ b/src/mip-vd-tabs/tab.js
@@ -0,0 +1,257 @@
+define(function () {
+    var fn = function() {};
+    var inter;
+    var _init = function(opt) {
+            var _this = this,
+                $panel = $(_this.panel);
+
+            this.toggle = $panel.find('.' + _this.toggleClass);       // 更多切换按钮
+            this.view = $panel.find('.' + _this.viewClass);           // nav可视区dom
+            this.wrapper = $panel.find('.' + _this.navWrapperClass);  // nav实际区域dom
+            this.navs = this.wrapper.find('.' + _this.navClass);      // nav项
+            this.conts = $panel.find('.' + _this.contClass);          // tabs内容
+
+            this.sum = this.navs.length;
+            this.tabScroll = undefined;
+
+            _setEvents.call(this);
+            this.allowScroll && this.view.length && _setScroll.call(this);
+            this.toggleMore && this.allowScroll && this.view.length && _setToggerMore.call(this);
+        },
+        _setWrap = function ($wrapper) {
+            var _this = this;
+            $wrapper.children().eq(0).wrap('<div class="mip-vd-tabs-scroll-touch"></div>');
+            // UC浏览器对overflow-x兼容性太差,只能用元素占位的方式来解决
+            if ($wrapper.children().eq(1).hasClass(_this.toggleClass)) {
+                $wrapper.find('.' + _this.navWrapperClass).append(
+                    '<div class="mip-vd-tabs-nav-toggle-holder"></div>'
+                );
+            }
+            return $wrapper;
+        },
+        _setScroll = function() {
+            var _this = this;
+
+            _this.tabScroll = _setWrap.call(_this, _this.view);
+
+            // 前置检测选中的tab是否在可视区
+            if (_this.current > 0 && _this.current < _this.sum) {
+                var currentTab = Math.min(_this.current + 1, _this.sum - 1);
+                slideTo(currentTab, 1, _this.navs.eq(_this.current), _this.navs.length, false);
+            }
+
+            // 若tab横滑回调方法存在,执行回调
+            if (typeof _this.onTabScrollEnd === 'function') {
+                _this.tabScroll.on('scrollEnd', function () {
+                    if (this.customFlag && this.customFlag.autoScroll) {
+                        // 若为自动触发滑动，不执行回调
+                        return;
+                    }
+                    ;
+                    _this.onTabScrollEnd.call(_this, this);
+                });
+            }
+
+        },
+        _setToggerMore = function() {
+            var _this = this;
+            var $navLayer = $('<div class="' + _this.layerClass + '"><p>' + _this.toggleLabel + '</p></div>');
+            var $navLayerUl = $('<ul class="' + _this.layerUlClass + '"></ul>');
+
+            _this.toggleState = 0;   // 展开状态 0-收起,1-展开
+
+            // 事件代理
+            $navLayerUl.on('click', '.'+_this.navClass, function(){
+                var $dom_this = $(this);
+                //$(this).addClass(_this.currentClass);
+                _this.navs.eq($dom_this.attr('data-tid')).trigger('click');
+                toggleUp();
+            });
+
+            _this.toggle.on('click', function() {
+                if (_this.toggleState == 0) {
+                    // 点击时为收起
+                    toggleDown();
+                } else {
+                    // 点击时为展开
+                    toggleUp();
+                };
+            });
+
+            // 收起
+            function toggleUp() {
+                $navLayerUl.empty();
+                $navLayer.hide();
+                _this.toggle.css({
+                    '-webkit-transform': 'scaleY(1)',
+                    'transform': 'scaleY(1)'
+                });
+                _this.toggleState = 0;
+            }
+
+            // 展开
+            function toggleDown() {
+                $navLayerUl.html(_this.navs.clone());
+                $navLayer.append($navLayerUl);
+                _this.view.after($navLayer.show());
+                _this.toggle.css({
+                    '-webkit-transform': 'scaleY(1)',
+                    'transform': 'scaleY(-1)'
+                });
+                _this.toggleState = 1;
+            }
+
+        },
+        _setEvents = function() {
+            var _this = this;
+
+            $.each(_this.navs, function(i, v){
+                var $v = $(v);
+                if($v.hasClass(_this.currentClass)){
+                    _this.current = i;          // 获取当前nav序号
+                }
+
+                $v.addClass(_this.logClass);
+                $v.attr('data-tid', i);
+
+                $v.on('click', function(){
+                    var tid = parseInt($(this).attr('data-tid'));
+                    if(tid === _this.current){
+                        return;
+                    }
+
+                    _this.last = _this.current;
+                    _this.current = tid;
+
+                    _this.hideTab(_this.last);
+                    _this.showTab(_this.current);
+
+                    if(_this.onResetChange == fn){
+                        _this.hideContent(_this.last);
+                        _this.showContent(_this.current);
+
+                        /* 添加异步处理事件，返回点击tab序号及内容框 */
+                        _this.onChange.call(_this, _this.current, _this.conts[_this.current]);
+                    }else{
+                        _this.onResetChange.call(_this, _this.current);
+                    }
+
+                    // 滑动对象存在,执行滑动并传递autoScroll标记用于scrollEnd事件判断
+                    if (_this.tabScroll) {
+                        slideTo(_this.current + 1, 1, $v, _this.navs.length, true);
+                    };
+                });
+            });
+
+            // 第一次加载
+            $.each(_this.conts, function(i, v){
+                if(i == _this.current){
+                    _this.showTab(i);
+                    _this.showContent(i);
+                }else{
+                    _this.hideTab(i);
+                    _this.hideContent(i);
+                }
+            });
+        };
+
+    var Tabs = function(panel, options) {
+        options = options || {};
+        this.panel = panel;
+        this.current = options.current || 0;      // 当前选中的tab
+        this.currentClass = options.currentClass || 'c-tabs-nav-selected';
+        this.navWrapperClass = options.navWrapperClass || 'c-tabs-nav';
+        this.navClass = options.navClass || 'c-tabs-nav-li';
+        this.contClass = options.contClass || 'c-tabs-content';
+        this.viewClass = options.viewClass || 'c-tabs-nav-view';
+        this.toggleClass = options.toggleClass || 'c-tabs-nav-toggle';
+        this.layerClass = options.layerClass || 'c-tabs-nav-layer';
+        this.layerUlClass = options.layerUlClass || 'c-tabs-nav-layer-ul';
+        this.allowScroll = options.allowScroll || false;    // 是否允许滚动
+        this.toggleMore = options.toggleMore || false;      // 是否允许切换显示更多
+        this.toggleLabel = options.toggleLabel || '请选择'; // 切换label
+        this.logClass = options.logClass || 'WA_LOG_TAB';   // 统计class
+        this.scrollSize = options.scrollSize || '-40';        // tabs滚动的size
+
+        this.navs = [];
+        this.seps = [];
+        this.conts = [];
+        this.sum = 0;       // tab切换次数
+        this.last = null;   // 上次tab切换序号
+
+        // 函数
+        this.onChange = options.onChange || fn;
+        this.onResetChange = options.onResetChange || fn;
+        this.onTabScrollEnd = options.onTabScrollEnd;
+
+        // init
+        panel && _init.call(this, options);
+    };
+
+    $.extend(Tabs.prototype, {
+        showContent : function(i){
+            var cont=this.conts[i];
+            if(cont){
+                $(this.conts[i]).show();
+            }
+        },
+        hideContent : function(i){
+            var cont=this.conts[i];
+            if(cont){
+                $(cont).hide();
+            }
+        },
+        showTab : function(i){
+            var _this = this,
+                navs = _this.navs,
+                seps = _this.seps;
+
+            $(navs[i]).addClass(_this.currentClass);
+        },
+        hideTab : function(i){
+            var _this = this,
+                navs = _this.navs,
+                seps = _this.seps;
+
+            $(navs[i]).removeClass(_this.currentClass);
+        }
+    });
+
+    function slideTo(index, leftNum, $thisDom, totalNum, animate) {
+        var left = 0;
+        if (index < leftNum) {
+
+        } else if (index >= totalNum - leftNum) {
+            left = $thisDom.parent().offset().width;
+        } else {
+            left = $thisDom.offset().left - $thisDom.parent().offset().left - $thisDom.width();
+        }
+        if (!inter) {
+            if (animate) {
+                animateSlide($thisDom.parent().parent().scrollLeft(), left, $thisDom.parent().parent());
+            } else {
+                $thisDom.parent().parent().scrollLeft(left);
+            }
+        }
+    }
+
+    function animateSlide (start, end, $dom) {
+        var x = (end - start)/8;
+        inter = setInterval(function () {
+            var scl = $dom.scrollLeft();
+
+            if ((x > 0 && scl >= end) || x == 0) {
+                x = 0;
+                clearInterval(inter);
+            } else if (x < 0 && scl <= end) {
+                x = 0;
+                clearInterval(inter);
+            }
+
+            $dom.scrollLeft(scl + x);
+        }, 30);
+        setTimeout(function(){clearInterval(inter); $dom.scrollLeft(end); inter = null;}, 270);
+    }
+
+    return Tabs;
+});