popupMenu

立即使用

open close

概述

popupMenu 提供了一个气泡菜单的功能，开发者可以设置气泡菜单的位置，和菜单按钮的背景颜色、字体大小等功能

open

弹出气泡菜单

open({params}, callback(ret))

params

rect：

  • 类型：JSON 对象
  • 描述：气泡菜单的位置和大小
  • 内部字段：
  1. {
  2.     x:0,          //数字类型；气泡菜单弹出的x坐标
  3.     y:0,        //数字类型；气泡菜单弹出的y坐标
  4.     w:200,      //数字类型；气泡菜单的宽度
  5.     h:40,       //数字类型；气泡菜单的高度
  6. }

bg：

  • 类型：字符串
  • 默认值：’#000000’
  • 描述：（可选项）气泡菜单的背景颜色，支持 rgb，rgba，#，

corner：

  • 类型：数字类型
  • 默认值：5
  • 描述：（可选项）（仅iOS支持）气泡菜单的圆角大小

triangleStyle：

  • 类型：JSON 对象
  • 描述：三角图标的指向和位置
  • 内部字段：
  1. {
  2.     triangleRect:{（仅iOS有效）
  3.        x:0,    //相对于气泡菜单的x坐标
  4.        y:20,   //相对于气泡菜单的y坐标
  5.        w:5,    //三角图标的宽度
  6.        h:10    //三角图标的高度
  7.     },
  8.     direction:'right',   //字符串类型；三角图标的方向；right：朝右指向，left：朝左指向，up：朝上指向，down：朝下指向
  9. }

verticalOrHorizontal：

  • 类型：字符串类型
  • 默认值：’horizontal’
  • 描述：（可选项）按钮列表展示方向
    • ‘horizontal’ //水平展示
    • ‘vertical’ //竖直展示

line：

  • 类型：JSON 对象
  • 描述：气泡菜单按钮分割线
  • 内部字段：
  1. {
  3.     lineColor:'#7FFF00',     //字符串类型；分割线的颜色；默认值：'#7FFF00'
  4.     lineWidth:1              //数字类型；分割线的宽度；默认值：1
  5. }

btnArr：

  • 类型：数组类型
  • 描述：弹出的气泡菜单的信息，该数组有多少个元素，则有多少个菜单按钮
  • 内部字段：
  1. [{    
  2.    btnWidth:60,   // （可选项）（仅iOS支持）数字类型；按钮宽度；默认：60
  3.    btnHeight:40,  // （可选项）（仅iOS支持）数字类型；按钮高度；默认：40
  4.    btnTitle:'标题1', // （可选项）字符串类型；按钮标题；默认：空
  5.    bgColor:'#8470FF', // （可选项）字符串类型；按钮背景颜色；支持 rgb，rgba，#，默认#000000
  6.    textColor:'#DAA520', //（可选项）字符串类型；按钮标题颜色；支持 rgb，rgba，#，默认#FFFFFF
  7.    textHightColor:'#008B45', //（可选项）（仅iOS支持）字符串类型；按钮高亮状态下标题颜色；支持 rgb，rgba，#，默认#548B54
  8.    textHightBg:'',          //(可选项)（仅android支持）字符串类型，按钮按下时背景色；默认：‘#eeeeee’
  9.    textFont:15,    //（可选项）字符串类型；按钮标题大小；默认：15
  10.    textLocation:'left',  //(可选项)字符串类型；按钮标题的位置；'left'：居左，'center'：居中，'right'：居右；默认值：'left'
  11.    textMargin:5,  //（可选项）字符串类型；标题的边距；默认值：5
  12.    isImg:true, //(可选项)布尔类型；是否有图标；默认：NO
  13.    imgLocation:'left',  //（可选项）字符串类型；图标的位置；'left'：居左，'right':居右,'top':居上，‘bottom’：居下；默认值：'left';注意（isImg为true时有效）
  14.    iconImg:'widget://res/img', //字符串类型；图片的路径；注意（isImg为true时有效）
  15.    imgRect:{
  16.        x:10,  //图标相对于按钮的x坐标
  17.        y:5,   //图标相对于按钮的y坐标
  18.        w:30,  //图标的宽度
  19.        h:30,  //图标的高度
  20.    }
  21. }]

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     index:       //数字类型；被点击按钮在数组中的角标
  3.     btnTitle:'', //字符串类型；被点击按钮的标题（仅android支持）
  4. }

示例代码

  1. var name = api.require('popupMenu');
  2. name.open({
  3.       rect:{
  4.           x:300,
  5.           y:300,
  6.           w:300,
  7.           h:40
  8.       },
  9.       bg:'#708090',
  10.       corner:5,
  11.       triangleStyle:{
  12.           triangleRect:{
  13.               x:0,    //相对于rect的x坐标
  14.               y:20,   //相对于rect的y坐标
  15.               w:5,
  16.               h:10
  17.           },
  18.           direction:'right',
  19.       },
  21.       verticalOrHorizontal:'vertical',
  22.       line:{
  23.           lineColor:'#7FFF00',
  24.           lineWidth:1
  25.       },
  27.       btnArr:[
  28.           {
  29.               btnWidth:60,
  30.               btnHeight:40,
  31.               btnTitle:'标题1',
  32.               bgColor:'#8470FF',
  33.               textColor:'#DAA520',
  34.               textHightColor:'#008B45',
  35.               textFont:15,
  36.               textLocation:'right',
  37.               textMargin:5,
  38.               isImg:true,
  39.               imgLocation:'left',
  40.               iconImg:'widget://res/car14',
  41.               imgRect:{
  42.                   x:10,
  43.                   y:5,
  44.                   w:30,
  45.                   h:30,
  46.               }
  47.           },
  48.           {
  49.               btnWidth:60,
  50.               btnHeight:40,
  51.               btnTitle:'标题2',
  52.               bgColor:'#8470FF',
  53.               textColor:'#DAA520',
  54.               textHightColor:'#008B45',
  55.               textFont:15,
  56.           },
  57.           {
  58.               btnWidth:60,
  59.               btnHeight:40,
  60.               btnTitle:'标题3',
  61.               bgColor:'#8470FF',
  62.               textColor:'#DAA520',
  63.               textHightColor:'#008B45',
  64.               textFont:15,
  65.           }
  66.       ]
  67. }, function(ret) {
  68.     if (ret) {
  69.        alert(JSON.stringify(ret));
  70.     }
  71. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

close

关闭气泡菜单

open(callback(ret))

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     status:       //布尔类型；关闭气泡菜单成功还是失败
  3. }

示例代码

  1. var name = api.require('popupMenu');
  2. name.close(function(ret) {
  3.     if (ret) {
  4.        alert(JSON.stringify(ret));
  5.     }
  6. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本