AppCan文档中心-uexPopoverMenu
 
下载文档

uexPopoverMenu
更新时间:2016-08-04

1、简介

弹出框插件

1.1、说明

仿微信,创建一个弹出框插件,同时位置、背景颜色、字体颜色、字体大小等可以定制,具体见下面,同时可以对用户点击事件进行回调。

1.2、UI展示

1.3、自定义插件下载

插件测试用例与源码下载:点击 插件中心至插件详情页 (插件测试用例与插件源码已经提供)
(自定义beta版插件下载上传到我的插件勾选使用)

2、API概览

2.1、方法

openPopoverMenu 创建弹出框

uexPopoverMenu.openPopoverMenu(params)

说明:

仿微信,创建弹出框,弹出框的宽和高自适应

参数:

  1. var params = {
  2. "x": ,//必选,与direction有关,距屏幕左边缘(direction为0或2)或右边缘(direction为1或3)的距离,建议使用屏幕的比例,解决屏幕适配
  3. "y": ,//必选,与direction有关,距屏幕顶部(direction为0或1)或底部(direction为2或3)的距离,建议使用屏幕的比例,解决屏幕适配
  4. "direction": ,//必选,位置说明符
  5. "bgColor": ,//可选,背景颜色, 如果不传默认是 #393A3F
  6. "dividerColor": ,//可选,分割线颜色, 如果不传默认是 #191B1D
  7. "textColor": ,//可选,字体颜色,如果不传默认是 #FFFFFF
  8. "textSize": ,//必选,字体大小,建议使用屏幕的比例,解决屏幕适配,如:window.screen.width*0.042较为理想
  9. "data":[ //必选,用于展示的数据数组
  10. {
  11. "icon": ,//可选,展示的图片路径
  12. "text": //必选,展示的文字
  13. },
  14. {
  15. "icon": ,//可选,展示的图片路径
  16. "text": //必选,展示的文字
  17. },
  18. {
  19. "icon": ,//可选,展示的图片路径
  20. "text": //必选,展示的文字
  21. },
  22. {
  23. "icon": ,//可选,展示的图片路径
  24. "text": //必选,展示的文字
  25. }
  26. ]
  27. }

参数说明:
icon参数和text参数必须成对出现,或者不传icon参数,示例如下。

平台支持:

Android 2.2+
iOS 6.0+

版本支持:

Android 3.0.0+
iOS 3.0.0+

示例:

  1. var params = {
  2. "x": window.screen.width*0.02,
  3. "y": window.screen.height*0.1,
  4. "direction":2,
  5. "bgColor":'#FFC125',
  6. "dividerColor":'#FFC125',
  7. "textColor":'#FFFFFF',
  8. "textSize":window.screen.width*0.042,
  9. "data":[
  10. {
  11. "icon":'res://groupchat.png',
  12. "text":'Group Chat'
  13. },
  14. {
  15. "icon":'res://addcontacts.png',
  16. "text":'Add Contacts'
  17. },
  18. {
  19. "icon":'res://scanqrcode.png',
  20. "text":'Scan QR code'
  21. },
  22. {
  23. "icon":'res://feedback.png',
  24. "text":'Feedback'
  25. }
  26. ]
  27. }
  28. uexPopoverMenu.openPopoverMenu(JSON.stringify(params));
  29. 或者
  30. var params = {
  31. "x": window.screen.width*0.02,
  32. "y": window.screen.height*0.1,
  33. "direction":2,
  34. "bgColor":'#FFC125',
  35. "dividerColor":'#FFC125',
  36. "textColor":'#FFFFFF',
  37. "textSize":window.screen.width*0.042,
  38. "data":[
  39. {
  40. "text":'Group Chat'
  41. },
  42. {
  43. "text":'Add Contacts'
  44. },
  45. {
  46. "text":'Scan QR code'
  47. },
  48. {
  49. "text":'Feedback'
  50. }
  51. ]
  52. }
  53. uexPopoverMenu.openPopoverMenu(JSON.stringify(params));

2.2、回调方法

cbItemSelected 点击选中的回调方法

uexPopoverMenu.cbItemSelected(selectRow)

参数:

参数名称 参数类型 是否必选 说明
selectRow String 选中的行号,行号标识从0开始

版本支持:

Android 3.0.0+
iOS 3.0.0+

示例:

  1. uexPopoverMenu.cbItemSelected = function(selectRow){
  2. alert("select index "+selectRow);
  3. }

3、更新历史

iOS

API版本:uexPopoverMenu-3.0.0

最近更新时间:2015-2-2

历史发布版本 更新内容
3.0.0 弹出框插件

Android

API版本:uexPopoverMenu-3.0.0

最近更新时间:2015-3-8

历史发布版本 更新内容
3.0.0 弹出框插件