arcMenu

论坛示例

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

概述

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及更高版本

论坛示例

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

是否仍需要帮助? 请保持联络!
最后更新于 2024/07/31