MNActionButton

来自于：官方立即使用

open close hide show

论坛示例

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

概述

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

模块功能

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

MNActionButton - 图1

实例widget下载地址

模块接口

open

打开弹动按钮菜单

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

params

layout：

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

animation：

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

autoHide：

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

styles：

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

items：

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

callback(ret, err)

ret：

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

示例代码

  1. var MNActionButton = api.require('MNActionButton');
  2. MNActionButton.open({
  3.     layout: {
  4.         row: 2,
  5.         col: 3,
  6.         rowSpacing: 5,
  7.         colSpacing: 10,
  8.         offset: 0
  9.     },
  10.     animation: true,
  11.     autoHide: true,
  12.     styles: {
  13.         maskBg: 'rgba(0,0,0,0.2)',
  14.         bg: '#fff',
  15.         cancelButton: {
  16.             size: 44,
  17.             bg: '#fff',
  18.             icon: 'widget://res/action-button-cancel.png'
  19.         },
  20.         item: {
  21.             titleColor: '#888',
  22.             titleHighlight: 'dd2727',
  23.             titleSize: 12
  24.         },
  25.         indicator: {
  26.             color: '#c4c4c4',
  27.             highlight: '#9e9e9e'
  28.         }
  29.     },
  30.     items: [{
  31.         icon: 'widget://res/MNActionButton/0.png',
  32.         highlight: 'widget://res/MNActionButton/0.png',
  33.         title: '菜单项1'
  34.     }, {
  35.         icon: 'widget://res/MNActionButton/1.png',
  36.         highlight: 'widget://res/MNActionButton/1.png',
  37.         title: '菜单项2'
  38.     }, {
  39.         icon: 'widget://res/MNActionButton/2.png',
  40.         highlight: 'widget://res/MNActionButton/2.png',
  41.         title: '菜单项3'
  42.     }, {
  43.         icon: 'widget://res/MNActionButton/3.png',
  44.         highlight: 'widget://res/MNActionButton/3.png',
  45.         title: '菜单项4'
  46.     }, {
  47.         icon: 'widget://res/MNActionButton/4.png',
  48.         highlight: 'widget://res/MNActionButton/4.png',
  49.         title: '菜单项5'
  50.     }, {
  51.         icon: 'widget://res/MNActionButton/5.png',
  52.         highlight: 'widget://res/MNActionButton/5.png',
  53.         title: '菜单项6'
  54.     }, {
  55.         icon: 'widget://res/MNActionButton/6.png',
  56.         highlight: 'widget://res/MNActionButton/6.png',
  57.         title: '菜单项7'
  58.     }, {
  59.         icon: 'widget://res/MNActionButton/7.png',
  60.         highlight: 'widget://res/MNActionButton/7.png',
  61.         title: '菜单项8'
  62.     }]
  63. }, function(ret) {
  64.     if (ret) {
  65.         alert(JSON.stringify(ret));
  66.     }
  67. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

close

关闭菜单

close()

示例代码

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

hide

隐藏菜单

hide()

示例代码

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

show

显示已隐藏的菜单

show()

示例代码

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

论坛示例

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