popupMenu

立即使用

概述

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

open

弹出气泡菜单

open({params}, callback(ret))

params

rect:

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

bg:

  • 类型:字符串
  • 默认值:'#000000'
  • 描述:(可选项)气泡菜单的背景颜色,支持 rgb,rgba,#,

corner:

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

triangleStyle:

  • 类型:JSON 对象
  • 描述:三角图标的指向和位置
  • 内部字段:
{
    triangleRect:{(仅iOS有效)
       x:0,    //相对于气泡菜单的x坐标
       y:20,   //相对于气泡菜单的y坐标
       w:5,    //三角图标的宽度
       h:10    //三角图标的高度
    },
    direction:'right',   //字符串类型;三角图标的方向;right:朝右指向,left:朝左指向,up:朝上指向,down:朝下指向
}

verticalOrHorizontal:

  • 类型:字符串类型
  • 默认值:'horizontal'
  • 描述:(可选项)按钮列表展示方向
    • 'horizontal' //水平展示
    • 'vertical' //竖直展示

line:

  • 类型:JSON 对象
  • 描述:气泡菜单按钮分割线
  • 内部字段:
{

    lineColor:'#7FFF00',     //字符串类型;分割线的颜色;默认值:'#7FFF00'
    lineWidth:1              //数字类型;分割线的宽度;默认值:1
}

btnArr:

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

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
    index:       //数字类型;被点击按钮在数组中的角标
    btnTitle:'', //字符串类型;被点击按钮的标题(仅android支持)
}

示例代码

var name = api.require('popupMenu');
name.open({
      rect:{
          x:300,
          y:300,
          w:300,
          h:40
      },
      bg:'#708090',
      corner:5,
      triangleStyle:{
          triangleRect:{
              x:0,    //相对于rect的x坐标
              y:20,   //相对于rect的y坐标
              w:5,
              h:10
          },
          direction:'right',
      },

      verticalOrHorizontal:'vertical',
      line:{
          lineColor:'#7FFF00',
          lineWidth:1
      },

      btnArr:[
          {
              btnWidth:60,
              btnHeight:40,
              btnTitle:'标题1',
              bgColor:'#8470FF',
              textColor:'#DAA520',
              textHightColor:'#008B45',
              textFont:15,
              textLocation:'right',
              textMargin:5,
              isImg:true,
              imgLocation:'left',
              iconImg:'widget://res/car14',
              imgRect:{
                  x:10,
                  y:5,
                  w:30,
                  h:30,
              }
          },
          {
              btnWidth:60,
              btnHeight:40,
              btnTitle:'标题2',
              bgColor:'#8470FF',
              textColor:'#DAA520',
              textHightColor:'#008B45',
              textFont:15,
          },
          {
              btnWidth:60,
              btnHeight:40,
              btnTitle:'标题3',
              bgColor:'#8470FF',
              textColor:'#DAA520',
              textHightColor:'#008B45',
              textFont:15,
          }
      ]
}, function(ret) {
    if (ret) {
       alert(JSON.stringify(ret));
    }
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

close

关闭气泡菜单

open(callback(ret))

callback(ret)

ret:

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

示例代码

var name = api.require('popupMenu');
name.close(function(ret) {
    if (ret) {
       alert(JSON.stringify(ret));
    }
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本