circleMenu

立即使用

open close show hide addIcons delateIcons changeIcons

概述

circleMenu封装了一个弹窗样式的环形菜单,可以自定义菜单的个数,菜单可以拖动旋转,进而达到某些项目中的需求

open

打开

open({params}, callback(ret))

params

rect：

  • 类型：JSON 对象
  • 描述：视图frame
  • 内部字段：
{
        x:0,        //数字类型; 视图的左上角点的坐标
        y:0,        //数字类型; 视图的左上角点的坐标
       w:100,     //数字类型; 视图的宽  
       h:100      //数字类型:视图高度    
}

centerBtnStyle：

  • 类型：JSON 对象
  • 描述：中心按钮数据源
  • 内部字段：
{
        centerBtnSize: ,           //数字类型; （可选项）中心按钮的size; 默认:30
        centerBtnTitle: '',  //字符串类型; (可选项）中心按钮的标题 ; 默认:无（仅iOS支持）
        centerBtnImg:'',  //字符串类型; (可选项）（android为必选项）中心按钮背景图片，要求本地路径（widget://、fs://); 默认:无
        centerBtnExpandImg:'', //字符串类型，按钮展开图片，支持widget、fs格式（仅android支持）
        centerBtnFont: , //数字类型; (可选项) 中心按钮按钮标题大小; 默认15（仅iOS支持）
        centerBtnTitleColor:'' , //字符串类型; （可选项）标题颜色，支持 rgb，rgba，#; 默认:#000000（仅iOS支持）
}

imgArr：

  • 类型：数组
  • 描述：菜单按钮的图片
  • 内部字段：
[
 'widget://res/car14.png', //字符串类型; (可选项）菜单子按钮背景图片，要求本地路径（widget://、fs://); 默认:无
 'widget://res/car14.png'
]

imgArrHighlight：

  • 类型：数组
  • 描述：菜单按钮的高亮图片（仅IOS支持）
  • 内部字段：
[
 'widget://res/car14.png', //字符串类型; (可选项）菜单子按钮背景图片，要求本地路径（widget://、fs://); 默认:无
 'widget://res/car14.png'
]

innerCircleRadius:

  • 类型：数字类型
  • 默认值：30
  • 描述：（可选项）菜单展开时的内径半径

bgColor：

  • 类型：字符串
  • 默认值：#FFFFFF
  • 描述：（可选项）菜单展开时的背景颜色，支持 rgb，rgba，#（仅iOS支持）

iconSize：

  • 类型：数字类型
  • 默认值：30
  • 描述：（可选项）环形子菜单按钮的尺寸

isTouchMove

  • 类型：布尔类型
  • 描述：(可选项)是否可拖动（仅android支持）
  • 默认值：true

startAngle:

  • 类型：数字类型
  • 描述：（可选项）展开子按钮起始角度（仅android支持）
  • 默认值：95

endAngle:

  • 类型：数字类型
  • 描述：（可选项）展开子按钮终止角度（仅android支持）
  • 默认值：260

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
{
   status: ,   //布尔类型; 
   number:,     //数字类型；按钮控件编号（仅android支持）
   index: ,    //数字类型 ; 被点击按钮的index 
}

示例代码


var name = api.require('circleMenu');
name.open({
          rect:{
          x:200,
          y:200,
          w:200,
          h:200
          },
          centerBtnStyle:{
              centerBtnSize:50 ,           //数字类型; （可选项）中心按钮的size; 默认:30
              centerBtnTitle: '按钮',  //字符串类型; (可选项）中心按钮的标题 ; 默认:无
              centerBtnImg:'widget://res/car14.png',  //字符串类型; (可选项）中心按钮背景图片，要求本地路径（widget://、fs://); 默认:无
              centerBtnFont:20 , //数字类型; (可选项) 中心按钮按钮标题大小; 默认15
              centerBtnColor:'#87CEEB' , //字符串类型; （可选项）标题颜色，支持 rgb，rgba，#; 默认:黑色
          },
          imgArr:['widget://res/icon.png',
          'widget://res/car14.png',
          'widget://res/car15.png',
           ],
          innerCircleRadius:30,
          bgColor:'#FFF68F'
}, function(ret) {
    if (ret) {
       alert(JSON.stringify(ret));
    }
});

补充说明

打开列表视图

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

close

关闭菜单

close(param,callback(ret))

params

number:

  • 类型：数字类型
  • 描述：要操作的控件编号（仅android支持）

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
{
   status: ,   //布尔类型; 
}

示例代码

var menu = api.require('circleMenu');
menu.close({
    number:,
},function(ret) {
    if (ret) {
       alert(JSON.stringify(ret));
    }
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

hide

隐藏菜单

hide(params,callback(ret))

params

number:

  • 类型：数字类型
  • 描述：要操作的控件编号（仅android支持）

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
{
   status: ,   //布尔类型; 
}

示例代码

var menu = api.require('circleMenu');
menu.hide({
    number:,
},function(ret) {
    if (ret) {
       alert(JSON.stringify(ret));
    }
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

show

显示菜单

show(params,callback(ret))

params

number:

  • 类型：数字类型
  • 描述：要操作的控件编号（仅android支持）

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
{
   status: ,   //布尔类型; 
}

示例代码

var menu = api.require('circleMenu');
menu.show({
number:,
},function(ret) {
    if (ret) {
       alert(JSON.stringify(ret));
    }
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

addIcons

添加子按钮（仅iOS支持）

addIcons({params}, callback(ret))

params

imgArr：

  • 类型：数组
  • 描述：菜单按钮的图片
  • 内部字段：
[
 'widget://res/car14.png', //字符串类型; (可选项）菜单子按钮背景图片，要求本地路径（widget://、fs://); 默认:无
 'widget://res/car14.png'
]

imgArrHighlight：

  • 类型：数组
  • 描述：菜单按钮的高亮图片
  • 内部字段：
[
 'widget://res/car14.png', //字符串类型; (可选项）菜单子按钮背景图片，要求本地路径（widget://、fs://); 默认:无
 'widget://res/car14.png'
]

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
{
   status: ,   //布尔类型; 
}

示例代码

var menu = api.require('circleMenu');
menu.addIcons(function(ret) {
    if (ret) {
       alert(JSON.stringify(ret));
    }
});

可用性

iOS系统

可提供的1.0.0及更高版本

delateIcons

删除子按钮（仅iOS支持）

delateIcons({params}, callback(ret))

params

indexIcon：

  • 类型：数字类型
  • 描述：删除第几个按钮
  • 默认:第0个

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
{
   status: ,   //布尔类型; 
}

示例代码

var menu = api.require('circleMenu');
menu.delateIcons(function(ret) {
    if (ret) {
       alert(JSON.stringify(ret));
    }
});

可用性

iOS系统

可提供的1.0.0及更高版本

changeIcons

更换子按钮（仅iOS支持）

changeIcons({params}, callback(ret))

params

indexIcon：

  • 类型：数字类型
  • 描述：更换第几个按钮
  • 默认:第0个

iconImage：

  • 类型：字符串
  • 描述：菜单子按钮背景图片的路径 ;'widget://res/car14.png',要求本地路径（widget://、fs://);

iconImageHighlight：

  • 类型：字符串
  • 描述：菜单子按钮背景高亮图片的路径 ;'widget://res/car14.png',要求本地路径（widget://、fs://);默认无

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
{
   status: ,   //布尔类型; 
}

示例代码

var menu = api.require('circleMenu');
menu.changeIcons(function(ret) {
    if (ret) {
       alert(JSON.stringify(ret));
    }
});

可用性

iOS系统

可提供的1.0.0及更高版本