MNActionButton

open

close

hide

show

论坛示例

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

概述

MNActionButton 是 actionButton 插件的优化升级版。开发者可通过本插件打开一个以 action 形式弹出的菜单，该菜单从当前屏幕底部以动画的形式弹出。所弹出的菜单依附于当前主窗口，其生命周期也同当前主窗口。

插件功能

该菜单由多个菜单按钮组成，开发者可定义显示行数和列数。亦支持多屏显示，当开发者所设置的子按钮个数超过当前屏幕锁承载的个数时，子按钮会被显示在下一屏，用户左右拖动即可查看。菜单子按钮图片及其标题，都可通过相应参数自定义设置。详细功能请查看插件接口。

alert

##实例widget下载地址

插件接口

open

打开弹动按钮菜单

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

params

layout：

  • 类型：JSON 对象
  • 描述：（可选项）菜单的布局设置，包括行、行间距，列、列间距等
  • 内部描述
{
    row: 2,                            //（可选项）数字类型；每屏显示菜单按钮的行数；默认：2
    col: 3,                            //（可选项）数字类型；每屏显示菜单按钮的列数；默认：3
    rowSpacing: 5,                     //（可选项）数字类型；行与行之间的距离；默认：10
    colSpacing: 10,                    //（可选项）数字类型；列与列之间的距离；默认：10
    offset: 0                          //（可选项）数字类型；整个菜单底部相对所属 window 底部的距离，只能为正整数；默认：44
}

animation：

  • 类型：布尔类型
  • 描述：弹出和隐藏菜单时是否带弹出动画效果
  • 默认：true

autoHide：

  • 类型：布尔类型
  • 描述：点击菜单按钮后是否自动隐藏菜单
  • 默认：true

styles：

  • 类型：JSON 类型
  • 描述：弹出菜单整体样式设置
  • 内部字段：
{
    maskBg: 'rgba(0,0,0,0.2)',         //（可选项）字符串类型；遮罩层背景，支持 rgb，rgba，#，img；默认：rgba(0,0,0,0.2)
    bg: '#fff',                        //（可选项）字符串类型；菜单有效区域背景，支持 rgb，rgba，#，img；默认：#fff
    cancelButton: {                    //（可选项）JSON 对象类型，取消按钮设置
        size: 44,                      //（可选项）数字类型；底部取消按钮的高和宽；默认：44
        bg: '#fff',                    //（可选项）字符串类型；取消按钮的 100% 宽度的背景，支持 rgb，rgba，#，img；默认：'#fff'
        seperatColor:'#fff',          //（可选项）字符串类型；取消按钮背景顶部分隔线颜色，支持 rgb，rgba，#；不设置或传空则不显示分割线
        icon: 'widget://res/icon.png', //（可选项）字符串类型：取消按钮的图标，要求本地路径（widget://、fs://）；默认：默认X型图标
    },
    item: {                            //（可选项）JSON 对象类型，菜单按钮设置
        titleColor: '#848484',         //（可选项）字符串类型；菜单按钮文字颜色，支持 rgb，rgba，#；默认：#848484
        titleHighlight: 'dd2727',      //（可选项）字符串类型；菜单按钮文字高亮颜色，支持 rgb，rgba，#；默认：同 titleColor
        titleSize: 12,                 //（可选项）数字类型；菜单按钮文字大小，同时也是文字栏所占高度，值为 0 时不显示文字栏；默认：12
    },
    indicator: {                       //（可选项）JSON 对象类型；页标指示器样式，若不传则不显示该指示器
        color: '#c4c4c4',              //（可选项）字符串类型；其它页指示器颜色；支持 rgb、rgba、#；默认：'#c4c4c4'
        highlight: '#9e9e9e'           //（可选项）字符串类型；当前页指示器颜色；支持 rgb、rgba、#；默认：'#9e9e9e'
    }
}

items：

  • 类型：JSON 数组类型
  • 描述：菜单按钮信息数组，该数组有多少个元素，则有多少个菜单按钮
  • 内部字段：
[{                                     //JSON 对象类型；一个菜单项的设置信息
    icon: 'widget://res/icon.png',     //字符串类型；一个菜单按钮的图标路径，要求本地路径（widget://、fs://）；
    highlight: 'widget://res/highlight.png', //（可选项）字符串类型；一个菜单按钮的高亮图标路径，要求本地路径（widget://、fs://）；默认：同 icon
    title: '菜单项1',                  //字符串类型；菜单按钮的文字；默认：未设置时不显示，但文字栏仍按 titleSize 设置显示高度
}]

callback(ret, err)

ret：

  • 类型：JSON 对象
  • 内部字段：
{
    eventType:                         //字符串类型；交互事件类型，取值范围如下：
                                       //click（表示用户点击了菜单按钮）
                                       //cancel（表示用户取消了菜单显示，包括点击取消按钮和遮罩层）
    index:0                            //数字类型；点击子菜单项时返回其索引
}

示例代码

var MNActionButton = api.require('MNActionButton');
MNActionButton.open({
    layout: {
        row: 2,
        col: 3,
        rowSpacing: 5,
        colSpacing: 10,
        offset: 0
    },
    animation: true,
    autoHide: true,
    styles: {
        maskBg: 'rgba(0,0,0,0.2)',
        bg: '#fff',
        cancelButton: {
            size: 44,
            bg: '#fff',
            icon: 'widget://res/action-button-cancel.png'
        },
        item: {
            titleColor: '#888',
            titleHighlight: 'dd2727',
            titleSize: 12
        },
        indicator: {
            color: '#c4c4c4',
            highlight: '#9e9e9e'
        }
    },
    items: [{
        icon: 'widget://res/MNActionButton/0.png',
        highlight: 'widget://res/MNActionButton/0.png',
        title: '菜单项1'
    }, {
        icon: 'widget://res/MNActionButton/1.png',
        highlight: 'widget://res/MNActionButton/1.png',
        title: '菜单项2'
    }, {
        icon: 'widget://res/MNActionButton/2.png',
        highlight: 'widget://res/MNActionButton/2.png',
        title: '菜单项3'
    }, {
        icon: 'widget://res/MNActionButton/3.png',
        highlight: 'widget://res/MNActionButton/3.png',
        title: '菜单项4'
    }, {
        icon: 'widget://res/MNActionButton/4.png',
        highlight: 'widget://res/MNActionButton/4.png',
        title: '菜单项5'
    }, {
        icon: 'widget://res/MNActionButton/5.png',
        highlight: 'widget://res/MNActionButton/5.png',
        title: '菜单项6'
    }, {
        icon: 'widget://res/MNActionButton/6.png',
        highlight: 'widget://res/MNActionButton/6.png',
        title: '菜单项7'
    }, {
        icon: 'widget://res/MNActionButton/7.png',
        highlight: 'widget://res/MNActionButton/7.png',
        title: '菜单项8'
    }]
}, function(ret) {
    if (ret) {
        api.alert({msg: JSON.stringify(ret)});
    }
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

close

关闭菜单

close()

示例代码

var MNActionButton = api.require('MNActionButton');
MNActionButton.close();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

hide

隐藏菜单

hide()

示例代码

var MNActionButton = api.require('MNActionButton');
MNActionButton.hide();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

show

显示已隐藏的菜单

show()

示例代码

var MNActionButton = api.require('MNActionButton');
MNActionButton.show();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

论坛示例

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

是否仍需要帮助？ 请保持联络！
最后更新于 2024/04/24