blooming-menu是一款适合在移动手机上使用的js环形菜单插件。该环形菜单提供了众多的参数,通过结合CSS3动画制作出效果非常炫酷的圆形菜单展开和隐藏动画效果。
安装
你可以通过nmp来安装这个js环形菜单插件,并使用browserify在浏览器中运行它。
npm install --save blooming-menu
使用方法
首先引入blooming-menu.min.js文件。
<script src='js/blooming-menu.min.js'></script>
接着创建一个BloomingMenu
对象。
var menu = new BloomingMenu({ itemsNum: 8 })
然后使用下面的方法来渲染环形菜单。
menu.render()
接下来你就可以为环形菜单中的每一个菜单项添加事件。
menu.props.elements.items.forEach(function (item, index) { item.addEventListener('click', function () { console.log('Item #' + index + 'was clicked') }) })
配置参数
这个js环形菜单的构造函数为:new BloomingMenu(opts)
,可以在初始化的时候向构造函数中传入参数。
var menu = new BloomingMenu({ startAngle: 60, endAngle: 0 })
可用的配置参数如下:
-
opts.itemsNum
:类型:Number
,该参数为必填参数。该参数是菜单项的数量。 -
opts.startAngle
:类型:Number
,默认值90。菜单的开始角度。 -
opts.endAngle
:类型:Number
,默认值0。菜单的结束角度。 -
opts.radius
:类型:Number
,默认值80。圆形菜单的半径。 -
opts.itemAnimationDelay
:类型:Number
,默认值0.04。圆形菜单项动画的延迟时间。 -
opts.animationDuration
:类型:Number
,默认值0.4。动画的持续时间。 -
opts.fatherElement
:类型:HTMLElement
,默认值document.body
圆形菜单的父元素。 -
opts.itemWidth
:类型:Number
,默认值50。菜单项的宽度。 -
opts.CSSClassPrefix
:类型:String
,默认值'blooming-menu__'
。菜单项的CSS class名称前缀。 -
opts.mainContent
:类型:String
,默认值+
。主菜单按钮的内容。 -
opts.injectBaseCSS
:类型:Boolean
,默认值true
。
方法
下面的方法是对象实例的方法。
-
obj.render
:在DOM中添加一个菜单实例并绑定所有的事件监听。 -
obj.remove
:移除所有的DOM元素和事件监听。 -
obj.open
:以编程的方式打开环形菜单。 -
obj.close
:以编程的方式关闭环形菜单。 -
obj.selectItem(num)
:以编程的方式选择num
对于的菜单项。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!