MNNavigationMenu

来自于：官方立即使用

open setIndex close show hide

论坛示例

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

概述

MNNavigationMenu 是一个导航栏菜单，开发者可自定义其中的样式和按钮个数，超出屏幕部分可左右拖动查看。本模块是 navigationMenu 的优化版

图片说明

实例widget下载地址

open

打开导航菜单

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

params

rect：

  • 类型：JSON 类型
  • 描述：（可选项）模块的位置及尺寸
  • 内部字段：
  1. {
  2.     x: 0,                              //（可选项）数字类型；模块左上角的 x 坐标（相对于所属的 Window 或 Frame）；默认值：0
  3.     y: 0,                              //（可选项）数字类型；模块左上角的 y 坐标（相对于所属的 Window 或 Frame）；默认值：0
  4.     w: api.winWidth,                   //（可选项）数字类型；模块的宽度；默认值：所属的 Window 或 Frame 的宽度
  5.     h: 44                              //（可选项）数字类型；模块的高度；默认值：所属的 Window 或 Frame 的高度
  6. }

animation：

  • 类型：布尔类型
  • 描述：是否显示弹出动画（从 y 位置由上而下弹出的动画）
  • 默认：true

index：

  • 类型：数字类型
  • 描述：默认选中菜单项的下标
  • 默认：0

styles：

  • 类型：JSON 类型
  • 描述：模块整体样式
  • 内部字段：
  1. {
  2.     column: 4,                         //（可选项）数字类型；一屏显示的菜单项个数；默认：4
  3.     bg: '#eee',                        //（可选项）字符串类型；菜单显示区域背景，支持 rgb、rgba、#、img；默认：'rgba(0,0,0,0)'
  4.     item: {                            //（可选项）JSON 对象类型，菜单项的通用样式
  5.         bg: '#fff',                    //（可选项）字符串类型；菜单项的背景，支持 rgb、rgba、#、img；默认：#fff
  6.         active: '#eee',                //（可选项）字符串类型；菜单项选中背景，支持 rgb、rgba、#、img；默认：同 bg
  7.         highlight: '#eee',             //（可选项）字符串类型；菜单项高亮背景，支持 rgb、rgba、#、img；默认：同 active
  8.         title: {                       //（可选项）JSON 类型；菜单项标题样式设置
  9.             marginB: 6,                //（可选项）数字类型；菜单项标题底部与菜单项下边线的距离；默认：6
  10.             size: 14,                  //（可选项）数字类型；菜单项标题文字大小；默认：14
  11.             color: '#888',             //（可选项）字符串类型；标题文字颜色，支持 rgb，rgba，#；默认：#888
  12.             active: '#f00',            //（可选项）字符串类型；标题文字选中颜色，支持 rgb，rgba，#；默认：同 color
  13.             highlight: '#f00',         //（可选项）字符串类型；标题文字高亮颜色，支持 rgb，rgba，#；默认：同 active
  14.             ttf:'Alkatip Basma Tom'     //（可选项）字符串类型；默认值：当前系统字体；
  15.                                 本参数在 iOS 平台上表示字体名称 （必须已在 config 文件内配置 ttf 文件(//docs.apicloud.com/Dev-Guide/app-config-manual#14-1)，并在 widget 包内包含该 ttf 文件）；
  16.                                 本参数在 android 平台上表示 ttf 文件路径，要求本地路径（fs://、widget://）
  17.         },
  18.         icon: {                        //（可选项）JSON 类型；图标的样式设置
  19.             marginT: 0,                //（可选项）数字类型；图标顶部与菜单项顶部的距离；默认：0
  20.             width: 30,                 //（可选项）数字类型；图标的宽度；默认：30
  21.             height: 30,                //（可选项）数字类型；图标的高度；默认：同 width
  22.             corner: 2                 //（可选项）数字类型；图标的圆角半径；默认：2
  23.         }
  24.     }
  25. }

items：

  • 类型：JSON 数组类型
  • 描述：菜单项数组
  • 内部字段：
  1. [{                                     //一个菜单项的设置
  2.     title: '菜单项0',                  //（可选项）字符串类型；菜单项的标题内容；默认：未设置时不显示菜单项标题
  3.     icon: 'fs://menu/0.png',           //（可选项）字符串类型；菜单项的图标，支持 fs://、widget:// 默认：未设置时不显示菜单项图标
  4.     active: 'fs://menu/0.acitve.png',  //（可选项）字符串类型；菜单项选中时的图标，支持 fs://、widget:// 默认：同 icon
  5.     highlight: 'fs://menu/0.highlight.png', //（可选项）字符串类型；菜单项高亮时的图标，支持 fs://、widget:// 默认：同 active
  6. }]

fixedOn：

  • 类型：字符串类型
  • 描述：（可选项）模块视图添加到指定 frame 的名字（只指 frame，传 window 无效）
  • 默认：模块依附于当前 window

fixed：

  • 类型：布尔类型
  • 描述：此模块是否在窗口中固定位置（不随窗口的滚动而改变位置）
  • 默认：false

callback(ret, err)

ret：

  • 类型：JSON 对象

内部字段：

  1. {
  2.     index：        //用户点击菜单项时的下标
  3. }

示例代码

  1. var MNNavigationMenu = api.require('MNNavigationMenu');
  2. MNNavigationMenu.open({
  3.     rect: {
  4.         x: 0,
  5.         y: 0,
  6.         w: api.winWidth,
  7.         h: 44
  8.     },
  9.     index: 0,
  10.     animation: true,
  11.     styles: {
  12.         column: 4,
  13.         bg: '#eee',
  14.         item: {
  15.             bg: '#fff',
  16.             active: '#eee',
  17.             highlight: '#eee',
  18.             title: {
  19.                 marginB: 6,
  20.                 size: 14,
  21.                 height: 14,
  22.                 color: '#888',
  23.                 active: '#f00',
  24.                 highlight: '#f00',
  25.                 ttf:'Alkatip Basma Tom' 
  26.             },
  27.             icon: {
  28.                 marginT: 0,
  29.                 width: 30,
  30.                 height: 30,
  31.                 corner: 2
  32.             }
  33.         }
  34.     },
  35.     items: [{
  36.         title: '菜单项0',
  37.         icon: 'fs://menu/0.png',
  38.         active: 'fs://menu/0.acitve.png',
  39.         highlight: 'fs://menu/0.highlight.png'
  40.     }, {
  41.         title: '菜单项1',
  42.         icon: 'fs://menu/1.png',
  43.         active: 'fs://menu/1.acitve.png',
  44.         highlight: 'fs://menu/1.highlight.png'
  45.     }, {
  46.         title: '菜单项2',
  47.         icon: 'fs://menu/2.png',
  48.         active: 'fs://menu/2.acitve.png',
  49.         highlight: 'fs://menu/2.highlight.png'
  50.     }, {
  51.         title: '菜单项3',
  52.         icon: 'fs://menu/3.png',
  53.         active: 'fs://menu/3.acitve.png',
  54.         highlight: 'fs://menu/3.highlight.png'
  55.     }, {
  56.         title: '菜单项4',
  57.         icon: 'fs://menu/4.png',
  58.         active: 'fs://menu/4.acitve.png',
  59.         highlight: 'fs://menu/4.highlight.png'
  60.     }],
  61.     fixedOn: api.frameName,
  62.     fixed: false
  63. }, function(ret, err) {
  64.     if (ret) {
  65.         alert(JSON.stringify(ret));
  66.     } else {
  67.         alert(JSON.stringify(err));
  68.     }
  69. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

setIndex

选中某一菜单项

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

params

index：

  • 类型：数字类型
  • 描述：目标菜单项的下标

callback(ret, err)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     status: true                       //选中完成
  3. }

示例代码

  1. var MNNavigationMenu = api.require('MNNavigationMenu');
  2. MNNavigationMenu.setIndex({
  3.     index: 0
  4. }, function(ret, err) {
  5.     if (ret) {
  6.         alert(JSON.stringify(ret));
  7.     } else {
  8.         alert(JSON.stringify(err));
  9.     }
  10. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

close

关闭菜单

close()

示例代码

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

补充说明

关闭菜单，意味着从内存里清除

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

show

显示菜单

show()

示例代码

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

补充说明

显示菜单，若 open 此模块时带动画，则本操作也带动画

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

hide

隐藏菜单

hide()

示例代码

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

补充说明

隐藏菜单，只是移除到屏幕之外，还在内存里没有清除，若 open 此模块时带动画，则本操作也带动画

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本