bubbleMenu

来自于:官方立即使用

open hide show close

论坛示例

为帮助用户更好更快的使用模块,论坛维护了一个示例,示例中包含示例代码、知识点讲解、注意事项等,供您参考。

概述

bubbleMenu是一个原生实现的气泡按钮菜单,开发者可自定义气泡弹出位置大小以及按钮的各种样式和个数

bubbleMenu - 图1

open

打开菜单

open({params}, callback(ret, err))

params

style:

  • 类型:JSON 对象
  • 默认值:见内部字段
  • 描述:(可选项)气泡样式设置
  • 内部字段:
  1. {
  2. bgColor: ‘’, //(可选项)字符串类型;菜单按钮背景色,支持 rgb,rgba,#;默认:#000000
  3. lightColor:‘’, //(可选项)字符串类型;菜单按钮点击色,支持 rgb,rgba,#;默认:#009ACD
  4. borderColor:‘’, //(可选项)字符串类型;菜单边框色,支持 rgb,rgba,#;默认:#000000
  5. cutLineColor:‘’, //(可选项)字符串类型;菜单按钮分割线色,支持 rgb,rgba,#;默认:#636363
  6. titleColor:‘’ , //(可选项)字符串类型;菜单按钮标题色,支持 rgb,rgba,#;默认:#ffffff
  7. maskColor:‘’ , //(可选项)字符串类型;遮罩层题色,支持 rgb,rgba,#;默认:rgba(0,0,0,0)
  8. cornerRadius: 8, //(可选项)数字类型;圆角大小;默认:8
  9. arrowSize: 12, //(可选项)数字类型;尖角大小;默认:12
  10. titleSize: 14, //(可选项)数字类型;标题大小:默认:14
  11. height: 50 //(可选项)数字类型;菜单高度;默认:50
  12. }

centerX:

  • 类型:数字
  • 描述:(可选项)气泡菜单箭头点的坐标
  • 默认值:120

centerY:

  • 类型:数字
  • 描述:(可选项)气泡菜单箭头点的坐标
  • 默认值:120

btnArray:

  • 类型:数组
  • 描述:按钮的信息组成的数组
  • 内部字段:
  1. [{
  2. icon: //字符串类型;按钮的图片地址,要求本地路径,可与标题配合使用
  3. title: //字符串类型;按钮的标题,与图片配合使用
  4. length: //数字类型;按钮的长度;默认:65
  5. }]

fixedOn:

  • 类型:字符串类型
  • 描述:(可选项)模块视图添加到指定 frame 的名字(只指 frame,传 window 无效)
  • 默认:模块依附于当前 window

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. index //数字类型;用户点击按钮的下标
  3. }

示例代码

  1. var bubbleMenu = api.require('bubbleMenu');
  2. bubbleMenu.open({
  3. style: {
  4. bgColor:'#000',
  5. lightColor:'#009acd',
  6. borderColor:'#000',
  7. cutLineColor:'#636363',
  8. titleColor:'#fff'
  9. },
  10. centerX: api.frameWidth / 2,
  11. centerY: api.frameHeight / 2,
  12. btnArray: [{
  13. title: '按钮'
  14. }, {
  15. title: '按钮'
  16. }, {
  17. title: '按钮'
  18. }],
  19. fixedOn: api.frameName
  20. }, function(ret, err) {
  21. if (ret) {
  22. alert(JSON.stringify(ret));
  23. } else {
  24. alert(JSON.stringify(err));
  25. }
  26. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

hide

隐藏菜单,只是隐藏,还在内存里没有清除

hide()

示例代码

  1. var bubbleMenu = api.require('bubbleMenu');
  2. bubbleMenu.hide();

可用性

iOS系统,Android系统

可提供的1.0.1及更高版本

show

显示菜单

show()

示例代码

  1. var bubbleMenu = api.require('bubbleMenu');
  2. bubbleMenu.show();

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

close

关闭菜单,意味着从内存里清除

close()

示例代码

  1. var bubbleMenu = api.require('bubbleMenu');
  2. bubbleMenu.close();

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

论坛示例

为帮助用户更好更快的使用模块,论坛维护了一个示例,示例中包含示例代码、知识点讲解、注意事项等,供您参考。