arcMenu
changeImg itemShowHideListener mainMenuTouchListener touchAction changeFrame removeItemShowHideListener removeMainMenuTouchListener
论坛示例
为帮助用户更好更快的使用插件，论坛维护了一个示例，示例中包含示例代码、知识点讲解、注意事项等，供您参考。
概述
arcMenu 是一个弧形菜单，子菜单按钮成弧形排列，展开和缩放菜单都有炫酷的动画。开发者可以配置子按钮的样式和数量以及子按钮排列方式
open
打开弹动菜单
open({params}, callback(ret, err))
params
type：
- 类型：字符串
- 默认值：arc
- 描述：（可选项）弹出的子菜单的类型。arc为弧形菜单，straight为直线型菜单
mainMenu：
- 类型：JSON 对象
- 默认值：见内部字段
- 描述：主菜单的位置大小和背景图
- 内部字段：
{
x:0, //（可选项）圆心x坐标，数字，默认0
y:0, //（可选项）圆心y坐标，数字，默认0
w:50, //（可选项）宽度，数字，默认50
h:50, //（可选项）高度，数字，默认50
img:’’ //背景图片路径，支持widget、fs等本地协议路径
imgLight:’’ //高亮状态下背景图片路径，支持widget、fs等本地协议路径
}
items：
- 类型：数组对象
- 默认值：无
- 描述：设置子菜单信息集合
内部字段：
[{
w:40, //（可选项）宽度，数字，默认40
h:40, //（可选项）高度，数字 ，默认40
img:’’ //背景图片路径，支持widget、fs等本地协议路径
imgLight:’’ //高亮状态下背景图片路径，支持widget、fs等本地协议路径
}]
startAngle：
- 类型：数字
- 默认值：0
- 描述：（可选项）起点角度（12点钟方向为0度，顺时针方向计数）
wholeAngle：
- 类型：数字
- 默认值：180
- 描述：（可选项）弧形菜单的角度大小，当type为arc时必传，当type为straight时此参数可不传
radius：
- 类型：数字
- 默认值：100
- 描述：（可选项）弧形子菜单距离主菜单的半径，若是直线型子菜单，则为最远的子菜单距离主菜单的距离
fixedOn：
- 类型：字符串类型
- 描述：（可选项）插件视图添加到指定 frame 的名字（只指 frame，传 window 无效）
- 默认：插件依附于当前 window
fixed:
- 类型：布尔
- 默认值：true
- 描述：（可选项）是否将插件视图固定到窗口上，不跟随窗口上下滚动
shieldClick:
- 类型：布尔
- 默认值：true
- 描述：（可选项）点击非菜单区域是否收缩菜单（仅iOS支持）
mmRotation:
- 类型：布尔
- 默认值：true
- 描述：（可选项）点击主菜单是否带有旋转动效
imRotation:
- 类型：布尔
- 默认值：true
- 描述：（可选项）关闭菜单时子菜单是否带有旋转动效
isTouchMove:
- 类型：布尔
- 默认值：false
- 描述：（可选项）是否可拖动；iOS在展开状态下不能拖动
callback(ret, err)
ret：
- 类型：JSON 对象
内部字段：
{
id: //打开后返回id
index: //点击子菜单返回其下标
}
示例代码
var arcMenu = api.require('arcMenu');
arcMenu.open({
type: 'arc',
mainMenu: {
x: api.frameWidth / 2,
y: api.frameHeight / 2,
w: 50,
h: 50,
img: 'widget://res/img/ic/color-lump-square.png',
imgLight: 'widget://res/img/ic/color-lump-square.png'
},
items: [{
w: 40,
h: 40,
img: 'widget://res/img/ic/small-bell.png',
imgLight: 'widget://res/img/ic/small-bell.png'
}, {
w: 40,
h: 40,
img: 'widget://res/img/ic/count.png',
imgLight: 'widget://res/img/ic/count.png'
}, {
w: 40,
h: 40,
img: 'widget://res/img/ic/color-lump-triangle.png',
imgLight: 'widget://res/img/ic/color-lump-triangle.png'
}, {
w: 40,
h: 40,
img: 'widget://res/img/ic/compass.png',
imgLight: 'widget://res/img/ic/compass.png'
}, {
w: 40,
h: 40,
img: 'widget://res/img/ic/message.png',
imgLight: 'widget://res/img/ic/message.png'
}, {
w: 40,
h: 40,
img: 'widget://res/img/ic/clock.png',
imgLight: 'widget://res/img/ic/clock.png'
}],
wholeAngle: 180,
radius: 100,
fixedOn: api.frameName
}, function(ret, err) {
if (ret) {
api.alert({
msg: JSON.stringify(ret)
})
} else {
api.alert({
msg: JSON.stringify(err)
})
}
});
补充说明
打开菜单
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
close
关闭菜单
close({params})
params
id：
- 类型：数字
- 默认值：无
- 描述：要关闭的菜单的id，不传则关闭所有
示例代码
var arcMenu = api.require('arcMenu');
arcMenu.close({
id: 1
});
补充说明
关闭菜单
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
hide
隐藏已打开并显示的菜单
hide({params})
params
id：
- 类型：数字
- 默认值：无
- 描述：要操作的菜单的id
示例代码
var arcMenu = api.require('arcMenu');
arcMenu.hide({
id: 1
});
补充说明
隐藏菜单插件视图，并没有从内存清除
可用性
iOS系统，Android系统 可提供的1.0.1及更高版本
show
显示已打开但被隐藏的菜单
show({params})
params
id：
- 类型：数字
- 默认值：无
- 描述：要操作的视图id
示例代码
var arcMenu = api.require('arcMenu');
arcMenu.show({
id: 1
});
补充说明
无
可用性
iOS系统，Android系统 可提供的1.0.0及更高版本
changeImg
设置主按钮和子按钮背景图片（仅iOS支持）
changeImg({params}, callback(ret))
params
id：
- 类型：数字类型
- 描述：菜单id
mainMenu：
- 类型：JSON 对象
- 默认值：见内部字段
- 描述：主菜单的背景图
- 内部字段：
{
img:’’ //（可选项）背景图片路径，支持widget、fs等本地协议路径；默认：open接口中的img
imgLight:’’ //（可选项）高亮状态下背景图片路径，支持widget、fs等本地协议路径；默认：open接口中的imgLight
}
items：
- 类型：数组对象
- 默认值：无
- 描述：设置子菜单信息集合
内部字段：
[{
w:40, //（可选项）宽度，数字，默认40
h:40, //（可选项）高度，数字 ，默认40
img:’’ //（可选项）背景图片路径，支持widget、fs等本地协议路径；默认open接口中的img
imgLight:’’ //（可选项）高亮状态下背景图片路径，支持widget、fs等本地协议路径；默认open接口中的imgLight
}]
callback(ret, err)
ret：
- 类型：JSON 对象
内部字段：
{
id: //打开后返回id
index: //点击子菜单返回其下标
}
示例代码
var arcMenu = api.require('arcMenu');
arcMenu.changeImg({
mainMenu: {
img: 'widget://res/img/ic/color-lump-square.png',
imgLight: 'widget://res/img/ic/color-lump-square.png'
},
items: [{
w: 40,
h: 40,
img: 'widget://res/img/ic/small-bell.png',
imgLight: 'widget://res/img/ic/small-bell.png'
}, {
w: 40,
h: 40,
img: 'widget://res/img/ic/count.png',
imgLight: 'widget://res/img/ic/count.png'
}, {
w: 40,
h: 40,
img: 'widget://res/img/ic/color-lump-triangle.png',
imgLight: 'widget://res/img/ic/color-lump-triangle.png'
}, {
w: 40,
h: 40,
img: 'widget://res/img/ic/compass.png',
imgLight: 'widget://res/img/ic/compass.png'
}, {
w: 40,
h: 40,
img: 'widget://res/img/ic/message.png',
imgLight: 'widget://res/img/ic/message.png'
}, {
w: 40,
h: 40,
img: 'widget://res/img/ic/clock.png',
imgLight: 'widget://res/img/ic/clock.png'
}]
}, function(ret) {
if (ret) {
api.alert({
msg: JSON.stringify(ret)
})
}
});
可用性
iOS系统
可提供的1.0.0及更高版本
changeFrame
设置菜单的位置（仅iOS支持）
changeFrame({params}, callback(ret))
params
mainMenuRect：
- 类型：JSON 对象
- 默认值：见内部字段
- 描述：主菜单的位置大小
- 内部字段：
{
x:0, //（可选项）圆心x坐标，数字，默认0
y:0, //（可选项）圆心y坐标，数字，默认0
w:50, //（可选项）宽度，数字，默认50
h:50, //（可选项）高度，数字，默认50
}
id：
- 类型：数字
- 描述：要设置位置大小的菜单的id
callback(ret, err)
ret：
- 类型：JSON 对象
内部字段：
{
id: //打开后返回id
index: //点击子菜单返回其下标
}
示例代码
var arcMenu = api.require('arcMenu');
arcMenu.changeFrame({
id:1,
mainMenuRect: {
x: 100,
y: api.winHeight - 100,
w: 80,
h: 80,
},
}, function(ret) {
if (ret) {
api.alert({
msg: JSON.stringify(ret)
})
}
});
可用性
iOS系统
可提供的1.0.0及更高版本
itemShowHideListener
菜单展开与收起的监听
itemShowHideListener({params}, callback(ret))
params
id：
- 类型：数字
- 描述：要设置监听的菜单id
callback(ret, err)
ret：
- 类型：JSON 对象
内部字段：
{
status: //布尔类型；false：打开，true：收起
index: //数字类型；变化菜单id，即传入id
}
示例代码
var arcMenu = api.require('arcMenu');
arcMenu.itemShowHideListener({
id:1,
}, function(ret) {
if (ret) {
api.alert({
msg: JSON.stringify(ret)
})
}
});
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
mainMenuTouchListener
点击主菜单的监听
mainMenuTouchListener({params}, callback(ret))
params
id：
- 类型：数字
- 描述：要监听的菜单id
callback(ret, err)
ret：
- 类型：JSON 对象
内部字段：
{
evenType: //字符串；
- touch //点击
index: //数字类型；变化菜单id，即传入id
}
示例代码
var arcMenu = api.require('arcMenu');
arcMenu.mainMenuTouchListener({
id:1,
}, function(ret) {
if (ret) {
api.alert({
msg: JSON.stringify(ret)
})
}
});
可用性
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支持）
内部字段：
{
index: //数字类型；点击子菜单返回其下标
}
示例代码
var arcMenu = api.require('arcMenu');
arcMenu.touchAction({
id:1,
}, function(ret) {
if (ret) {
api.alert({
msg: JSON.stringify(ret)
})
}
});
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
removeItemShowHideListener
移除菜单展开与收起的监听（仅iOS支持）
removeItemShowHideListener({params})
params
id：
- 类型：数字
- 描述：要设置位置大小的菜单的id
示例代码
var arcMenu = api.require('arcMenu');
arcMenu.removeItemShowHideListener({
id:1,
});
可用性
iOS系统
可提供的1.0.0及更高版本
removeMainMenuTouchListener
移除点击主菜单的监听（仅iOS支持）
removeMainMenuTouchListener({params})
params
id：
- 类型：数字
- 描述：要设置位置大小的菜单的id
示例代码
var arcMenu = api.require('arcMenu');
arcMenu.removeMainMenuTouchListener({
id:1,
});
可用性
iOS系统
可提供的1.0.0及更高版本
bringToFront
控件显示在最上层（仅android支持）
bringToFront({params})
params
id：
- 类型：数字
- 默认值：无
- 描述：要操作的控件id
示例代码
var arcMenu = api.require('arcMenu');
arcMenu.bringToFront({
id: 1
});
可用性
Android系统
可提供的1.0.0及更高版本
论坛示例
为帮助用户更好更快的使用插件，论坛维护了一个示例，示例中包含示例代码、知识点讲解、注意事项等，供您参考。