插件-悬浮菜单

news/2024/7/1 18:12:50

插件需求

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

插件地址

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

转载于:https://juejin.im/post/59e617c86fb9a0450406f3d0


http://www.niftyadmin.cn/n/4608359.html

相关文章

缓存的几个概念

为什么80%的码农都做不了架构师&#xff1f;>>> 缓存穿透 缓存穿透是说收到了一个请求&#xff0c;但是该请求缓存里没有&#xff0c;只能去数据库里查询&#xff0c;然后放进缓存。 这里面有两个风险&#xff0c;一个是同时有好多请求访问同一个数据&#xff0c;然…

JavaScript 启动性能探究

本文讲的是JavaScript 启动性能探究&#xff0c;作为 web 开发者&#xff0c;都知道 web 项目开发到最后&#xff0c;页面规模很容易变的很大。 但 加载 一个网页远不止从网线上传送字节码那么简单。浏览器下载了页面脚本之后&#xff0c;它还必须解析、解释和运行它们。这篇文…

五分钟读懂TCP 协议——TCP协议简介

TCP 是互联网核心协议之一&#xff0c;本文介绍它的基础知识。一、TCP 协议的作用互联网由一整套协议构成。TCP 只是其中的一层&#xff0c;有着自己的分工。&#xff08;图片说明&#xff1a;TCP 是以太网协议和 IP 协议的上层协议&#xff0c;也是应用层协议的下层协议。&…

nodejs作为前后端分离中间件的跨域解决方案

前后端分离时候SEO问题很头疼&#xff0c;上次提供了nuxtaxios解决服务端渲染问题的解决方案&#xff0c;其实nodejs一样可以做服务端渲染&#xff0c;这时候会产生ajax跨域问题&#xff0c;本文旨在nodejs中跨域问题 其实很简单&#xff0c;像其他的服务端程序一样&#xff0c…

win10会无缘故自动关机,解决办法如下

win10会无缘故自动关机&#xff0c;解决办法如下 1、在此电脑右键中找到设备管理器 2、找到系统设备&#xff0c;定位到intel大R 3、点击右键&#xff0c;属性&#xff0c;把勾勾去掉&#xff0c;确定即可 结果就是win10再也不会随便关机了&#xff0c;更不会在休眠时候关机。…

Ajax文件上传并添加Bootstrap进度条

&#xff11;、项目中需要用到文件上传和显示进度&#xff0c;网上各种插件搞得头晕&#xff0c;决定自己实现一个 三个步骤&#xff1a;Ajax上传文件&#xff0c;获取上传进度&#xff0c;显示进度 html: <!DOCTYPE HTML> <html> <head><meta charset&qu…

让电脑性能加强--开启电池的卓越模式

默认是没有卓越模式的&#xff0c;要先在菜单中– 然后Windows PowerShell窗口中输入powercfg -duplicatescheme e9a42b02-d5df-448d-aa00-03f14749eb61

Java方法使用的有点总结

方法使用的优点&#xff1a; 1-将解决问题的方法与主函数代码分开&#xff0c;逻辑更清晰&#xff0c;代码可读性更强。 2-若方法出错&#xff0c;则程序可以缩小为只在该方法中查找错误&#xff0c;使代码更容易调试。 3-方法是解决一类问题的抽象&#xff0c;一旦写成功就可以…