MNPopups
论坛示例
为帮助用户更好更快的使用插件，论坛维护了一个示例，示例中包含示例代码、知识点讲解、注意事项等，供您参考。
概述
MNPopups 封装了一个带有指针的弹出气泡式菜单。开发者可通过制定指针位置来自定义气泡弹出位置及其方向。亦可通过 open 接口内 styles 参数 pointer 字段来指定指针在弹出气泡的位置。
本插件所弹出的菜单依附于当前主窗口，其生命周期也同当前主窗口。点击非菜单区域可以动画的形式隐藏该菜单栏。同时支持列表项的增、删、改，支持批量更新数据。
如果列表项太多而超过插件弹出气泡区域，则用户可上下滚动查看。若开发者指定的参数使气泡菜单超出当前屏幕，则插件内部会自动重新调整该气泡的布局，使其显示在当前屏幕可视区域以内。
插件示例截图如下：
open
打开
open({params}, callback(ret, err))
params
rect:
- 类型：JSON 类型
- 描述：（可选项）弹出插件的大小配置
- 默认值：见内部字段
- 内部字段：
{
w: 100, //（可选项）数字类型；弹出插件的宽度；默认值：100
h: 180 //（可选项）数字类型；弹出插件的高度；默认值：180
}
position：
- 类型：JSON 对象
- 描述：（可选项）弹出插件的指针位置配置，插件指针为一个等边三角形。本参数确定该三角形紧贴弹框的边的中点在父窗口（window、frame）上的坐标
- 默认值：见内部字段
- 内部字段：
{
x: api.winWidth-10, //（可选项）数字类型；弹出插件指针在弹框坐标系的 x 坐标，；默认值：主窗口宽度-10
y: 0 //（可选项）数字类型；弹出插件指针在弹框坐标系的 y 坐标；默认值：0
}
animationStartPoint：
- 类型：JSON 对象
- 描述：（可选项）动画的起始位置坐标 ;
- 默认值：见内部字段
- 内部字段：
{
x: 0, //（可选项）数字类型；动画的起始位置 x 坐标(iOS为相对于position参数)，；默认值：0
y: 0 //（可选项）数字类型；动画的起始位置 y 坐标(iOS为相对于position参数)；默认值：0
}
animation：
- 类型：布尔类型
- 描述：弹出和隐藏菜单时是否带动画效果（时长300毫秒）；弹出时从指针位置由小到大的渐大动画，隐藏时由大到小的渐小动画回到指针位置处隐藏
- 默认：true
animationDuration:
- 类型：数字类型
- 描述：动画时长（单位：ms）
- 默认：300
styles：
- 类型：JSON 类型
- 描述：插件整体样式
- 内部字段：
{
mask: 'rgba(0,0,0,0.2)', //（可选项）字符串类型；遮罩层背景，支持 rgb、rgba、#；默认：rgba(0,0,0,0.2)
bg: '#fff', //（可选项）字符串类型；列表背景，支持rgb、rgba、#；默认：#fff
corner: 5, //（可选项）数字类型；弹出气泡框的圆角大小；默认：0
cell: { //（可选项）列表项的样式配置
bg:{ //（可选项）JSON对象；背景配置
normal: '', //（可选项）字符串类型；列表项的背景，支持rgb、 rgba、#、img；默认：#fff
highlight: '' //（可选项）字符串类型；列表项的高亮背景，支持 rgb、rgba、#、img；默认：bg
},
h: 45, //（可选项）数字类型；列表项的高度；默认：45
title: { //（可选项）JSON 类型；列表项标题样式设置，上下居中显示
marginL: 45, //（可选项）数字类型；列表项标题相对于列表项左边的间距大小；默认：45
color: '#636363', //（可选项）字符串类型；列表项标题文字颜色，支持rgb、rgba、#；默认：#636363
size: 12, //（可选项）数字类型；列表项标题字体大小；默认：12
textAlign:left; //（可选项）字符串；列表标题对齐方式；默认：left；取值范围：
// left 居左
// right 居右
// center 居中
},
icon: { //（可选项）JSON 类型；列表项图标的样式设置，上下居中
marginL: 10, //（可选项）数字类型；图标相对于列表项左边的间距大小；默认：10
w: 25, //（可选项）数字类型；图标的宽度；默认：25
h: 25, //（可选项）数字类型；图标的高度；默认：同 w
corner: 2 //（可选项）数字类型；图标的圆角半径；默认：2
},
separateLine: { //（可选项）JSON 类型；分割线的样式设置
width: 1, //（可选项）数字类型；分割线的粗细，默认为1
marginLR: 0, //（可选项）数字类型；分割线距离左右的间距，默认为0
bg: '#C0C0C0', //（可选项）字符类型；分割线的背景颜色，支持rgb、rgba、#；默认：#C0C0C0
hideLastSeparateLine: false //(可选项)布尔类型；是否隐藏最后一条分割线，默认false
}
},
pointer: { //（可选项）JSON类型；尖角配置
size: 7, //（可选项）数字类型；尖角大小，该尖角为等边三角形，本参数为该三角形边长；默认：7
xPercent: 90, //（可选项）数字类型；尖角底边中点 x 坐标占插件宽度的百分比；默认：90
yPercent: 0, //（可选项）数字类型；尖角底边中点 y 坐标占插件高度的百分比；默认：0
orientation: 'downward' //（可选项）字符串类型；气泡菜单弹出方向，取值范围如下：
// upward：向上弹出
// downward：向下弹出
// leftward：向左边弹出
// rightward：向右边弹出
},
badge:{ // （可选项）JSON类型；配置badge
size:10, // （可选项）数字类型；badge大大小
color:'' // （可选项）字符串类型；badge的背景色
}
}
datas：
- 类型：数组类型
- 描述：菜单列表数据源
- 内部字段：
[{
title: '添加朋友', //字符串类型；列表标题文字
icon: 'fs://creater.png', //字符串类型；图标地址，支持本地路径（widget://、fs://）
hasBadge:false // 布尔类型；是否有badge
}]
border：
- 类型：JSON 对象
- 描述：（可选项）插件边框配置，若不传则不显示边框，本参数暂仅支持 iOS 平台
- 内部字段：
{
size: 0.5, //数字类型；边框粗细；默认：0.5
color: '#fff' //字符串类型；边框颜色，支持rgb、rgba、#；默认：#fff
}
callback(ret, err)
ret：
- 类型：JSON对象
- 内部字段：
{
eventType: 'show', // 字符串类型；交互事件类型,取值范围如下：
// show：插件加载成功并显示在屏幕上的事件（show接口不会触发此事件）
// click：点击菜单列表项
index: 0 // 数字类型；点击目标对应菜单列表项的索引，仅当 eventType 为 click 时有效
}
示例代码
var mnPopups = api.require('MNPopups');
mnPopups.open({
rect: {
w: 100,
h: 180
},
position: {
x: api.winWidth - 10,
y: 0
},
styles: {
mask: 'rgba(0,0,0,0.2)',
bg: '#eee',
cell: {
bg: {
normal: '',
highlight: ''
},
h: 45,
title: {
marginL: 45,
color: '#636363',
size: 12,
},
icon: {
marginL: 10,
w: 25,
h: 25,
corner: 2
}
},
pointer: {
size: 7,
xPercent: 90,
yPercent: 0,
orientation: 'downward'
}
},
datas: [{
title: '添加朋友',
icon: 'fs://MNPopups/addFriends.png'
}, {
title: '扫一扫',
icon: 'fs://MNPopups/scan.png'
}, {
title: '面对面快传',
icon: 'fs://MNPopups/send.png'
}],
animation: true
}, function(ret) {
if (ret) {
api.alert({msg: JSON.stringify(ret)});
}
});
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
reloadData
刷新 MNPopups 列表数据
reloadData({params})
params
datas：
- 类型：数组类型
- 描述：（可选项）菜单列表数据源，若为空则等待 reloadData 接口刷新后显示该插件
- 内部字段：
[{
title: '添加朋友', //字符串类型；列表标题文字
icon: 'fs://creater.png', //字符串类型；图标地址，支持本地路径（widget://、fs://）
hasBadge:false //布尔类型；是否显示badge，默认：false
}]
示例代码
var mnPopups = api.require('MNPopups');
mnPopups.reloadData({
datas: [{
title: '添加群',
icon: 'fs://MNPopups/addGroup.png'
}, {
title: '发送到电脑',
icon: 'fs://MNPopups/sendComputer.png'
}]
});
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
deleteItem
从菜单列表中移除指定索引的数据
deleteItem({params})
params
index：
- 类型：数字类型
- 描述：数据列表的索引
- 默认值：0
示例代码
var mnPopups = api.require('MNPopups');
mnPopups.deleteItem({
index: 1
});
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
insertItem
从菜单列表中的指定位置插入数据
insertItem({params})
params
index：
- 类型：数字类型
- 描述：（可选项）数据列表的索引
- 默认值：列表最后一条数据的索引
data：
- 类型：JSON 类型
- 描述：数据源
- 内部字段：
{
title: '创建群组', //字符串类型；列表标题文字
icon: 'fs://creater.png' //字符串类型；图标地址，支持本地路径（widget://、fs://）
}
示例代码
var mnPopups = api.require('MNPopups');
mnPopups.insertItem({
index: 1,
data: {
title: '创建讨论组',
icon: 'fs://creater.png'
}
});
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
updateItem
更新指定分组中指定位置的数据
updateItem({params})
params
index：
- 类型：数字类型
- 描述：（可选项）数据列表的索引
- 默认值：0
data：
- 类型：JSON 类型
- 描述：数据源
- 内部字段：
{ //JSON 数组类型；菜单列表项的数据
title: '添加朋友', //字符串类型；列表标题文字
icon: 'fs://creater.png' //字符串类型；图标地址，支持本地路径（widget://、fs://）
}
示例代码
var mnPopups = api.require('MNPopups');
mnPopups.updateItem({
index: 1,
data: {
title: '付款',
icon: 'fs://MNPopups/pay.png'
}
});
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
close
关闭 MNPopups 列表视图
close()
示例代码
var obj = api.require('MNPopups');
obj.close();
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
show
显示已隐藏的 MNPopups 列表视图
show()
示例代码
var mnPopups = api.require('MNPopups');
mnPopups.show();
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
hide
隐藏 MNPopups 列表视图，并没有从内存里清除
hide()
示例代码
var mnPopups = api.require('MNPopups');
mnPopups.hide();
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本