dialogBox

alert scene raffle receipt discount actionMenu amount webView confirm inputbox

论坛示例

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

概述

dialogBox 封装了十一种款式的对话框，每一种款式都提供一个接口来调用，开发者可按照各个接口的样式来自定义对话框上的文字、图片、图文等。后续我们会根据开发者需求继续添加若干样式对话框接口。每一种样式图展示如下，开发者可参考配置：

alert 样式如下图所示：

sendMessage 样式如下图所示：

scene 样式如下图所示：

evaluation 样式如下图所示：

raffle 样式如下图所示：

taskPlan 样式如下图所示：

receipt 样式如下图所示：

tips 样式如下图所示：

discount 样式如下图所示：

share 样式如下图所示：

actionMenu 样式如下图所示：

input 样式如下图所示：

amount 样式如下图所示：

list 样式如下图所示：

webView 样式如下图所示：

popupAlert 样式如下图所示：

confirm 样式如下图所示：

弹出的对话框都可以通过调用 close 接口来关闭。

模块接口

alert

弹出 alert 样式的对话框

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

params

texts：

• 类型：JSON 对象
• 描述：（可选项）alert 对话框模块可配置的文本
• 内部字段：

styles:

• 类型：JSON 对象
• 描述：alert 对话框样式配置
• 内部字段：

    bg: '#fff',            //（可选项）字符串类型；对话框整体背景配置，支持#、rgb、rgba、img；默认：#fff
    maskBg:'rgba(100, 100, 100, 0.5)', //（可选项）字符串类型，不传使用系统默认颜色
    corner: 2,             //（可选项）数字类型；对话框背景圆角大小；默认：2
    w: 300,                //（可选项）数字类型；对话框的宽；默认：300
    title:{                //（可选项）JSON对象；弹窗标题栏样式配置，不传则不显示标题区域
        marginT: 20,       //（可选项）数字类型；标题栏与对话框顶端间距；默认：20
        icon: '',          //（可选项）字符串类型；标题前面的图标路径，要求本地路径（widget://、fs://）；图片为正方形的，如：50*50、100*100，建议开发者传大小合适的图片以适配高分辨率手机屏幕，不传则不显示
        iconSize: 40,      //（可选项）数字类型；icon 图标边长大小,若 icon 不存在则此参数无效；默认：24
        titleSize: 14,     //（可选项）数字类型；标题字体大小；默认：14
        titleColor: '#fff' //（可选项）字符串类型；标题字体颜色，支持#、rgb、rgba；默认：#fff
    },
    content:{              //（可选项）JSON 对象；文本内容配置，若不传则不显示该区域
        marginT: 20,       //（可选项）数字类型；内容文本顶端与标题栏底端的距离，如果标题栏不存在，则是到窗口顶端的距离；默认：20
        marginB: 20,       //（可选项）数字类型；内容文本底端与 left/right 顶端的距离，如果 left/right 都不存在，则是到对话框底端的距离；默认：20
        color: '#eee',     //（可选项）字符串类型；内容文本字体颜色，支持 rgb、rgba、#；默认：#eee
        size: 12           //（可选项）数字类型：内容文本字体大小；默认：12
    },
    left:{                 //（可选项）JSON 对象；左边按钮样式配置，不传则不显示左边按钮
        marginB: 7,        //（可选项）数字类型；左边按钮的下边距；默认：7
        marginL: 20,       //（可选项）数字类型；左边按钮的左边距；默认：20
        w: 130,            //（可选项）数字类型；左边按钮的宽；默认：130
        h: 35,             //（可选项）数字类型；左边按钮的高；默认：35
        corner: 2,         //（可选项）数字类型；左边按钮圆角半径；默认：0.0
        bg: '#e0e',        //（可选项）字符串类型；左边按钮的背景，支持rgb、rgba、#、img；默认：'#e0e'
        color: '#007FFF',  //（可选项）字符串类型；左边按钮标题字体颜色，支持rgb，rgba、#；默认：'#007FFF'
        size: 12           //（可选项）数字类型；左边按钮标题字体大小；默认：12
    },
    right: {               //（可选项）JSON 对象；右边按钮样式配置，不传则不显示右边按钮
        marginB: 7,        //（可选项）数字类型；右边按钮的下边距；默认：7
        marginL: 10,      //（可选项）数字类型；右边按钮左边距；默认：10
        w: 130,            //（可选项）数字类型；右边按钮的宽；默认：130
        h: 35,             //（可选项）数字类型；右边按钮的高；默认：35
        corner: 2,         //（可选项）数字类型；右边按钮圆角半径；默认：0.0
        bg: '#e0e',        //（可选项）字符串类型；右边按钮的背景，支持rgb、rgba、#、img；默认：'#e0e'
        color: '#007FFF',  //（可选项）字符串类型；右边按钮标题字体颜色，支持rgb、rgba、#；默认：'#007FFF'
        size: 12           //（可选项）数字类型；右边按钮标题字体大小；默认：12
    }
    horizontalLine:{
    color:'rgba(245,245,245,0)', //（可选项）字符串类型；左右按钮上边横线的颜色，支持rgb、rgba、#；默认：'rgba(245,245,245,0)'
    height:1                //（可选项）数字类型；左右边按钮横线的高度；默认：0   
    }
    verticalLine:{
        color:'rgba(245,245,245,0)', //（可选项）字符串类型；左右按钮中间竖线的颜色，支持rgb、rgba、#；默认：'rgba(245,245,245,0)'
      width:1                 //（可选项）数字类型；左右边按钮竖线的高度；默认：0  
    }
}

tapClose：

• 类型：布尔类型
• 描述：（可选项）是否点击遮罩层关闭该对话框
• 默认值：false

animation:

• 类型：布尔类型
• 描述：是否再打开或关闭对话框时使用动画
• 默认值：false

callback(ret, err)

ret：

• 类型：JSON 对象
• 内部字段：

{
    eventType: 'left',     //字符串类型；交互事件类型，取值范围如下：
                           // left（表示用户点击了左边按钮）
                           // right（表示用户点击了右边按钮）
}

示例代码

var dialogBox = api.require('dialogBox');
dialogBox.alert({
    texts: {
        title: '确认',
        content: '送你一个超级礼包，内有超值福利，先到先得，点击领取 >>',
        leftBtnTitle: '取消',
        rightBtnTitle: '确认'
    },
    styles: {
        bg: '#fff',
        w: 300,
        corner:2,
        title: {
            marginT: 20,
            icon: 'widget://res/gou.png',
            iconSize: 40,
            titleSize: 14,
            titleColor: '#000'
        },
        content: {
            color: '#000',
            size: 14
        },
        left: {
            marginB: 7,
            marginL: 20,
            w: 130,
            h: 35,
            corner: 2,
            bg: '#e0e',
            size: 12
        },
        right: {
            marginB: 7,
            marginL: 10,
            w: 130,
            h: 35,
            corner: 2,
            bg: '#e0e',
            size: 12
        }
    }
}, function(ret) {
    if (ret.eventType == 'left') {
        var dialogBox = api.require('dialogBox');
        dialogBox.close({
            dialogName: 'alert'
        });
    }
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

sendMessage

弹出 sendMessage 样式的对话框

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

params

texts：

• 类型：JSON 对象
• 描述：（可选项）sendMessage 对话框模块可配置的文本
• 内部字段：

{
    title: '昵称',               //（可选项）字符串类型；标题栏显示文本内容，若不传则不显示该文本
    hintText: '（请输入）',       //（可选项）字符串类型；标题栏输入框默认文本，若不传则不显示该文本  
    content: '内容文本',          //（可选项）字符串类型；对话框文本内容，该区域大小随文本内容多少自适应，若不传则不显示该文本
    leftBtnTitle: '取消',        //（可选项）字符串类型；左边按钮标题，若不传则不显示该文本
    rightBtnTitle: '发送'        //（可选项）字符串类型；右边按钮标题，若不传则不显示该文本
}

styles:

• 类型：JSON 对象
• 描述：sendMessage 对话框样式配置
• 内部字段：

{
    bg: '#fff',                 //（可选项）字符串类型；对话框整体背景配置，支持#、rgb、rgba、img；默认：#fff
    maskBg:'rgba(100, 100, 100, 0.5)', //（可选项）字符串类型，不传使用系统默认颜色
    corner: 2,                  //（可选项）数字类型；对话框背景圆角大小；默认：2
    w: 300,                     //（可选项）数字类型；对话框的宽；默认：300
    title:{                     //（可选项）JSON 对象；弹窗的 title 样式配置，不传则不显示标题区域
        h: 60,                  //（可选项）数字类型；标题栏高度；默认：60
        show: {                 //（可选项）JSON 对象；标题栏显示文字样式配置
            marginL: 6,         //（可选项）数字类型；显示文本相对于标题栏左边的距离；默认：6
            titleSize: 14,      //（可选项）数字类型；标题字体大小；默认：14
            titleColor: '#000'  //（可选项）字符串类型；标题字体颜色，支持#、rgb、rgba；默认：#000
        },
        input:{                 //（可选项）JSON 对象；标题栏输入文本框样式配置
            marginL: 6,         //（可选项）数字类型；输入文本框相对于显示文本的距离，若显示文本不存在，则是与标题栏左边的距离；默认：6
            textSize: 14,       //（可选项）数字类型；输入文本框文本字体大小；默认：14
            textColor: '#000'   //（可选项）字符串类型；输入文本框文本字体颜色，支持#、rgb、rgba；默认：#000
        }
    },
    content:{                   //（可选项）JSON 对象；文本内容配置，若不传则不显示该区域
        marginT: 20,            //（可选项）数字类型；内容文本顶端与标题栏底端的距离，如果标题栏不存在，则是到窗口顶端的距离；默认：20
        marginB: 20,            //（可选项）数字类型；内容文本底端与 left/right 顶端的距离，如果 left/right 都不存在，则是到对话框底端的距离；默认：20
        color: '#eee',          //（可选项）字符串类型；内容文本字体颜色，支持 rgb、rgba、#；默认：#eee
        size: 12                //（可选项）数字类型：内容文本字体大小；默认：12
    },
    left:{                      //（可选项）JSON 对象；左边按钮样式配置，不传则不显示左边按钮
        marginB: 7,             //（可选项）数字类型；左边按钮的下边距；默认：7
        marginL: 20,            //（可选项）数字类型；左边按钮的左边距；默认：20
        w: 130,                 //（可选项）数字类型；左边按钮的宽；默认：130
        h: 35,                  //（可选项）数字类型；左边按钮的高；默认：35
        corner: 2,              //（可选项）数字类型；左边按钮圆角半径；默认：0.0
        bg: '#e0e',             //（可选项）字符串类型；左边按钮的背景，支持rgb、rgba、#、img；默认：'#e0e'
        color: '#007FFF',       //（可选项）字符串类型；左边按钮标题字体颜色，支持rgb，rgba、#；默认：'#007FFF'
        size: 12                //（可选项）数字类型；左边按钮标题字体大小；默认：12
    },
    right: {                    //（可选项）JSON 对象；右边按钮样式配置，不传则不显示右边按钮
        marginB: 7,             //（可选项）数字类型；右边按钮的下边距；默认：7
        marginL: 10,            //（可选项）数字类型；右边按钮的左边距；默认：10
        w: 130,                 //（可选项）数字类型；右边按钮的宽；默认：130
        h: 35,                  //（可选项）数字类型；右边按钮的高；默认：35
        corner: 2,              //（可选项）数字类型；右边按钮圆角半径；默认：0.0
        bg: '#e0e',             //（可选项）字符串类型；右边按钮的背景，支持rgb、rgba、#、img；默认：'#e0e'
        color: '#007FFF',       //（可选项）字符串类型；右边按钮标题字体颜色，支持rgb、rgba、#；默认：'#007FFF'
        size: 12                //（可选项）数字类型；右边按钮标题字体大小；默认：12
    }
}

tapClose：

• 类型：布尔类型
• 描述：（可选项）是否点击遮罩层关闭该对话框
• 默认值：false

animation:

• 类型：布尔类型
• 描述：是否再打开或关闭对话框时使用动画
• 默认值：false

callback(ret, err)

ret：

• 类型：JSON 对象
• 内部字段：

{
    eventType: 'left',        //字符串类型；交互事件类型，取值范围如下：
                              // left（表示用户点击了左边按钮）
                              // right（表示用户点击了右边按钮）
    text: ''                  //字符串类型；输入文本框当前的值
}

示例代码

var dialogBox = api.require('dialogBox');
dialogBox.sendMessage({
    texts: {
        title: '你的昵称',
        hintText: '（点击此处修改昵称）',
        content: '亲，送你一个80元大礼包，请查收！退订请回复TD',
        leftBtnTitle: '取消',
        rightBtnTitle: '发送'
    },
    styles: {
        bg: '#fff',
        w: 300,
        corner: 2,
        title: {
            h: 40,
            show: {
                marginL: 6,
                titleSize: 14,
                titleColor: '#000'
            },
            input: {
                marginL: 6,
                textSize: 14,
                textColor: '#000'
            }
        },
        content: {
            color: '#000',
            size: 12
        },
        left: {
            marginB: 7,
            marginL: 10,
            w: 130,
            h: 35,
            corner: 2,
            bg: '#e0e',
            size: 12
        },
        right: {
            marginB: 7,
            marginL: 10,
            w: 130,
            h: 35,
            corner: 2,
            bg: '#e0e',
            size: 12
        }
    }
}, function(ret) {
    api.alert({
        msg: JSON.stringify(ret)
    });
    if (ret.eventType == 'left') {
        var dialogBox = api.require('dialogBox');
        dialogBox.close({
            dialogName: 'sendMessage'
        });
    }
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

scene

弹出 scene 样式的对话框

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

params

rect:

• 类型：JSON 对象类型
• 描述：scene 对话框的尺寸配置, 上下左右居中对齐
• 内部字段：

{
    w: 280,                     //（可选项）数字类型；弹出框的宽度；默认值：280
    h: 400                      //（可选项）数字类型；弹出框的高度；默认值：400
}

texts：

• 类型：JSON 对象
• 描述：（可选项）scene对话框模块可配置的文本
• 内部字段：

{
    title: '确认',              //（可选项）字符串类型；标题内容，若不传则不显示该文本
    content:'场景',             //（可选项）字符串类型；对话框文本内容，若不传则不显示该文本
    okBtnTitle: '取消'          //（可选项）字符串类型；底部按钮标题，若不传则不显示该文本
}

styles:

• 类型：JSON 对象；
• 描述：scene 对话框样式设置
• 内部字段

{
    bg: '#fff',                        //（可选项）字符串类型；对话框整体背景颜色配置，支持#、rgb、rgba、img；默认：#fff
    maskBg:'rgba(100, 100, 100, 0.5)', //（可选项）字符串类型，不传使用系统默认颜色
    corner: 2,                         //（可选项）数字类型；对话框背景圆角大小，本功能暂仅支持iOS平台；默认：2
    title:{                            //（可选项）JSON 对象；弹窗 title 样式配置，不传则不显示
        bg: '#aaa',                    //（可选项）字符串类型；标题栏背景颜色配置，支持 #、rgb、rgba；默认：#aaa
        h: 44,                         //（可选项）数字类型；标题栏高度，默认：44
        size: 14,                       //（可选项）数字类型；标题字体大小；默认：14
        color: '#000'                     //（可选项）字符串类型；标题字体颜色，支持#、rgb、rgba；默认：#000
    },
    sceneImg:{                         //（可选项）JSON 对象；场景图片样式配置，不传则不显示
        h: 150,                        //（可选项）场景图片高度；默认：150
        path: ''                       // 字符串类型；场景图片路径（要求本地路径（widget://、fs://    ）
    },
    content:{                          //（可选项）JSON 对象；文本内容样式配置，不传则不显示该区域
        color: '#111',                 //（可选项）字符串类型；文本字体颜色,支持 rgb、rgba、#；默认：#111
       alignment: 'left'              //（可选项）字符串类型；文本字对齐方式，可为 left|center|right；默认：left
        size: 12                       //（可选项）数字类型；文本字体大小；默认：12
    },
    cell: {                            //（可选项）JSON 对象；情景事件选项每一行的样式配置，与 optionDatas 搭配使用，若 optionDatas 不存在则此配置无效
        bg: '#fff',                    //（可选项）字符串类型；情景事件选项每一行的背景，支持rgb、rgba、#、img；默认：#fff
        h: 48,                         //（可选项）数字类型；情景事件选项每一行的高度；默认：48
        icon: {                        //（可选项）JSON 对象；情景事件选项每一行图标的样式配置；与 optionDatas->icon 配合使用，若 optionDatas->icon 不存在则忽略此配置，不显示该行的图标区域
            marginL: 15,               //（可选项）数字类型；图标相对于分组子项左端的间距大小；默认：15
            marginT: 9,                //（可选项）数字类型；图标相对于分组子项顶端的间距大小；默认：9
            w: 30,                     //（可选项）数字类型；图标的宽度；默认：30
            h: 30,                     //（可选项）数字类型；图标的高度；默认：同 w
            corner: 2                  //（可选项）数字类型；图标的圆角半径；默认：2
        },
        text: {                        //（可选项）JSON 对象；情景事件选项每一行文字样式配置，事件选项文字会自己上下居中显示，与 optionDatas->text 配合使用，若 optionDatas->text 不存在则忽略此配置，不显示该行的文本区域
            interval:10,               //（可选项）数字类型；事件选项文本与左边图标的间距；默认：10
            size: 14,                  //（可选项）数字类型；事件选项文本字体大小；默认：14
            color: '#636363',          //（可选项）字符串类型；事件选项文本文字颜色，支持rgb、rgba、#；默认：#636363
            selectedColor: '#636363',  //（可选项）字符串类型；事件选项文本文字选中后颜色，支持rgb、rgba、#；默认：#636363
            align: 'left'              //（可选项）字符串类型；事件选项文本文字对齐方式，可为 left|center|right；默认：left
        },
        lineColor: '#eee'              //（可选项）字符串类型；分隔线的颜色，支持：rgb、rgba、#；默认：'#eee'
    },
    ok: {                              //（可选项）JSON 对象；底部确认按钮的样式配置，不传则不显示底部按钮
        h: 20,                         //（可选项）数字类型；底部按钮的高度；默认：20
        bg: '#89a',                    //（可选项）字符串类型；底部按钮的背景颜色，支持：rgb、rgba、#；默认：'#89a'
        titleColor: '#f00',            //（可选项）字符串类型；底部按钮 title 文字颜色，支持：rgb、rgba、#；默认：'#f00'     
        titleSize: 14                  //（可选项）数字类型；底部按钮 title 文字大小；默认：14
    }
}

optionDatas:

• 类型：数组类型
• 描述：（可选项）场景事件选项数据源，若为空则不显示
• 内部字段：

[
    {                                //（可选项）数组类型；该场景每一项的数据
        icon: 'fs://creater.png',    //（可选项）字符串类型；图标地址，支持本地和网络资源路径（widget://、fs://），不传则不显示该行的图标
        text: '事件选项文字'           //（可选项）字符串类型；事件选项文字，不传则不显示该行文本
    }
]

tapClose：

• 类型：布尔类型
• 描述：（可选项）是否点击遮罩层关闭该对话框
• 默认值：false

animation:

• 类型：布尔类型
• 描述：是否再打开或关闭对话框时使用动画
• 默认值：false

callback(ret, err)

ret：

• 类型：JSON 对象
• 内部字段：

{
    eventType: 'ok',    // 字符串类型；交互事件类型，取值范围如下：
                        // ok：用户点击了 ok 按钮
                        // cell：用户点击了 cell 按钮
    index: 1            // 数字类型；表示用户点击了的选项的索引
}

示例代码

var dialogBox = api.require('dialogBox');
dialogBox.scene({
    rect: {
        w: 280,
        h: 400
    },
    texts: {
        title: '情景1',
        content: '火车售票处前的队伍蜿蜒纵横，旁边一小伙一边张望，一边将手伸向前面买票人的口袋，啊，是小偷!',
        okBtnTitle: '确定'
    },
    styles: {
        bg: '#fff',
        title: {
            bg: '#aaa',
            h: 44,
            size: 14,
            color: '#000'
        },
        sceneImg: {
            h: 150,
            path: 'widget://image/sceneImg.png'
        },
        content: {
            color: '#111',
            size: 12
        },
        cell: {
            bg: '#fff',
            h: 48,
            text: {
                color: '#636363',
                size: 13
            },
            icon: {
                marginL: 15,
                marginT: 9,
                w: 30,
                h: 30,
                corner: 2
            }
        },
        ok: {
            bg: '#89a',
            titleColor: '#f00'
        }
    },
    optionDatas: [{
        icon: 'widget://image/scene1.png',
        text: '1、拿出手机偷拍'
    }, {
        icon: 'widget://image/scene2.png',
        text: '2、见义勇为抓小偷'
    }, {
        text: '3、大声提醒买票的人'
    }]
}, function(ret, err) {
    if (ret) {
        alert(JSON.stringify(ret));
    } else {
        alert(JSON.stringify(err));
    }
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

evaluation

弹出 evaluation 样式的对话框

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

params

styles:

• 类型：JSON 对象
• 描述：evaluation 对话框样式配置
• 内部字段：

{
    bg: '#fff',             //（可选项）字符串类型；对话框背景颜色，支持#、rgb、rgba、img，默认：#fff
    maskBg:'rgba(100, 100, 100, 0.5)', //（可选项）字符串类型，不传使用系统默认颜色
    corner: 2,              //（可选项）数字类型；对话框背景圆角大小；默认：2
    w: 300,                 //（可选项）数字类型；对话框的宽；默认 300
    title:{                 //（可选项）JSON 对象；对话框标题栏样式配置，若不传则不显示标题区域
        marginT: 20,        //（可选项）数字类型；标题栏顶部与弹出框顶部距离；默认 20
        size: 14,           //（可选项）数字类型；标题字体大小；默认：14
        color: '#000',      //（可选项）字符串类型；标题字体颜色，支持 #、rgb、rgba；默认：#000
        bold: true          //（可选项）布尔类型；标题字体是否是粗体；默认：true
    },
    content:{               //（可选项）JSON 对象；文本内容样式配置；不传则不显示文本区域
        marginT: 20,        //（可选项）数字类型；文本顶端与标题栏底端的间距，如果标题栏不存在，则是到弹出框顶端的距离；默认20
        marginB: 20,        //（可选项）数字类型；文本底端与底端首个按钮的间距，若底部不存在按钮，则是到弹出框底端的距离；默认：20
        marginHorizental:10,//（可选项）数字类型；文本距离对话框左右边的距离；默认：10
        color: '#111',      //（可选项）字符串类型：文本字体颜色,支持 rgb、rgba、#；默认：#111
        size: 12            //（可选项）数字类型：文本数字类型；默认：12
    },
    buttons:[{              //（可选项）数组类型；JSON 对象组成的数组，和texts中buttons数组长度保持一致。按钮样式配置,不传则不显示 button 区域
        marginB: 0,         //（可选项）数字类型；按钮的下边距；默认：0
        marginL: 0,         //（可选项）数字类型；按钮的左边距；默认：0
        w: 300,             //（可选项）数字类型；按钮的宽；默认：300
        h: 35,              //（可选项）数字类型；按钮的高；默认：35
        bg: '#fff',         //（可选项）字符串类型；按钮的背景，支持 rgb，rgba，#，img；默认：'#fff'
        color: '#007FFF',   //（可选项）字符串类型；按钮显示文字颜色，支持 rgb，rgba,#；默认：'#007FFF'
        size: 12            //（可选项）数字类型；按钮显示文字的大小；默认：12
    }]
}

texts：

• 类型：JSON 对象
• 描述：（可选项）evaluation 对话框模块可配置的文本
• 内部字段：

{
    title: '确认',          //（可选项）字符串类型；标题内容，若不传则不显示该文本
    content:'场景',         //（可选项）字符串类型；对话框文本内容，文本区域大小随文本多少自适应，若不传则不显示该文本
    buttons: [{            //（可选项）数组类型；按钮显示文字组成的数组，和styles中buttons数组长度保持一致。由上往下排列（最上边的按钮索引为0）
        text: '取消'        //（可选项）字符串类型；按钮显示文字；默认：未设置时只显示背景
    }]
}

tapClose：

• 类型：布尔类型
• 描述：（可选项）是否点击遮罩层关闭该对话框
• 默认值：false

animation:

• 类型：布尔类型
• 描述：是否再打开或关闭对话框时使用动画
• 默认值：false

callback(ret, err)

ret：

• 类型：JSON 对象
• 内部字段：

{
    index: 1           //数字类型；表示用户点击了的按钮的索引，由上往下排列（最上边的按钮索引为 0）
}

示例代码

var dialogBox = api.require('dialogBox');
dialogBox.evaluation({
    styles: {
        bg: '#fff',
        w: 300,
        title: {
            marginT: 20,
            size: 15,
            color: '#000',
            bold: true
        },
        content: {
            marginT: 20,
            color: '#111',
            size: 12
        },
        buttons: [{
            marginB: 0,
            marginL: 0,
            w: 300,
            h: 35,
            bg: '#fff',
            color: '#007FFF',
            size: 12
        }, {
            marginB: 0,
            marginL: 0,
            w: 300,
            h: 35,
            bg: '#fff',
            color: '#007FFF',
            size: 12
        }]
    },
    texts: {
        title: '评价',
        content: '亲，给个好评吧',
        buttons: [{
            text: '下次再说'
        }, {
            text: '残忍的拒绝'
        }]
    }
}, function(ret, err) {
    if (ret) {
        alert(JSON.stringify(ret));
    } else {
        alert(JSON.stringify(err));
    }
});

可用性

iOS系统，Android系统

可提供的 1.0.0 及更高版本

raffle

弹出 raffle 样式的对话框

params

texts：

• 类型：JSON 对象
• 描述：（可选项）raffle 对话框模块可配置的文本
• 内部字段：

{
    title: '确认',          //（可选项）字符串类型；标题内容，若不传则不显示该文本
    mainText: '收入囊中',    //（可选项）字符串类型；主文本内容，若不传则不显示该文本
    subText: '告诉好友',     //（可选项）字符串类型；副文本内容，若不传则不显示该文本
    leftTitle: '取消',      //（可选项）字符串类型；左边按钮标题，若不传则不显示该文本
    rightTitle: '确定'      //（可选项）字符串类型；左边按钮标题，若不传则不显示该文本
}

styles:

• 类型：字符串
• 描述：raffle 对话框样式设置
• 内部字段：

{
    bg: '#fff',                //（可选项）字符串类型；对话框背景颜色，支持#、rgb、rgba、img；默认：#fff
    maskBg:'rgba(0,0,0,0.5)',  //（可选项）字符串类型；遮罩层背景颜色，支持#、rgb、rgba；默认：rgba(0,0,0,0.5)
    corner: 2,                 //（可选项）数字类型；对话框背景圆角大小；默认：2
    w: 300,                    //（可选项）数字类型；对话框的宽；默认 300
    title:{                    //（可选项）JSON 对象；弹窗标题栏样式配置，若不传则不显示标题区域
        size: 14,              //（可选项）数字类型；标题字体大小；默认：14
        color: '#000',         //（可选项）字符串类型；标题字体颜色，支持#、rgb、rgba；默认：#000
        marginT: 0             //（可选项）数字类型；距顶部的距离，默认为0.
    },
    icon:{                     //（可选项）JSON 对象；图标样式配置，不传则不显示该插图区域
        marginT: 20,           //（可选项）数字类型；图标顶端与标题栏底端的距离，图标左右居中显示；默认：20
        w: 40,                 //（可选项）数字类型；图标宽度；默认：40
        h: 40,                 //（可选项）数字类型；图标高度；默认：40
        iconPath: 'widget://'  // 字符串类型；图标路径，要求本地路径（widget://、fs://）；
    },
    main: {                    //（可选项）JSON 对象；主文本样式设置，主文本会左右居中显示，若不传则不显示主文本区域
        marginT: 20,           //（可选项）数字类型；主文本相对于 icon 底端的间距大小；默认：20
        color: '#636363',      //（可选项）字符串类型；主文本文字颜色，支持rgb、rgba、#；默认：#636363
        size: 13               //（可选项）数字类型；主文本字体大小；默认：13
    },
    sub: {                     //（可选项）JSON 对象；副文本样式设置，副文本会左右居中显示，若不传则不显示富文本区域
        marginT: 8,            //（可选项）数字类型；副文本和主文本之间的间隙大小；默认：8
        color: '#999999',      //（可选项）字符串类型；副文本文字颜色，支持 rgb、rgba、#；默认：#999999
        size: 12               //（可选项）数字类型；副文本字体大小；默认：12
    },
    left:{                     //（可选项）JSON 对象；左边按钮样式设置, 不传则不显示左边按钮
        marginB: 7,            //（可选项）数字类型；左边按钮的下边距；默认：7
        marginL: 18,           //（可选项）数字类型；左边按钮的左边距；默认：18
        w: 90,                 //（可选项）数字类型；左边按钮的宽；默认：90
        h: 35,                 //（可选项）数字类型；左边按钮的高；默认：35
        corner: 0.0,           //（可选项）数字类型；左边按钮圆角半径；默认：0.0
        bg: '#fff',            //（可选项）字符串类型；左边按钮的背景，支持rgb，rgba，#，img；默认：'#fff'
        color: '#007FFF',      //（可选项）字符串类型；左边按钮显示文字颜色，支持rgb，rgba,#；默认：'#007FFF'
        size: 12               //（可选项）数字类型；左边按钮显示文字的大小；默认：12
    },
    right: {                   //（可选项）JSON 对象；右边按钮样式设置，不传则不显示右边按钮
        marginB: 7,            //（可选项）数字类型；右边按钮的下边距；默认：7
        marginL: 18,           //（可选项）数字类型；右边按钮的左边距；默认：18
        w: 90,                 //（可选项）数字类型；右边按钮的宽；默认：90
        h: 35,                 //（可选项）数字类型；右边按钮的高；默认：35
        corner: 0.0,           //（可选项）数字类型；右边按钮圆角半径；默认：0.0
        bg: '#fff',            //（可选项）字符串类型；右边按钮的背景，支持rgb，rgba，#，img；默认：'#fff'
        color: '#007FFF',      //（可选项）字符串类型；右边按钮显示文字颜色，支持rgb，rgba,#；默认：'#007FFF'
        size: 12               //（可选项）数字类型；右边按钮显示文字的大小；默认：12
    }
}

tapClose：

• 类型：布尔类型
• 描述：（可选项）是否点击遮罩层关闭该对话框
• 默认值：false

animation:

• 类型：布尔类型
• 描述：是否再打开或关闭对话框时使用动画
• 默认值：false

callback(ret, err)

ret：

• 类型：JSON 对象
• 内部字段：

{
    eventType: 'left',          //字符串类型；交互事件类型，取值范围如下：
                                // left（表示用户点击了左边按钮）
                                // right（表示用户点击了右边按钮）
}

示例代码

var dialogBox = api.require('dialogBox');
dialogBox.raffle({
    texts: {
        title: '恭喜你',
        mainText: '5枚钱币',
        subText: '这就中了，还有什么你做不到',
        leftTitle: '收入囊中',
        rightTitle: '告诉好友'
    },
    styles: {
        bg: '#fff',
        w: 300,
        title: {
            size: 14,
            color: '#000'
        },
        icon: {
            marginT: 20,
            w: 40,
            h: 40,
            iconPath: 'widget://image/raffle.png'
        },
        main: {
            marginT: 20,
            color: '#636363',
            size: 13
        },
        sub: {
            marginT: 8,
            color: '#999999',
            size: 12
        },
        left: {
            marginB: 7,
            marginL: 18,
            w: 130,
            h: 35,
            corner: 2,
            bg: '#fff',
            color: '#007FFF',
            size: 12
        },
        right: {
            marginB: 7,
            marginL: 18,
            w: 130,
            h: 35,
            corner: 2,
            bg: '#fff',
            color: '#007FFF',
            size: 12
        }
    }
}, function(ret, err) {
    if (ret) {
        alert(JSON.stringify(ret));
    } else {
        alert(JSON.stringify(err));
    }
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

taskPlan

弹出 taskPlan 样式的对话框

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

params

rect：

• 类型：JSON 类型
• 描述：（可选项）taskPlan 对话框的宽度配置
• 内部字段：

{
    w: 300                    //（可选项）数字类型；对话框的宽度；默认值：300
}

texts：

• 类型：JSON 对象
• 描述：（可选项）taskPlan 对话框模块可配置的文本
• 内部字段：

{
    mainTitle: '主标题',       //（可选项）字符串类型；主标题，若不传则不显示主标题内容
    subTitle: '副标题',        //（可选项）字符串类型；副标题，若不传则不显示副标题内容
    content: [{               //（可选项）数组类型；各行文本内容，若不传则不显示该文本
       text: ''               // 字符串类型；每一行文本内容
    }],
    btnTitle: '确定'           //（可选项）字符串类型；底部按钮标题，若不传则底部按钮不显示标题
}

styles:

• 类型：JSON 对象类型
• 描述：taskPlan 对话框样式设置
• 内部字段：

{
    bg: '#fff',                //（可选项）字符串类型；对话框背景颜色，支持#、rgb、rgba、img，默认：#fff
    maskBg:'rgba(0,0,0,0.5)',  //（可选项）字符串类型；遮罩层背景颜色，支持#、rgb、rgba；默认：rgba(0,0,0,0.5)
    corner: 2,                 //（可选项）数字类型；对话框背景圆角大小；默认：2
    main: {                    //（可选项）JSON 对象；主标题样式设置，主文本会左右居中显示，若不传则不显示主标题区域
        marginT: 20,           //（可选项）数字类型；主标题相对于弹出框顶部的间距大小；默认：20
        color: '#636363',      //（可选项）字符串类型；主标题文字颜色，支持rgb、rgba、#；默认：#636363
        size: 13,              //（可选项）数字类型；主标题字体大小；默认：13
        bold: true             //（可选项）布尔类型；主标题字体粗体显示，true | false；默认：true
    },
    sub: {                     //（可选项）JSON 对象；副标题样式设置，副文本会左右居中显示，若不传则不显副标题区域
        marginT: 8,            //（可选项）数字类型；副标题和主文本之间的间隙大小；默认：8
        color: '#999999',      //（可选项）字符串类型；副标题文字颜色，支持 rgb、rgba、#；默认：#999999
        size: 12,              //（可选项）数字类型；副标题字体大小；默认：12
    content: [{                //（可选项）数组类型；每一行内容的样式组成的数组，从上往下排列，若不传则不显示内容区域
        bg: '#fff',            //（可选项）字符串类型；文本内容背景颜色，支持rgb，rgba,#；默认：'#fff'
        marginT: 10,           //（可选项）数字类型；文本相对于弹出框顶端的间距大小；默认：10
        marginL: 10,           //（可选项）数字类型；文本相对于弹出框左端的间距大小；默认：10
        w: 280,                //（可选项）数字类型；文本宽度；默认：280
        h: 30 ,                //（可选项）数字类型；文本高度；默认：30
        align: 'left',         //（可选项）字符串类型；文本对齐方式，left | center | right；默认：left
        color: '#007FFF',      //（可选项）字符串类型；按钮显示文字颜色，支持rgb，rgba,#；默认：'#007FFF'
        size: 12               //（可选项）数字类型；按钮显示文字的大小；默认：12
    }],
    ok: {                      // JSON 对象；底部按钮样式设置
        marginT: 10,           //（可选项）数字类型；按钮的上边距；默认：10
        marginB: 10,           //（可选项）数字类型；按钮的下边距；默认：10
        marginL: 20,           //（可选项）数字类型；按钮的左边距；默认：20
        w: 280,                //（可选项）数字类型；按钮的宽；默认：280
        h: 35,                 //（可选项）数字类型；按钮的高；默认：35
        bg: '#fff',            //（可选项）字符串类型；按钮的背景，支持rgb，rgba，#，img；默认：'#fff'
        color: '#007FFF',      //（可选项）字符串类型；按钮显示文字颜色，支持rgb，rgba,#；默认：'#007FFF'
        size: 12               //（可选项）数字类型；按钮显示文字的大小；默认：12
    }
}

tapClose：

• 类型：布尔类型
• 描述：（可选项）是否点击遮罩层关闭该对话框
• 默认值：false

animation:

• 类型：布尔类型
• 描述：是否再打开或关闭对话框时使用动画
• 默认值：false

callback(ret, err)

ret：

• 类型：JSON 对象
• 内部字段：

{
    eventType: 'ok'               // 字符串类型；交互事件类型，取值范围如下：
                                  // ok（表示用户点击了底部按钮）
}

示例代码

var dialogBox = api.require('dialogBox');
dialogBox.taskPlan({
    rect: {
        w: 300
    },
    texts: {
        mainTitle: '昨天玩的不够努力哦',
        subTitle: '今天没有获得任务次数奖励呢',
        content: [{
            text: '今日赚任务总次数：3次'
        }, {
            text: '3次（基础）+ 0次（奖励）'
        }],
        btnTitle: '开始做任务'
    },
    styles: {
        bg: '#fff',
        main: {
            marginT: 20,
            size: 13,
            bold: true,
        },
        sub: {
            marginT: 8,
            color: '#999999',
            size: 12,
        },
        content: [{
            bg: '#f00',
            marginT: 10,
            w: 280,
            h: 30,
            align: 'center',
            color: '#007FFF',
            size: 12
        }, {
            bg: '#fff',
            marginT: 10,
            w: 280,
            h: 30,
            align: 'left',
            color: '#007FFF',
            size: 12
        }],
        ok: {
            marginB: 10,
            marginL: 20,
            w: 280,
            h: 40,
            bg: '#fff',
            color: '#007FFF',
            size: 12
        }
    }
}, function(ret) {
    alert(JSON.stringify(ret));
    if (ret.eventType == 'ok') {
        var dialogBox = api.require('dialogBox');
        dialogBox.close({
            dialogName: 'taskPlan'
        });
    }
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

receipt

弹出 receipt 样式的对话框

receipt({params}

params

rect:

• 类型：JSON 数组类型
• 描述：（可选项）对话框的宽高设置
• 内部字段：

{            
     w:200,               //（可选项）数字类型；弹出框的宽度；默认值：200
     h:300                //（可选项）数字类型；弹出框的宽度；默认值：300
}

texts:

• 类型：JSON 数组类型
• 描述：对话框按钮或标题的文本设置
• 内部字段：

{
     title:'标题',        //（可选项）字符串类型；标题内容；不传则不显示该文本
     cancel:'取消',       //（可选项）字符串类型；取消按钮文本配置；不传则不显示该文本
}

items:

• 类型：JSON 数组类型
• 描述：对话框列表的显示数据
• 内部字段：

[
    {
        key   :  '起步价', // 字符串类型；列表标题内容；不传则不显示该文本
        value :  '0.00'   // 字符串类型；列表描述内容；不传则不显示该文本
    }
]

styles:

• 类型：JSON 对象类型
• 描述：（可选项）对话框样式设置
• 内部字段：

tapClose：

• 类型：布尔类型
• 描述：（可选项）是否点击遮罩层关闭该对话框
• 默认值：false

animation:

• 类型：布尔类型
• 描述：是否再打开或关闭对话框时使用动画
• 默认值：false

ret:

• 类型：JSON 对象
• 内部字段：

{
    eventType : 'cancel'        // 字符串类型；返回的事件类型, 用户点击了底部的 cancel 按钮
}

示例代码

var dialogBox = api.require('dialogBox');
dialogBox.receipt({
    rect: {
        w: 300,
        h: 360
    },
    items: [{
        key: '起步价',
        value: '15.00'
    }, {
        key: '15公里',
        value: '50.10'
    }, {
        key: '9.98分钟',
        value: '19'
    }, {
        key: '小计',
        value: '69'
    }, {
        key: '优惠',
        value: '10'
    }, {
        key: '已消费',
        value: '69.0'
    }],
    texts: {
        title: '我的打车收据',
        cancel: '取消'
    },
    styles: {
        bg: '#FFF',
        title: {
            textColor: '#000',
            textSize: 18,
            marginT: 10
        },
        topBorder: {
            borderColor: '#000',
            borderWidth: 2,
            marginT: 10
        },
        listHeight: 260,
        item: {
            textColor: '#000',
            textSize: 14,
            marginL: 10,
            marginT: 5,
            marginB: 5,
            bgColor: '#FFF'
        },
        bottomBorder: {
            borderColor: '#000',
            borderWidth: 2,
        },
        cancel: {
            textSize: 18,
            textColor: '#f00',
            marginT: 10,
            highlight: '#696969'
        }
    }
}, function(ret, err) {
    if (ret) {
        alert(JSON.stringify(ret));
    } else {
        alert(JSON.stringify(err));
    }
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

tips

弹出 tips 样式的对话框

tips({params}

params

rect:

• 类型：JSON 对象类型
• 描述：（可选项）对话框的宽高设置
• 内部字段：

{
     w:200                      //（可选项）数字类型；弹出框的宽度；默认值：200
}

texts:

• 类型：JSON 对象类型
• 描述：对话框标题和按钮的文本设置
• 内部字段：

{
    title  : '这里是标题文本',    //（可选项）字符串类型；标题文本，不传则不显示该文本
    content: '这里是内容'        //（可选项）字符串类型；内容文本；不传则不显示该文本
}

buttons:

• 类型：JSON 数组类型
• 描述：底部按钮的文本设置
• 内部字段：

[{
     normal : 'widget://image/icon.png',      // 字符串类型；按钮常态图标的路径，支持 widget:// fs://
     highlight : 'widget://image/icon.png',   // 字符串类型；按钮高亮图标的路径，支持 widget:// fs://
     text :  '微信'                            //（可选项）字符串类型；按钮文本，不传则不显示该文本
}]

styles:

• 类型：JSON 对象类型
• 描述：对话框的样式设置
• 内部字段：

{
    bg:'#FFF',                                //（可选项）字符串类型；对话框的背景色，支持#、rgb、rgba、img；默认：#FFF
    maskBg:'rgba(0,0,0,0.5)',  //（可选项）字符串类型；遮罩层背景颜色，支持#、rgb、rgba；默认：rgba(0,0,0,0.5)
    corner: 2,                                //（可选项）数字类型；对话框背景圆角大小，本功能暂仅支持iOS平台；默认：2
    topImage:{                                //（可选项）顶部图标的样式设置，若不传则不显示顶部插图区域
        path:'widget://image/tipImage.png',   //（可选项）字符串类型；顶部图标的的路径，支持 (widget://、fs://)；不传则不显示该图片
        w: 200,                               //（可选项）数字类型；图标的宽度；默认值：200
        h: 80                                 //（可选项）数字类型；图标的高度；默认值：80
    },
    title:{                                   //（可选项）JSON对象类型；标题文本信息设置，若不传则不显示标题区域
        color: '#000',                        //（可选项）字符串类型；标题文本字体颜色，支持#、rgb、rgba；默认：#000
        size : 14,                            //（可选项）数字类型；标题文本字体大小；默认值：14
        marginT  : 15                         //（可选项）数字类型；距离顶部图标的上边距； 默认值：15
    },
    content:{                                 //（可选项）JSON对象设置；内容文本设置，该区域高度随内容大小自适应，若不传则不显示内容文本区域
        color : '#000',                       //（可选项）字符串类型；内容文本字体颜色，支持#、rgb、rgba；默认：#000
        size  : 12,                           //（可选项）数字类型；字体的大小；默认值：12
        marginT : 15                          //（可选项）数字类型；距离标题的上边距；默认值：15
    },
    border:{                                  // (可选项) 内容边框与下面按钮的分隔线设置
        color: '#eee',                        //（可选项）字符串类型；分割线的颜色，默认值：#eee
        width: 2,                             //（可选项）数字类型；分割线的粗细，默认值：2
        marginT: 15                           //（可选项）数字类型；距内容文本间的距离；默认值：15
    },
    buttons:[{                                //JSON对象类型；底部分享按钮设置
        iconSize : 30,                        //（可选项）数字类型；按钮图标的边长；默认值：30
        textColor:'#000',                     //（可选项）字符串类型 按钮文本字体颜色，字符串类型；标题文本字体颜色，支持#、rgb、rgba；默认：#000   
        textSize : 12,                        //（可选项）数字类型；按钮文本字体的大小；默认值：12
        marginT  : 15,                        //（可选项）数字类型；按钮与分割线间的距离；默认值：15  
        space    : 10                         //（可选项）数字类型；按钮之间的间隙；默认值：10
    }]
}

tapClose：

• 类型：布尔类型
• 描述：（可选项）是否点击遮罩层关闭该对话框
• 默认值：false

animation:

• 类型：布尔类型
• 描述：是否再打开或关闭对话框时使用动画
• 默认值：false

callback(ret)

ret:

• 类型：JSON对象
• 内部字段：

{
    index: 0               // 数字类型；点击按钮的索引（由左至右排列）
}

示例代码

var dialogBox = api.require('dialogBox');
dialogBox.tips({
    rect: {
        w: 200
    },
    texts: {
        title: '这里是标题文本',
        content: '这里是内容'
    },
    buttons: [{
        normal: 'widget://image/weixin.png',
        highlight: 'widget://image/weixin.png',
        text: '微信'
    }, {
        normal: 'widget://image/circularMenu3.png',
        highlight: 'widget://image/circularMenu3light.png',
        text: '奖杯'
    }, {
        normal: 'widget://image/circularMenu4.png',
        highlight: 'widget://image/circularMenu4light.png',
        text: '人民币'
    }],
    styles: {
        bg: '#FFF',
        topImage: {
            path: 'widget://image/top_image.png',
            w: 200,
            h: 80
        },
        title: {
            color: '#000',
            size: 14,
            marginT: 15
        },
        content: {
            color: '#000',
            size: 12,
            marginT: 15
        },
        border: {
            color: '#eee',
            width: 2,
            marginT: 10
        },
        buttons: [{
            iconSize: 30,
            textColor: '#000',
            textSize: 12,
            marginT: 15
        }, {
            iconSize: 30,
            textColor: '#000',
            textSize: 12,
            marginT: 15
        }, {
            iconSize: 30,
            textColor: '#000',
            textSize: 12,
            marginT: 15
        }]
    }
}, function(ret) {
    alert(JSON.stringify(ret));
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

discount

弹出 discount 样式的对话框

discount({params}

params

rect:

• 类型：JSON 对象类型
• 描述：（可选项）对话框的宽高设置
• 内部字段：

{    
     w:200,              //（可选项）数字类型；弹出框的宽度；默认值：200
     h:300               //（可选项）数字类型；弹出框的高度；默认值：300
}

texts:

• 类型：JSON 对象类型
• 描述：（可选项）取消按钮的文本设置
• 内部字段：

{
     cancel: '取消'       //（可选项）字符串类型；取消按钮名称，若不传则不显示该文本
}

styles:

• 类型：JSON 对象类型
• 描述：对话框的样式设置
• 内部字段：

{
     bg:'#FFF',                                 //（可选项）字符串类型；对话框的背景色，支持#、rgb、rgba、img；默认：#FFF
     corner: 2,                                 //（可选项）数字类型；对话框背景圆角大小；默认：2
     maskBg:'rgba(0,0,0,0.5)',  //（可选项）字符串类型；遮罩层背景颜色，支持#、rgb、rgba；默认：rgba(0,0,0,0.5)
     image:{                                    // JSON 对象；显示图片的配置
         path:'widget://image/image.png',       // 字符串类型；图片路径，支持 widget:// fs://
         marginB:30                             //（可选项）数字类型；图片下边缘距离弹窗底部的距离；默认值：30
     },
     cancel:{                                   // JSON 对象；取消按钮配置，按钮位置在底部区域居中显示
         icon:'widget://image/cancel_btn.png',  //（可选项）字符串类型；按钮图标路径，支持 widget:// fs:// ；不传则不显示该图标
         marginB: 30,                           //（可选项）数字类型；取消按钮底端与屏幕底端的间距；默认：30
         w:50,                                  //（可选项）数字类型；按钮宽；默认值：50
         h:50,                                  //（可选项）数字类型；按钮高；默认值：50
         textSize: 12,                          //（可选项）数字类型；取消按钮文本字体大小；默认值：12
         textColor: '#000'                      //（可选项）字符串类型；取消按钮的字体颜色，支持#、rgb、rgba；默认：#000   
     }
}

tapClose：

• 类型：布尔类型
• 描述：（可选项）是否点击遮罩层关闭该对话框
• 默认值：false

animation:

• 类型：布尔类型
• 描述：是否再打开或关闭对话框时使用动画
• 默认值：false

callback(ret)

ret:

• 类型：JSON对象
• 描述：返回参数
• 内部字段：

{
    eventType : 'cancel'  // 字符串类型；回调事件类型，取值范围如下：
                          // cancel：用户点击取消按钮事件
                          // image：用户点击图片事件
                  // mask: 点击遮罩事件
}

示例代码

var dialogBox = api.require('dialogBox');
dialogBox.discount({
    rect: {
        w: 200,
        h: 300
    },
    styles: {
        bg: '#FFF',
        image: {
            path: 'widget://image/image.png',
            marginB: 30
        },
        cancel: {
            icon: 'widget://image/cancel_btn.png',
            w: 50,
            h: 50
        }
    }
}, function(ret) {
    alert(JSON.stringify(ret));
    if (ret.eventType == 'cancel') {
        dialogBox.close({
            dialogName: 'discount'
        });
    }
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

share

弹出 share 样式的对话框

share({params})

params

rect:

• 类型： JSON对象类型
• 描述：对话框的宽高设置
• 内部字段：

{
    w: 300,         //（可选项）数字类型；对话框的宽；默认值：300
    h: 300          //（可选项）数字类型；对话框的高；默认值：300
}

items:

• 类型：JSON数组类型
• 描述：对话框数据
• 内部字段：

[
    {
        text: '微信',                                 // 字符串类型；每一项的标题文字
        icon: 'widget://image/icon/weixin_icon.png'  // 字符串类型；每一项图片的路径 支持 fs:// widget://
    }
]

styles:

• 类型：JSON 对象类型
• 描述：对话框样式设置
• 内部字段：

{
     bg:'#FFF',              //（可选项）字符串类型；对话框的背景色，支持#、rgb、rgba、img；默认：#FFF
     maskBg:'rgba(0,0,0,0.5)',  //（可选项）字符串类型；遮罩层背景颜色，支持#、rgb、rgba；默认：rgba(0,0,0,0.5)
     corner: 2,              //（可选项）数字类型；对话框背景圆角大小；默认：2
     column: 3,              //（可选项）数字类型；支持的列数；默认值：3
     horizontalSpace : 15,   //（可选项）数字类型；每一项的横向间隙，默认值：15
     verticalSpace : 15,     //（可选项）数字类型；每一项的纵向间隙，默认值：15
     itemText:{              //（可选项）JSON 对象；网格每一项文本设置
         color: '#000',      //（可选项）字符串类型；每一项的文本字体颜色设置，支持#、rgb、rgba；默认：#000
         size: 12,           //（可选项）字符串类型；每一项的文本字体大小设置；默认值：12
         marginT: 8          //（可选项）数字类型；每一项的文本上边缘与图标的间距；默认值：8
     },
     itemIcon:{              //（可选项）JSON 对象；，每一项图片样式的设置
         size: 80            //（可选项）数字类型；按钮图片的大小；默认值：80
     }
}

tapClose：

• 类型：布尔类型
• 描述：（可选项）是否点击遮罩层关闭该对话框
• 默认值：false

animation:

• 类型：布尔类型
• 描述：是否再打开或关闭对话框时使用动画
• 默认值：false

callback(ret)

ret:

• 类型：JSON对象
• 内部字段:

{
    index: 0             // 数字类型；点击项的索引（由左至右，由上到下）
}

示例代码

var dialogBox = api.require('dialogBox');
dialogBox.share({
    rect: {
        w: 300,
        h: 300
    },
    items: [{
        text: '微信',
        icon: 'widget://image/icon/weixin_icon.png'
    }, {
        text: 'QQ',
        icon: 'widget://image/icon/qq_icon.png'
    }, {
        text: 'QQZone',
        icon: 'widget://image/icon/QQZone.png'
    }, {
        text: 'apiCloud',
        icon: 'widget://image/icon/apicloud.png'
    }, {
        text: '微博',
        icon: 'widget://image/icon/weibo_icon.png'
    }, {
        text: '短信',
        icon: 'widget://image/icon/shortmessage_icon.png'
    }],
    styles: {
        bg: '#FFF',
        column: 3,
        horizontalSpace: 15,
        verticalSpace: 30,
        itemText: {
            color: '#000',
            size: 15,
            marginT: 10
        },
        itemIcon: {
            size: 80
        }
    }
}, function(ret) {
    alert(JSON.stringify(ret));
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

actionMenu

弹出 actionMenu 样式的对话框

actionMenu({params})

params

rect:

• 类型：JSON 对象
• 描述：对话框的宽高设置
• 内部字段：

{
    h: 150         //（可选项）数字类型；对话框的高；默认值：150
}

texts:

• 类型：JSON 对象
• 描述：（可选项）取消按钮的文本设置
• 内部字段：

{
     cancel: '取消'  //（可选项）字符串类型；取消按钮名称，若不传则不显示该文本
}

items:

• 类型：JSON数组类型
• 描述：对话框内子按钮配置，多出屏幕的按钮可左右拖动查看，按钮和标题所占区域在弹框区域上下居中显示
• 内部字段：

[
    {
        text: '微信',                                 // 字符串类型；每一项的标题文字
        icon: 'widget://image/icon/weixin_icon.png'  // 字符串类型；每一项图片的路径 支持 fs:// widget://
    }
]

styles:

• 类型：JSON 对象类型
• 描述：对话框样式设置
• 内部字段：

{
     bg:'#FFF',                 //（可选项）字符串类型；对话框的背景色，支持#、rgb、rgba、img；默认：#FFF
     maskBg:'rgba(0,0,0,0.5)',  //（可选项）字符串类型；遮罩层背景颜色，支持#、rgb、rgba；默认：rgba(0,0,0,0.5)
     column: 3,                 //（可选项）数字类型；每屏显示的按钮个数；默认值：3
     itemText:{                 //（可选项）JSON 对象；网格每一项文本设置
         color: '#000',         //（可选项）字符串类型；每一项的文本字体颜色设置，支持#、rgb、rgba；默认：#000
         size: 12,              //（可选项）字符串类型；每一项的文本字体大小设置；默认值：12
         marginT: 8             //（可选项）数字类型；每一项的文本上边缘与图标的间距；默认值：8
     },
     itemIcon:{                 //（可选项）JSON 对象；每一项图片样式的配置
         size: 30               //（可选项）数字类型；按钮图片的大小；默认值：30
     },
     cancel:{                   //（可选项）JSON 对象；底部按钮样式的配置
         bg: 'fs://icon.png',   //（可选项）字符串类型：底部按钮的背景配置，支持rgb、rgba、#、img
         h:44 ,                 //（可选项）数字类型；底部按钮高和宽；默认：44
         color:'#000',          //（可选项）字符串类型；底部按钮标题字体颜色，支持rgb、rgba、#；默认：'#000'
         size:  14              //（可选项）数字类型；按钮标题的字体大小；默认：14
     }
}

isCuttingLine：

• 类型：布尔类型
• 描述： (可选项)是否显示分割线
• 默认值：false

tapClose：

• 类型：布尔类型
• 描述：（可选项）是否点击遮罩层关闭该对话框
• 默认值：false

animation:

• 类型：布尔类型
• 描述：是否再打开或关闭对话框时使用动画
• 默认值：false

callback(ret)

ret:

• 类型：JSON对象
• 内部字段:

{
    eventType: 'cancel',    // 字符串类型；交互事件类型，取值范围如下：
                            // cancel：点击取消按钮事件
                            // click：点击子按钮事件
    index: 0                // 数字类型；所点击的子按钮的索引（由左至右），仅当 eventType 为 click 时有值
}

示例代码

var dialogBox = api.require('dialogBox');
dialogBox.actionMenu ({
    rect:{
        h: 150
    },
    texts:{
         cancel: '取消'
    },
    items:[
    {
        text: '微信',
        icon: 'widget://image/icon/weixin_icon.png'
    },
    {
        text: 'QQ',
        icon: 'widget://image/icon/qq_icon.png'
    },
    {
        text: '微博',
        icon: 'widget://image/icon/weibo_icon.png'
    },
    {
        text: '短信',
        icon: 'widget://image/icon/shortmessage_icon.png'
    }
    ],
    styles:{
        bg:'#FFF',
        column: 3,
        itemText: {
            color: '#000',
            size: 12,
            marginT:8
        },
        itemIcon:{
            size:80
        },
        cancel:{  
            bg: 'fs://icon.png',   
            color:'#000',          
            h: 44 ,                 
            size: 14       
        }
    }
}, function(ret){
    alert(JSON.stringify(ret));
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

input

打开一个带输入框的弹出框

注意此接口只适用于iOS8.3以上系统，iOS8.1.3会导致崩溃，这是iOS系统更新时遗留的bug，无法修改

input({params},callback(ret))

params

keyboardType:

• 类型：字符串
• 描述：（可选项）输入框获取焦点时，弹出的键盘类型；
• 默认值：’default’
• 取值范围：
  • default（默认键盘）
  • number（数字键盘）
  • search（搜索键盘）
  • secure（输入框为密码输入框）
  • forbid（禁用输入中文）

texts：

• 类型：JSON 对象
• 描述：（可选项）input 对话框模块可配置的文本
• 内部字段：

{
    title: '昵称',               //（可选项）字符串类型；标题栏显示文本内容，若不传则不显示该文本
    placeholder: '在这里输入文字', //（可选项）字符串类型；输入框提示文字，若不传则不显示该提示文本
    default:'',                 //（可选项）字符串类型；输入框默认值，若不传则不显示；默认：空
    leftBtnTitle: '取消',        //（可选项）字符串类型；左边按钮标题，若不传则不显示该文本
    rightBtnTitle: '发送'        //（可选项）字符串类型；右边按钮标题，若不传则不显示该文本
}

styles:

• 类型：JSON 对象
• 描述：input 对话框样式配置
• 内部字段：

{
    bg: '#fff',                 //（可选项）字符串类型；对话框整体背景配置，支持#、rgb、rgba、img；默认：#fff
    maskBg:'rgba(0,0,0,0.5)',  //（可选项）字符串类型；遮罩层背景颜色，支持#、rgb、rgba；默认：rgba(0,0,0,0.5)
    corner: 2,                  //（可选项）数字类型；对话框背景圆角大小；默认：2
    w: 300,                     //（可选项）数字类型；对话框的宽；默认：300
    h: 240,                     //（可选项）数字类型；对话框的高；默认：240
    title:{                     //（可选项）JSON 对象；弹窗的 title 样式配置，不传则不显示标题区域
        h: 60,                  //（可选项）数字类型；标题栏区域高度；默认：60
        marginT: 20,            //（可选项）数字类型；标题栏与对话框顶端间距；默认：20
        alignment: 'center',    //（可选项）字符串类型；标题文字显示位置；取值范围：center、left、right
        size: 14,               //（可选项）数字类型；标题字体大小；默认：14
        color: '#000'           //（可选项）字符串类型；标题字体颜色，支持#、rgb、rgba；默认：#000
    },
    input:{                     //（可选项）JSON 对象；输入框输入文本框样式配置
        h: 60,                  //（可选项）数字类型；输入框区域高度；默认：20
        alignment: 'center',    //（可选项）字符串类型；输入框文字显示位置；取值范围：center、left、right ；默认：居中
        marginT: 6,             //（可选项）数字类型；输入框顶端与标题栏底端的距离，如果标题栏不存在，则是到窗口顶端的距离；默认：居中显示
        marginLeft: 10,             //（可选项）数字类型；输入框的左边距；默认：10
        marginRight: 10,             //（可选项）数字类型；输入框的右边距；默认：10
        textSize: 14,           //（可选项）数字类型；输入文本框文本字体大小；默认：14
       verticalCenter:true,         //（可选项）布尔类型；是否上下居中；默认：false；该参数暂仅支持 android
        textColor: '#000' ,      //（可选项）字符串类型；输入文本框文本字体颜色，支持#、rgb、rgba；默认：#000
        borderColor:'rgba(0,0,0,0)', //（可选项）字符串类型；输入文本框的边框颜色，支持#、rgb、rgba；默认：#000
        borderWidth:1 //（可选项）数字类型；输入文本框的边框宽度；默认：0
       corner:5,                  //（可选项）数字类型；对输入框圆角大小；默认：0
    },
    dividingLine: {             //（可选项）JSON对象；按钮与输入框之间的分割线的配置
       width: 0.5,              //（可选项）数字类型；分割线粗细；默认：0.5
       color: '#696969'         //（可选项）字符串类型；分割线颜色，支持rgb、rgba、#；默认：#696969
    },
    left:{                      //（可选项）JSON 对象；左边按钮样式配置，不传则不显示左边按钮
        bg: 'rgba(0,0,0,0)',    //（可选项）字符串类型；左边按钮的背景，支持rgb、rgba、#、img；默认：'rgba(0,0,0,0)'
        color: '#007FFF',       //（可选项）字符串类型；左边按钮标题字体颜色，支持rgb，rgba、#；默认：'#007FFF'
        size: 12                //（可选项）数字类型；左边按钮标题字体大小；默认：12
        h: 40                   //(可选项) 数字类型；左边按钮的高度；默认：40
       w:60,                   //(可选项) 数字类型；左边按钮的宽度；默认：提示框的宽度的一半
        marginB:10,            //(可选项) 数字类型；左边按离底部的边距；默认：0
        corner:5,              //(可选项) 数字类型；左边按钮的圆角；默认：0
        widhtBorder:1,         //(可选项) 数字类型；左边按钮的边宽；默认：0
        normalBorderColor:'#778899', //(可选项) 数字类型；左边按钮的边宽颜色；默认：'rgba(0,0,0,0)'
        activeBorderColor:'#0000CD', //(可选项) 数字类型；左边按钮的高亮状态下边宽颜色；默认：'rgba(0,0,0,0)'
        activeColor:'#006400', //(可选项) 数字类型；左边按钮的高亮状态下标题颜色；默认：'rgba(0,0,0,0)'
        activeBg:'#6B8E23'   //(可选项) 数字类型；左边按钮的高亮状态下背景颜色；默认：'rgba(0,0,0,0)'
    },
    right: {                    //（可选项）JSON 对象；右边按钮样式配置，不传则不显示右边按钮
        bg: 'rgba(0,0,0,0)',    //（可选项）字符串类型；右边按钮的背景，支持rgb、rgba、#、img；默认：'rgba(0,0,0,0)'
        color: '#007FFF',       //（可选项）字符串类型；右边按钮标题字体颜色，支持rgb、rgba、#；默认：'#007FFF'
        size: 12,             //（可选项）数字类型；右边按钮标题字体大小；默认：12
        h: 40,                //(可选项) 数字类型；右边按钮的高度；默认：40
           w:60,                   //(可选项) 数字类型；右边按钮的宽度；默认：提示框的宽度的一半
        marginB:10,            //(可选项) 数字类型；右边按离底部的边距；默认：0
        corner:5,              //(可选项) 数字类型；右边按钮的圆角；默认：0
        widhtBorder:1,         //(可选项) 数字类型；右边按钮的边宽；默认：0
        normalBorderColor:'#778899', //(可选项) 数字类型；右边按钮的边宽颜色；默认：'rgba(0,0,0,0)'
        activeBorderColor:'#0000CD', //(可选项) 数字类型；右边按钮的高亮状态下边宽颜色；默认：'rgba(0,0,0,0)'
        activeColor:'#006400', //(可选项) 数字类型；右边按钮的高亮状态下标题颜色；默认：'rgba(0,0,0,0)'
        activeBg:'#6B8E23'   //(可选项) 数字类型；右边按钮的高亮状态下背景颜色；默认：'rgba(0,0,0,0)'
    },
    horizontalLine:{
    color:'rgba(245,245,245,0)', //（可选项）字符串类型；左右按钮上边横线的颜色，支持rgb、rgba、#；默认：'rgba(245,245,245,0)'
    height:1                //（可选项）数字类型；左右边按钮横线的高度；默认：0   
    },
    verticalLine:{
        color:'rgba(245,245,245,0)', //（可选项）字符串类型；左右按钮中间竖线的颜色，支持rgb、rgba、#；默认：'rgba(245,245,245,0)'
      width:1                 //（可选项）数字类型；左右边按钮竖线的高度；默认：0  
    },
}