docs: 添加组件

mipengine · Nov 23, 2017 · a6abfa9 · a6abfa9
1 parent 346543b
commit a6abfa9
Show file tree

Hide file tree

Showing 13 changed files with 1,664 additions and 0 deletions.
diff --git a/src/mip-nav-slidedown/README.md 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
@@ -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;
+});