MNPopups

• Method

reloadData insertItem close hide

论坛示例

为帮助用户更好更快的使用模块，论坛维护了一个，示例中包含示例代码、知识点讲解、注意事项等，供您参考。

概述

MNPopups 封装了一个带有指针的弹出气泡式菜单。开发者可通过制定指针位置来自定义气泡弹出位置及其方向。亦可通过 open 接口内 styles 参数 pointer 字段来指定指针在弹出气泡的位置。

本模块所弹出的菜单依附于当前主窗口，其生命周期也同当前主窗口。点击非菜单区域可以动画的形式隐藏该菜单栏。同时支持列表项的增、删、改，支持批量更新数据。

如果列表项太多而超过模块弹出气泡区域，则用户可上下滚动查看。若开发者指定的参数使气泡菜单超出当前屏幕，则模块内部会自动重新调整该气泡的布局，使其显示在当前屏幕可视区域以内。

模块示例截图如下：

open

打开

open({params}, callback(ret, err))

rect:

• 类型：JSON 类型
• 描述：（可选项）弹出模块的大小配置
• 默认值：见内部字段
• 内部字段：

position：

• 类型：JSON 对象
• 描述：（可选项）弹出模块的指针位置配置，模块指针为一个等边三角形。本参数确定该三角形紧贴弹框的边的中点在父窗口（window、frame）上的坐标
• 默认值：见内部字段
• 内部字段：

    x: api.winWidth-10,             //（可选项）数字类型；弹出模块指针在弹框坐标系的 x 坐标，；默认值：主窗口宽度-10
    y: 0                            //（可选项）数字类型；弹出模块指针在弹框坐标系的 y 坐标；默认值：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
        },
        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：

• 类型：数组类型
• 描述：菜单列表数据源
• 内部字段：

[{                           
    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对象
• 内部字段：

示例代码

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

可用性

可提供的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})

index：

• 类型：数字类型
• 描述：数据列表的索引
• 默认值：0

示例代码

var mnPopups = api.require('MNPopups');
mnPopups.deleteItem({
    index: 1
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

insertItem

从菜单列表中的指定位置插入数据

insertItem({params})

params

index：

• 类型：数字类型
• 描述：（可选项）数据列表的索引
• 默认值：列表最后一条数据的索引

data：

• 类型：JSON 类型
• 描述：数据源
• 内部字段：

示例代码

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()

示例代码

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

hide

隐藏 MNPopups 列表视图，并没有从内存里清除

hide()

示例代码

可用性

iOS系统，Android系统