MNActionButton

open hide

论坛示例

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

概述

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

模块功能

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

模块接口

open

打开弹动按钮菜单

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

params

layout：

  • 类型：JSON 对象
  • 描述：（可选项）菜单的布局设置，包括行、行间距，列、列间距等
  • 类型：布尔类型
  • 描述：弹出和隐藏菜单时是否带弹出动画效果
  • 默认：true

autoHide：

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

styles：

  • 类型：JSON 类型
  • 描述：弹出菜单整体样式设置
  • 内部字段：
  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.     },
  11.         titleColor: '#848484',         //（可选项）字符串类型；菜单按钮文字颜色，支持 rgb，rgba，#；默认：#848484
  12.         titleHighlight: 'dd2727',      //（可选项）字符串类型；菜单按钮文字高亮颜色，支持 rgb，rgba，#；默认：同 titleColor
  13.     },
  14.     indicator: {                       //（可选项）JSON 对象类型；页标指示器样式，若不传则不显示该指示器
  15.         color: '#c4c4c4',              //（可选项）字符串类型；其它页指示器颜色；支持 rgb、rgba、#；默认：'#c4c4c4'
  16.         highlight: '#9e9e9e'           //（可选项）字符串类型；当前页指示器颜色；支持 rgb、rgba、#；默认：'#9e9e9e'
  17.     }

items：

  • 类型：JSON 数组类型
  • 描述：菜单按钮信息数组，该数组有多少个元素，则有多少个菜单按钮
  • 内部字段：

callback(ret, err)

ret：

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

close

关闭菜单

close()

示例代码

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

可用性

iOS系统，Android系统

hide

隐藏菜单

hide()

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

show

显示已隐藏的菜单

show()

示例代码

  2. MNActionButton.show();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

论坛示例

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