菜单下拉组件

示意图

源码js:

/**
 * 菜单
 nolest 2015.5.22
 **/

/**
 * @require ./index.scss
 */

"use strict";

var utility = require('../common/utility/index');
var $ = require('zepto');
var fastclick = require('fastclick');
var App =  require('../common/I_APP/I_APP');
var menu_tpl = __inline('./menu.tmpl');

if ('addEventListener' in document) {
    document.addEventListener('DOMContentLoaded', function() {
        fastclick.attach(document.body);
    }, false);
}


module.exports =
{
    render: function ($dom,data)
    {

        var self = this;

        self.data = self._sort(data);

        $dom.append(menu_tpl({menu_data:self.data}));

        self.init();
        // 安装事件
        self.setup_event();

        return this;
    },
    // 初始化
    init : function()
    {
        var self = this;

        self.menu_lock = $('[data-role="app_drop_menu_lock"]');

        self.menu = $('[data-role="app_drop_menu"]');

    },
    hide : function()
    {
        var self = this;

        setTimeout(function()
        {
            self.menu.removeClass('drop');
            self.menu.addClass('up');
        },0)
        self.menu_lock.css('visibility','hidden').addClass('fn-hide');
    },
    show : function()
    {
        var self = this;

        setTimeout(function()
        {
            self.menu.removeClass('up');
            self.menu.addClass('drop');
        },0)
        self.menu_lock.removeClass('fn-hide').css('visibility','visible');

    },
    // 安装事件
    setup_event : function()
    {
        var self = this;

        $.each($('[data-index]'),function(i,obj)
        {
            self.data[i].click_event && $(obj).on('click',self.data[i].click_event)
        });


        $('[data-role="app_drop_menu_lock"]').on('click',function()
        {
            self.hide();

        })
        /*
        $('[data-role="app_drop_menu_lock"]')[0].addEventListener('touchstart',function()
        {
            self.hide();

            window.__showTopBarMenuCount++;
        })
        */
    },
    _sort : function(events_data)
    {   //排序，返回序列化数组
        if(events_data.length < 2)
        {
            return
        }

        for(var k = 1;k <events_data.length;k++)
        {
            var obj_key = events_data[k];

            var j = k-1;

            while( j >= 0 && obj_key.index < events_data[j].index)
            {
                events_data[j+1] = events_data[j];
                j = j -1
            }
            events_data[j+1] = obj_key
        }
        return events_data
    }
};

源码CSS：

.app_drop_menu_lock{
  position: fixed;
  background: none;
  width: 100%;
  height: 100%;
  top: 0px;
  z-index: 9998;

}
.app_drop_menu{
  -webkit-box-orient:vertical;
  background: rgba(0,0,0,0.7);
  width: 130px;
  position: fixed;
  right: 0px;
  top:-250px;
  margin: 10px 5px 0px 0px;
  border-radius: 4px;
  padding: 0px 10px;
  font-size: 16px;
  z-index: 9999;
  -webkit-transform-style: preserve-3d;
  .delta{
    position: absolute;
    right: 15px;
    top: -6px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 6px solid rgba(0,0,0,.7);;
  }
  .child{
    display: -webkit-box;
    -webkit-box-orient:vertical;
    -webkit-box-pack:center;
    height: 50px;
    color: #fff;
    border-bottom: 1px solid #5c5b5d;
    p{
      max-height: 50px;
      overflow: hidden;
    }
    &:active p{
      color: #999;
    }
    &:last-child{
      border-bottom: none;
    }
    &.un{
      color: #717172;
    }
  }
  &.drop{
    animation:dropping 0.2s forwards ease-in;
    -webkit-animation:dropping 0.2s forwards ease-in;
  }
  &.up{
    animation:upping 0.2s;
    -webkit-animation:upping 0.2s;
  }
}

@-webkit-keyframes dropping
{
  from {top: -250px;display: -webkit-box;}
  to {top: 0px;}
}

@-webkit-keyframes upping
{
  from {top: 0px;}
  to {top: -250px;display: none;}
}

源码tmpl：

<div class="app_drop_menu_lock fn-hide" data-role="app_drop_menu_lock">

</div>
<div class="app_drop_menu" data-role="app_drop_menu">
    <div class="delta"></div>
    {{#each menu_data}}
        <div class="child" data-index="{{index}}"><p>{{content}}</p></div>
    {{/each}}
</div>

转载于:https://my.oschina.net/u/2405644/blog/492372