arcMenu

立即使用

open close hide show changeImg itemShowHideListener mainMenuTouchListener touchAction changeFrame removeItemShowHideListener removeMainMenuTouchListener bringToFront

论坛示例

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

概述

arcMenu 是一个弧形菜单，子菜单按钮成弧形排列，展开和缩放菜单都有炫酷的动画。开发者可以配置子按钮的样式和数量以及子按钮排列方式

图片说明

实例widget下载地址

open

打开弹动菜单

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

params

type：

  • 类型：字符串
  • 默认值：arc
  • 描述：（可选项）弹出的子菜单的类型。arc为弧形菜单，straight为直线型菜单

mainMenu：

  • 类型：JSON 对象
  • 默认值：见内部字段
  • 描述：主菜单的位置大小和背景图
  • 内部字段：
  1. {
  2.     x:0,            //（可选项）圆心x坐标，数字，默认0 
  3.     y:0,            //（可选项）圆心y坐标，数字，默认0
  4.     w:50,            //（可选项）宽度，数字，默认50
  5.     h:50,            //（可选项）高度，数字，默认50
  6.     img:’’            //背景图片路径，支持widget、fs等本地协议路径
  7.     imgLight:’’        //高亮状态下背景图片路径，支持widget、fs等本地协议路径
  8. }

items：

  • 类型：数组对象
  • 默认值：无
  • 描述：设置子菜单信息集合

内部字段：

  1. [{
  2.     w:40,            //（可选项）宽度，数字，默认40
  3.     h:40,            //（可选项）高度，数字 ，默认40
  4.     img:’’            //背景图片路径，支持widget、fs等本地协议路径
  5.     imgLight:’’        //高亮状态下背景图片路径，支持widget、fs等本地协议路径
  6. }]

startAngle：

  • 类型：数字
  • 默认值：0
  • 描述：（可选项）起点角度（12点钟方向为0度，顺时针方向计数）

wholeAngle：

  • 类型：数字
  • 默认值：180
  • 描述：（可选项）弧形菜单的角度大小，当type为arc时必传，当type为straight时此参数可不传

radius：

  • 类型：数字
  • 默认值：100
  • 描述：（可选项）弧形子菜单距离主菜单的半径，若是直线型子菜单，则为最远的子菜单距离主菜单的距离

fixedOn：

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

fixed:

  • 类型：布尔
  • 默认值：true
  • 描述：（可选项）是否将模块视图固定到窗口上，不跟随窗口上下滚动

shieldClick:

  • 类型：布尔
  • 默认值：true
  • 描述：（可选项）点击非菜单区域是否收缩菜单

mmRotation:

  • 类型：布尔
  • 默认值：true
  • 描述：（可选项）点击主菜单是否带有旋转动效

imRotation:

  • 类型：布尔
  • 默认值：true
  • 描述：（可选项）关闭菜单时子菜单是否带有旋转动效

isTouchMove:

  • 类型：布尔
  • 默认值：false
  • 描述：（可选项）是否可拖动；iOS在展开状态下不能拖动

callback(ret, err)

ret：

  • 类型：JSON 对象

内部字段：

  1. {
  2.     id:         //打开后返回id
  3.     index:      //点击子菜单返回其下标
  4. }

示例代码

  1. var arcMenu = api.require('arcMenu');
  2. arcMenu.open({
  3.     type: 'arc',
  4.     mainMenu: {
  5.         x: api.frameWidth / 2,
  6.         y: api.frameHeight / 2,
  7.         w: 50,
  8.         h: 50,
  9.         img: 'widget://res/img/ic/color-lump-square.png',
  10.         imgLight: 'widget://res/img/ic/color-lump-square.png'
  11.     },
  12.     items: [{
  13.         w: 40,
  14.         h: 40,
  15.         img: 'widget://res/img/ic/small-bell.png',
  16.         imgLight: 'widget://res/img/ic/small-bell.png'
  17.     }, {
  18.         w: 40,
  19.         h: 40,
  20.         img: 'widget://res/img/ic/count.png',
  21.         imgLight: 'widget://res/img/ic/count.png'
  22.     }, {
  23.         w: 40,
  24.         h: 40,
  25.         img: 'widget://res/img/ic/color-lump-triangle.png',
  26.         imgLight: 'widget://res/img/ic/color-lump-triangle.png'
  27.     }, {
  28.         w: 40,
  29.         h: 40,
  30.         img: 'widget://res/img/ic/compass.png',
  31.         imgLight: 'widget://res/img/ic/compass.png'
  32.     }, {
  33.         w: 40,
  34.         h: 40,
  35.         img: 'widget://res/img/ic/message.png',
  36.         imgLight: 'widget://res/img/ic/message.png'
  37.     }, {
  38.         w: 40,
  39.         h: 40,
  40.         img: 'widget://res/img/ic/clock.png',
  41.         imgLight: 'widget://res/img/ic/clock.png'
  42.     }],
  43.     wholeAngle: 180,
  44.     radius: 100,
  45.     fixedOn: api.frameName
  46. }, function(ret, err) {
  47.     if (ret) {
  48.         alert(JSON.stringify(ret));
  49.     } else {
  50.         alert(JSON.stringify(err));
  51.     }
  52. });

补充说明

打开菜单

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

close

关闭菜单

close({params})

params

id：

  • 类型：数字
  • 默认值：无
  • 描述：要关闭的菜单的id，不传则关闭所有

示例代码

  1. var arcMenu = api.require('arcMenu');
  2. arcMenu.close({
  3.     id: 1
  4. });

补充说明

关闭菜单

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

hide

隐藏已打开并显示的菜单

hide({params})

params

id：

  • 类型：数字
  • 默认值：无
  • 描述：要操作的菜单的id

示例代码

  1. var arcMenu = api.require('arcMenu');
  2. arcMenu.hide({
  3.     id: 1
  4. });

补充说明

隐藏菜单模块视图，并没有从内存清除

可用性

iOS系统，Android系统 可提供的1.0.1及更高版本

show

显示已打开但被隐藏的菜单

show({params})

params

id：

  • 类型：数字
  • 默认值：无
  • 描述：要操作的视图id

示例代码

  1. var arcMenu = api.require('arcMenu');
  2. arcMenu.show({
  3.     id: 1
  4. });

补充说明

无

可用性

iOS系统，Android系统 可提供的1.0.0及更高版本

changeImg

设置主按钮和子按钮背景图片（仅iOS支持）

changeImg({params}, callback(ret))

params

id：

  • 类型：数字类型
  • 描述：菜单id

mainMenu：

  • 类型：JSON 对象
  • 默认值：见内部字段
  • 描述：主菜单的背景图
  • 内部字段：
  1. {
  2.     img:’’            //（可选项）背景图片路径，支持widget、fs等本地协议路径；默认：open接口中的img
  3.     imgLight:’’        //（可选项）高亮状态下背景图片路径，支持widget、fs等本地协议路径；默认：open接口中的imgLight
  4. }

items：

  • 类型：数组对象
  • 默认值：无
  • 描述：设置子菜单信息集合

内部字段：

  1. [{
  2.     w:40,            //（可选项）宽度，数字，默认40
  3.     h:40,            //（可选项）高度，数字 ，默认40
  4.     img:’’            //（可选项）背景图片路径，支持widget、fs等本地协议路径；默认open接口中的img
  5.     imgLight:’’        //（可选项）高亮状态下背景图片路径，支持widget、fs等本地协议路径；默认open接口中的imgLight
  6. }]

callback(ret, err)

ret：

  • 类型：JSON 对象

内部字段：

  1. {
  2.     id:         //打开后返回id
  3.     index:      //点击子菜单返回其下标
  4. }

示例代码

  1. var arcMenu = api.require('arcMenu');
  2. arcMenu.changeImg({
  3.     mainMenu: {
  4.         img: 'widget://res/img/ic/color-lump-square.png',
  5.         imgLight: 'widget://res/img/ic/color-lump-square.png'
  6.     },
  7.     items: [{
  8.         w: 40,
  9.         h: 40,
  10.         img: 'widget://res/img/ic/small-bell.png',
  11.         imgLight: 'widget://res/img/ic/small-bell.png'
  12.     }, {
  13.         w: 40,
  14.         h: 40,
  15.         img: 'widget://res/img/ic/count.png',
  16.         imgLight: 'widget://res/img/ic/count.png'
  17.     }, {
  18.         w: 40,
  19.         h: 40,
  20.         img: 'widget://res/img/ic/color-lump-triangle.png',
  21.         imgLight: 'widget://res/img/ic/color-lump-triangle.png'
  22.     }, {
  23.         w: 40,
  24.         h: 40,
  25.         img: 'widget://res/img/ic/compass.png',
  26.         imgLight: 'widget://res/img/ic/compass.png'
  27.     }, {
  28.         w: 40,
  29.         h: 40,
  30.         img: 'widget://res/img/ic/message.png',
  31.         imgLight: 'widget://res/img/ic/message.png'
  32.     }, {
  33.         w: 40,
  34.         h: 40,
  35.         img: 'widget://res/img/ic/clock.png',
  36.         imgLight: 'widget://res/img/ic/clock.png'
  37.     }]
  38. }, function(ret) {
  39.     if (ret) {
  40.         alert(JSON.stringify(ret));
  41.     }
  42. });

可用性

iOS系统

可提供的1.0.0及更高版本

changeFrame

设置菜单的位置（仅iOS支持）

changeFrame({params}, callback(ret))

params

mainMenuRect：

  • 类型：JSON 对象
  • 默认值：见内部字段
  • 描述：主菜单的位置大小
  • 内部字段：
  1. {
  2.     x:0,            //（可选项）圆心x坐标，数字，默认0 
  3.     y:0,            //（可选项）圆心y坐标，数字，默认0
  4.     w:50,            //（可选项）宽度，数字，默认50
  5.     h:50,            //（可选项）高度，数字，默认50
  6. }

id：

  • 类型：数字
  • 描述：要设置位置大小的菜单的id

callback(ret, err)

ret：

  • 类型：JSON 对象

内部字段：

  1. {
  2.     id:         //打开后返回id
  3.     index:      //点击子菜单返回其下标
  4. }

示例代码

  1. var arcMenu = api.require('arcMenu');
  2. arcMenu.changeFrame({
  3.       id:1,
  4.      mainMenuRect: {
  5.        x: 100,
  6.        y: api.winHeight - 100,
  7.        w: 80,
  8.        h: 80,
  9.      },
  10. }, function(ret) {
  11.     if (ret) {
  12.         alert(JSON.stringify(ret));
  13.     }
  14. });

可用性

iOS系统

可提供的1.0.0及更高版本

itemShowHideListener

菜单展开与收起的监听

itemShowHideListener({params}, callback(ret))

params

id：

  • 类型：数字
  • 描述：要设置监听的菜单id

callback(ret, err)

ret：

  • 类型：JSON 对象

内部字段：

  1. {
  2.     status:         //布尔类型；false：打开，true：收起
  3.     index:      //数字类型；变化菜单id，即传入id
  4. }

示例代码

  1. var arcMenu = api.require('arcMenu');
  2. arcMenu.itemShowHideListener({
  3.       id:1,
  4. }, function(ret) {
  5.     if (ret) {
  6.         alert(JSON.stringify(ret));
  7.     }
  8. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

mainMenuTouchListener

点击主菜单的监听

mainMenuTouchListener({params}, callback(ret))

params

id：

  • 类型：数字
  • 描述：要监听的菜单id

callback(ret, err)

ret：

  • 类型：JSON 对象

内部字段：

  1. {
  2.     evenType:         //字符串；
  3.       - touch         //点击
  4.     index:      //数字类型；变化菜单id，即传入id
  5. }

示例代码

  1. var arcMenu = api.require('arcMenu');
  2. arcMenu.mainMenuTouchListener({
  3.       id:1,
  4. }, function(ret) {
  5.     if (ret) {
  6.         alert(JSON.stringify(ret));
  7.     }
  8. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

touchAction

展开和收起菜单

touchAction({params}, callback(ret))

params

id：

  • 类型：数字
  • 描述：要设置位置大小的菜单的id

expanded：

  • 类型：数字类型
  • 描述：展开方式，1：展开，2：合并，3：切换状态（仅android支持）
  • 默认：3

callback(ret, err)

ret：

  • 类型：JSON 对象（仅iOS支持）

内部字段：

  1. {
  2.     index:      //数字类型；点击子菜单返回其下标
  3. }

示例代码

  1. var arcMenu = api.require('arcMenu');
  2. arcMenu.touchAction({
  3.       id:1,
  4. }, function(ret) {
  5.     if (ret) {
  6.         alert(JSON.stringify(ret));
  7.     }
  8. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

removeItemShowHideListener

移除菜单展开与收起的监听（仅iOS支持）

removeItemShowHideListener({params})

params

id：

  • 类型：数字
  • 描述：要设置位置大小的菜单的id

示例代码

  1. var arcMenu = api.require('arcMenu');
  2. arcMenu.removeItemShowHideListener({
  3.       id:1,
  4. });

可用性

iOS系统

可提供的1.0.0及更高版本

removeMainMenuTouchListener

移除点击主菜单的监听（仅iOS支持）

removeMainMenuTouchListener({params})

params

id：

  • 类型：数字
  • 描述：要设置位置大小的菜单的id

示例代码

  1. var arcMenu = api.require('arcMenu');
  2. arcMenu.removeMainMenuTouchListener({
  3.       id:1,
  4. });

可用性

iOS系统

可提供的1.0.0及更高版本

bringToFront

控件显示在最上层（仅android支持）

bringToFront({params})

params

id：

  • 类型：数字
  • 默认值：无
  • 描述：要操作的控件id

示例代码

  1. var arcMenu = api.require('arcMenu');
  2. arcMenu.bringToFront({
  3.     id: 1
  4. });

可用性

Android系统

可提供的1.0.0及更高版本

论坛示例

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