插件需求
经常遇到页面右下角会有一些悬浮按钮的需求,为了快速开发,才有了这个插件。
插件地址
演示-未使用模板(可能出现闪烁)
演示-使用模板(无闪烁)
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