bubbleMenu
来自于:官方立即使用
论坛示例
为帮助用户更好更快的使用模块,论坛维护了一个示例,示例中包含示例代码、知识点讲解、注意事项等,供您参考。
概述
bubbleMenu是一个原生实现的气泡按钮菜单,开发者可自定义气泡弹出位置大小以及按钮的各种样式和个数
open
打开菜单
open({params}, callback(ret, err))
params
style:
- 类型:JSON 对象
- 默认值:见内部字段
- 描述:(可选项)气泡样式设置
- 内部字段:
{
bgColor: ‘’, //(可选项)字符串类型;菜单按钮背景色,支持 rgb,rgba,#;默认:#000000
lightColor:‘’, //(可选项)字符串类型;菜单按钮点击色,支持 rgb,rgba,#;默认:#009ACD
borderColor:‘’, //(可选项)字符串类型;菜单边框色,支持 rgb,rgba,#;默认:#000000
cutLineColor:‘’, //(可选项)字符串类型;菜单按钮分割线色,支持 rgb,rgba,#;默认:#636363
titleColor:‘’ , //(可选项)字符串类型;菜单按钮标题色,支持 rgb,rgba,#;默认:#ffffff
maskColor:‘’ , //(可选项)字符串类型;遮罩层题色,支持 rgb,rgba,#;默认:rgba(0,0,0,0)
cornerRadius: 8, //(可选项)数字类型;圆角大小;默认:8
arrowSize: 12, //(可选项)数字类型;尖角大小;默认:12
titleSize: 14, //(可选项)数字类型;标题大小:默认:14
height: 50 //(可选项)数字类型;菜单高度;默认:50
}
centerX:
- 类型:数字
- 描述:(可选项)气泡菜单箭头点的坐标
- 默认值:120
centerY:
- 类型:数字
- 描述:(可选项)气泡菜单箭头点的坐标
- 默认值:120
btnArray:
- 类型:数组
- 描述:按钮的信息组成的数组
- 内部字段:
[{
icon: //字符串类型;按钮的图片地址,要求本地路径,可与标题配合使用
title: //字符串类型;按钮的标题,与图片配合使用
length: //数字类型;按钮的长度;默认:65
}]
fixedOn:
- 类型:字符串类型
- 描述:(可选项)模块视图添加到指定 frame 的名字(只指 frame,传 window 无效)
- 默认:模块依附于当前 window
callback(ret)
ret:
- 类型:JSON 对象
- 内部字段:
{
index: //数字类型;用户点击按钮的下标
}
示例代码
var bubbleMenu = api.require('bubbleMenu');
bubbleMenu.open({
style: {
bgColor:'#000',
lightColor:'#009acd',
borderColor:'#000',
cutLineColor:'#636363',
titleColor:'#fff'
},
centerX: api.frameWidth / 2,
centerY: api.frameHeight / 2,
btnArray: [{
title: '按钮'
}, {
title: '按钮'
}, {
title: '按钮'
}],
fixedOn: api.frameName
}, function(ret, err) {
if (ret) {
alert(JSON.stringify(ret));
} else {
alert(JSON.stringify(err));
}
});
可用性
iOS系统,Android系统
可提供的1.0.0及更高版本
hide
隐藏菜单,只是隐藏,还在内存里没有清除
hide()
示例代码
var bubbleMenu = api.require('bubbleMenu');
bubbleMenu.hide();
可用性
iOS系统,Android系统
可提供的1.0.1及更高版本
show
显示菜单
show()
示例代码
var bubbleMenu = api.require('bubbleMenu');
bubbleMenu.show();
可用性
iOS系统,Android系统
可提供的1.0.0及更高版本
close
关闭菜单,意味着从内存里清除
close()
示例代码
var bubbleMenu = api.require('bubbleMenu');
bubbleMenu.close();
可用性
iOS系统,Android系统
可提供的1.0.0及更高版本
论坛示例
为帮助用户更好更快的使用模块,论坛维护了一个示例,示例中包含示例代码、知识点讲解、注意事项等,供您参考。