插件-悬浮菜单

最新推荐文章于 2025-04-05 14:40:41 发布

转载最新推荐文章于 2025-04-05 14:40:41 发布 · 341 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/59e617c86fb9a0450406f3d0

文章标签：

#php

插件需求

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

插件地址

演示-未使用模板(可能出现闪烁)
演示-使用模板(无闪烁)
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开始复制代码