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) {
        api.alert({
            msg: JSON.stringify(ret)
        })
    } else {
        api.alert({
            msg: 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及更高版本

addEventListener

添加对菜单状态的监听

addEventListener()

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
    isBind:true,		//布尔类型;表示已绑定
    isOpen: 			 //布尔类型;表示菜单的状态
}

示例代码

var bubbleMenu = api.require('bubbleMenu');
bubbleMenu.addEventListener(function(ret){
        api.alert({
            msg: JSON.stringify(ret)
        })
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

cancelEventListener

取消对菜单状态的监听

cancelEventListener()

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
    isBind:false	//布尔类型;表示取消绑定
}

示例代码

var bubbleMenu = api.require('bubbleMenu');
bubbleMenu.cancelEventListener(function(ret){
        api.alert({
            msg: JSON.stringify(ret)
        })
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

论坛示例

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

是否仍需要帮助? 请保持联络!
最后更新于 2024/10/21