MNStack

来自于:官方立即使用

open close

概述

MNStack是一个栈菜单,可自定义按钮样式和个数及菜单背景,点击非菜单按钮区域可自动关闭菜单,MNStack 模块是 stackMenu 的优化版

图片说明

open

打开 stack 菜单

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

params

startCoords:

  • 类型:数字
  • 描述:(可选项)stack菜单起点坐标(第一个按钮的左上角点)
  • 默认值:见内部字段
  • 内部字段:
  1. {
  2. x: 120, //(可选项)数字类型;起始菜单按钮左上角的 x 坐标(相对于所属的 Window 或 Frame);默认:当前设备的屏幕宽度的二分之一
  3. y: 498 //(可选项)数字类型;起始菜单按钮左上角的 y 坐标(相对于所属的 Window 或 Frame);默认:0
  4. }

styles:

  • 类型:JSON 对象
  • 描述:菜单样式配置
  • 内部字段:
  1. {
  2. bg: '', //(可选项)字符串类型;菜单弹出时的背景(全屏)设置,支持#、rgb、rgba、图片路径(本地路径,fs://、widget://)
  3. itemHeight: 50, //(可选项)数字类型;子菜单高度,子菜单宽度随标题字符串长度自适应;默认:50
  4. titleColor: '', //(可选项)字符串类型;子菜单标题字体颜色;默认:#8b3e2f
  5. direction: '' //(可选项)字符串类型;弹出子菜单方向;默认:right_down,取值范围如下:
  6. right_up: //往右边向上弹出
  7. right_down://向右边向下弹出
  8. left_up: //往左边向上弹出
  9. right_down://向左边向下弹出
  10. }

items:

  • 类型:数组
  • 描述:子菜单参数组成的数组,iOS 平台上 items 的宽自适应 title 的长,android 平台上为固定宽:80+itemHeight
  • 内部字段:
  1. [{
  2. title: //(可选项)字符串类型;子按钮标题
  3. icon: //(可选项)字符串类型;子按钮图片的路径,要求本地路径(fs://、widget://)
  4. bgColor: //(可选项)字符串类型;子按钮背景色,支持 rgb、rgba、#;默认:rgba(0,0,0,0);
  5. highlightColor: //(可选项)字符串类型;子按钮背景高亮色,支持 rgb、rgba、#;默认:rgba(220,220,220,0.8)
  6. }]

callback(ret, err)

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. index: //数字类型;选中的子菜单按钮的下标
  3. }

示例代码

  1. var MNStack = api.require('MNStack');
  2. MNStack.open({
  3. startCoords: {
  4. x: 80
  5. },
  6. styles: {
  7. bg: 'rgba(0,0,0,0.7)',
  8. itemHeight: 50,
  9. titleColor: '#333'
  10. },
  11. items: [{
  12. title: '标题一',
  13. bgColor: '#fff'
  14. }, {
  15. title: '标题二',
  16. bgColor: '#fff'
  17. }]
  18. }, function(ret, err) {
  19. if (ret) {
  20. alert(JSON.stringify(ret));
  21. } else {
  22. alert(JSON.stringify(err));
  23. }
  24. });

可用性

iOS系统,安卓系统

可提供的1.0.0及更高版本

close

关闭菜单

close()

示例代码

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

可用性

iOS系统,安卓系统

可提供的0.0.1及更高版本