插件-悬浮菜单

2,475 阅读1分钟

插件需求

经常遇到页面右下角会有一些悬浮按钮的需求,为了快速开发,才有了这个插件。

插件地址

演示-未使用模板(可能出现闪烁)
演示-使用模板(无闪烁)
github地址->https://github.com/lzuntalented/tools

使用方法

1.
//加载demo中index.js
//引用demo中的样式
//demo文本
<div>
    <div>1</div>
    <ul>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
</div>
//实例调用
lzBoomMenu.getInstance({
    subMenuPosition: 'top',
    animationTime: 'together',
    delay: 0,

    radius: 50,

    mainElem: null,
    tpl: '<div>1</div><ul><li>2</li><li>3</li></ul>',
    mode: 0,

    setPosition: function(len){
        var result = [];
        for (var i = 0; i < len; i++) {
            result.push({
                x: (i + 1) * 50,
                y: (i + 1) * 50,
            })
        }
        return result;
    },
    menuClick: function(e,idx){
        console.log( '第' + idx + '个元素被点击')
    },
});

2.模板使用参考示例
3.配置:
    subMenuPosition: 'top',//top bottom left right around
    animationTime: 'together',//togethre delay
    delay: 0,//delay time

    radius: 50,//当subMenuPosition为around 环形半径 

    mainElem: null,//容器对象,dom节点
    tpl: '<div>1</div><ul><li>2</li></ul>',//模板内容
    mode: 0,//节点创建模式,0 模板,1 节点

    show: false,//当前状态,true显示子菜单,false隐藏

    elems: {},//内部使用节点集合

    setPosition: null,//用户自定子菜单位置,function原型function(len) len为子节点个数 / array
    menuClick: null,//子元素点击事件,function原型function(event,idx) event点击事件,idx为子菜单序号从0开始

写在最后

欢迎各位大佬点评
顺便推销下我的小站:www.lzuntalented.cn