popupMenu

open

close

概述

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) {
       api.alert({msg: 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) {
       api.alert({msg: JSON.stringify(ret)});
    }
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

是否仍需要帮助？ 请保持联络！
最后更新于 2024/11/18