dialogBox

论坛示例

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

概述

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

alert 样式如下图所示:

alert alert

sendMessage 样式如下图所示:

sendMessage

scene 样式如下图所示:

scene scene

evaluation 样式如下图所示:

evaluation

raffle 样式如下图所示:

raffle raffle raffle

taskPlan 样式如下图所示:

taskPlan

receipt 样式如下图所示:

receipt

tips 样式如下图所示:

tips

discount 样式如下图所示:

discount

share 样式如下图所示:

share

actionMenu 样式如下图所示:

actionMenu

input 样式如下图所示:

amount 样式如下图所示:

list 样式如下图所示:

list

webView 样式如下图所示:

popupAlert 样式如下图所示:

confirm 样式如下图所示:

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

实例widget下载地址

插件接口

alert

弹出 alert 样式的对话框

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

params

texts:

  • 类型:JSON 对象
  • 描述:(可选项)alert 对话框插件可配置的文本
  • 内部字段:
{
    title: '确认',          //(可选项)字符串类型;标题内容,若不传则不显示该文本
    content:'这里是文本内容', //(可选项)字符串类型:对话框文本内容,文本所占区域的高度随字文本多少自适应,若不传则不显示该文本
    leftBtnTitle: '取消',   //(可选项)字符串类型;左边按钮标题,若不传则不显示该文本
    rightBtnTitle: '确认'   //(可选项)字符串类型;右边按钮标题,若不传则不显示该文本
}

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)', //(可选项)字符串类型,不传使用系统默认颜色 该参数仅支持ios平台
    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) {
        api.alert({
            msg: JSON.stringify(ret)
        });
    } else {
        api.alert({
            msg: 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) {
        api.alert({
            msg: JSON.stringify(ret)
        });
    } else {
        api.alert({
            msg: JSON.stringify(err)
        });
    }
});

可用性

iOS系统,Android系统

可提供的 1.0.0 及更高版本

raffle

弹出 raffle 样式的对话框

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

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) 仅支持ios平台
    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) {
        api.alert({
            msg: JSON.stringify(ret)
        });
    } else {
        api.alert({
            msg: 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,
            color: '#636363',
            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) {
    api.alert({
            msg: 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 对象类型
  • 描述:(可选项)对话框样式设置
  • 内部字段:
{
     bg:'#FFF',                 //(可选项)字符串类型;对话框的背景色,支持#、rgb、rgba、img;默认:#FFF
     maskBg:'rgba(0,0,0,0.5)',  //(可选项)字符串类型;遮罩层背景颜色,支持#、rgb、rgba;默认:rgba(0,0,0,0.5)
     corner: 2,                 //(可选项)数字类型;对话框背景圆角大小;默认:2
     title:{                    //(可选项)JSON对象类型;对话框标题设置,若不传则不显示标题区域
         textColor:'#000',      //(可选项)字符串类型;标题的字体颜色;支持#、rgb、rgba;默认值:#000
         textSize:18,           //(可选项)数字类型;标题的字体大小;默认值:18
         marginT:18             //(可选项)数字类型;标题的距离对话框顶部的距离;默认值:18
     },
     topBorder:{                //(可选项)JSON对象类型;上分割线的设置
         borderColor:'#000',    //(可选项)字符串类型;边界线颜色,支持#、rgb、rgba;默认:#000
         borderWidth: 2,        //(可选项)数字类型;边界线的粗细,默认值:2
         marginT: 10            //(可选项)数字类型;边界线的距离标题的下边距的距离,默认值:10
     },
     listHeight: 200,           //(可选项)数字类型;列表的高度;默认值:200
     item:{                     //(可选项)JSON对象类型;列表项的设置
         textColor: '#000',     //(可选项)字符串类型;列表的字体颜色,支持#、rgb、rgba;默认值:#000
         textSize : 18,         //(可选项)数字类型;列表的字体大小;默认值:18
         marginL:10,            //(可选项)数字类型;列表key值距离列表左边的距离;默认值:10
         marginT:10,            //(可选项)数字类型;key,value值距离每项顶部的距离;默认值:10
         marginB:10,            //(可选项)数字类型;key,value值列表距离每项底部的距离;默认值:10
         marginR:10,            //(可选项)数字类型;value值距离列表右边的距离;默认值:10
         bgColor:'#FFF'         //(可选项)字符串类型;列表项的背景颜色,支持#、rgb、rgba;默认值:#FFF
     },
     bottomBorder:{             //(可选项)JSON对象类型;下分割线的设置
         borderColor:'#000',    //(可选项)字符串类型;边界线颜色,支持#、rgb、rgba;默认值:#000
         borderWidth: 2         //(可选项)数字类型;边界线的粗细;默认值:2
     },
     cancel:{                   //(可选项)取消按钮样式设置
        h: 35,                  //(可选项)数字类型;取消按钮高度;默认值:35
        textSize: 18,           //(可选项)数字类型;取消按钮字体大小;默认值:18
        textColor:'#000',       //(可选项)字符串类型;取消按钮字体颜色,支持#、rgb、rgba;默认值:#000
        marginT: 10 ,           //(可选项)数字类型;取消按钮距离弹框下分割线的距离;默认值:10
        normal: '#ffffff',      //(可选项)字符串类型;取消按钮的背景设置,支持rgb、rgba、#、img;默认:#ffffff
        highlight: '#696969'    //(可选项)字符串类型;取消按钮的背景高亮设置,支持rgb、rgba、#、img;默认:#696969
     }
}

tapClose:

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

animation:

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

callback(ret, err)

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) {
        api.alert({
            msg: JSON.stringify(ret)
        });
    } else {
        api.alert({
            msg: 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) {
    api.alert({
            msg: 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) {
    api.alert({
            msg: 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) {
    api.alert({
            msg: 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){
    api.alert({
            msg: 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
        marginL:0,              // (可选项) 数字类型;左边按钮距离对话框左边的边距;默认:0 (仅支持Android)
    corner:5,               // (可选项) 数字类型;左边按钮的圆角;默认:0 (仅支持iOS)
    widhtBorder:1,          // (可选项) 数字类型;左边按钮的边宽;默认:0 (仅支持iOS)
    normalBorderColor:'#778899', // (可选项) 数字类型;左边按钮的边宽颜色;默认:'rgba(0,0,0,0)' (仅支持iOS)
    activeBorderColor:'#0000CD', // (可选项) 数字类型;左边按钮的高亮状态下边宽颜色;默认:'rgba(0,0,0,0)' (仅支持iOS)
    activeColor:'#006400', // (可选项) 数字类型;左边按钮的高亮状态下标题颜色;默认:'rgba(0,0,0,0)' (仅支持iOS)
    activeBg:'#6B8E23'   // (可选项) 数字类型;左边按钮的高亮状态下背景颜色;默认:'rgba(0,0,0,0)' (仅支持iOS)

    },
    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
        marginR:0,              // (可选项) 数字类型;右边按钮距离对话框右边边距;默认:0 (仅支持Android)
    corner:5,               // (可选项) 数字类型;右边按钮的圆角;默认:0 (仅支持iOS)
    widhtBorder:1,          // (可选项) 数字类型;右边按钮的边宽;默认:0 (仅支持iOS)
    normalBorderColor:'#778899', // (可选项) 数字类型;右边按钮的边宽颜色;默认:'rgba(0,0,0,0)' (仅支持iOS)
    activeBorderColor:'#0000CD', // (可选项) 数字类型;右边按钮的高亮状态下边宽颜色;默认:'rgba(0,0,0,0)' (仅支持iOS)
    activeColor:'#006400', // (可选项) 数字类型;右边按钮的高亮状态下标题颜色;默认:'rgba(0,0,0,0)' (仅支持iOS)
    activeBg:'#6B8E23'   // (可选项) 数字类型;右边按钮的高亮状态下背景颜色;默认:'rgba(0,0,0,0)' (仅支持iOS)
    },

    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(表示用户点击了右边按钮)
    text: ''                  //字符串类型;输入文本框当前的值
}

示例代码

var dialogBox = api.require('dialogBox');
dialogBox.input({
    keyboardType: 'default',
    texts: {
        title: '你的昵称',
        placeholder: '输入金额',
        leftBtnTitle: '取消',
        rightBtnTitle: '确定'
    },
    styles: {
        bg: '#fff',
        corner: 2,
        w: 300,
        h: 240,
        title: {
            h: 60,
            alignment: 'center',
            size: 14,
            color: '#000',
            marginT:30,
        },
        input: {
            h: 60,
            y:30,
            marginT:15,
            marginLeft: 10,
            marginRight:10,
            textSize: 14,
            textColor: '#000',
            corner:5,                  //(可选项)数字类型;对输入框圆角大小;默认:0

        },
        dividingLine: {
            width: 0.5,
            color: '#696969'
        },
        left: {
            bg: 'rgba(0,0,0,0)',
            color: '#007FFF',
            size: 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: {
            bg: 'rgba(0,0,0,0)',
            color: '#007FFF',
            size: 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)'
        }
    }
}, function(ret) {
    api.alert({
        msg: JSON.stringify(ret)
    });
    if (ret.eventType == 'left') {
        var dialogBox = api.require('dialogBox');
        dialogBox.close({
            dialogName: 'input'
        });
    }
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

amount

弹出 amount 样式的对话框

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

params

texts:

  • 类型:JSON 对象
  • 描述:(可选项)amount 对话框插件可配置的文本
  • 内部字段:
{
    title: '修改购买数量',        //(可选项)字符串类型;标题栏显示文本内容,若不传则不显示该文本
    default: '1',               //(可选项)字符串类型;对话框文本默认值,若不传则不显示默认值
    leftBtnTitle: '取消',        //(可选项)字符串类型;左边按钮标题,若不传则不显示该文本
    rightBtnTitle: '确定'        //(可选项)字符串类型;右边按钮标题,若不传则不显示该文本
}

styles:

  • 类型:JSON 对象
  • 描述:sendMessage 对话框样式配置
  • 内部字段:
{
    bg: '#fff',                 //(可选项)字符串类型;对话框整体背景配置,支持#、rgb、rgba、img;默认:#fff
    maskBg:'rgba(0,0,0,0.5)',  //(可选项)字符串类型;遮罩层背景颜色,支持#、rgb、rgba;默认:rgba(0,0,0,0.5)
    corner: 0,                  //(可选项)数字类型;对话框背景圆角大小;默认:0
    w: 300,                     //(可选项)数字类型;对话框的宽;默认:300
    h: 260,                     //(可选项)数字类型;对话框的高;默认:260
    title:{                     //(可选项)JSON 对象;弹窗的 title 样式配置,不传则不显示标题区域
        marginT: 20,            //(可选项)数字类型;显示文本相对于弹框顶端的距离;默认:20
        size: 14,               //(可选项)数字类型;标题字体大小;默认:14
        color: '#000'           //(可选项)字符串类型;标题字体颜色,支持#、rgb、rgba;默认:#000
    },
    input:{                    //(可选项)JSON 对象;标题栏输入文本框样式配置
        w: 150,                //(可选项)数字类型;输入框区域的宽度;默认:150
        h: 44,                 //(可选项)数字类型;输入框区域的高度;默认:44
        marginT: 15,            //(可选项)数字类型;输入文本框与标题文本的距离,若标题文本不存在,则是与弹框顶部的距离;默认:15
        size: 14,               //(可选项)数字类型;输入文本框文本字体大小;默认:14
        color: '#000'           //(可选项)字符串类型;输入文本框文本字体颜色,支持#、rgb、rgba;默认:#000
    },
    dividingLine: {             //(可选项)JSON对象;按钮与输入框之间的分割线的配置
        marginT: 10,            //(可选项)数字类型;输入文本框与分割线的距离;默认:10
       width: 0.5,              //(可选项)数字类型;分割线粗细;默认:0.5
       color: '#696969'         //(可选项)字符串类型;分割线颜色,支持rgb、rgba、#;默认:#696969
    },
    left:{                      //(可选项)JSON 对象;左边按钮样式配置,不传则不显示左边按钮
        marginL: 10,            //(可选项)数字类型;左边按钮的左边距;默认:10
        w: 135,                 //(可选项)数字类型;左边按钮的宽;默认:135
        h: 55,                  //(可选项)数字类型;左边按钮的高;默认:55
        bg: '#e0e',             //(可选项)字符串类型;左边按钮的背景,支持rgb、rgba、#、img;默认:'#e0e'
        color: '#007FFF',       //(可选项)字符串类型;左边按钮标题字体颜色,支持rgb,rgba、#;默认:'#007FFF'
        size: 12                //(可选项)数字类型;左边按钮标题字体大小;默认:12
    },
    right: {                    //(可选项)JSON 对象;右边按钮样式配置,不传则不显示右边按钮
        marginR: 10,            //(可选项)数字类型;右边按钮的右边距;默认:10
        w: 135,                 //(可选项)数字类型;右边按钮的宽;默认:135
        h: 55,                  //(可选项)数字类型;右边按钮的高;默认:55
        bg: '#e0e',             //(可选项)字符串类型;右边按钮的背景,支持rgb、rgba、#、img;默认:'#e0e'
        color: '#007FFF',       //(可选项)字符串类型;右边按钮标题字体颜色,支持rgb、rgba、#;默认:'#007FFF'
        size: 12                //(可选项)数字类型;右边按钮标题字体大小;默认:12
    }
}

tapClose:

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

animation:

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

decimal:

  • 类型:布尔类型
  • 描述:(可选项)是否支持小数输入,若为true,则弹出可输入小数的键盘,用户点击'+'或'-'当前数字增减步幅为当前数字的最小单位,如当前值为1.1,则点击'+'或'-'会增加减少0.1,当前值为1.11,则随之增减0.01
  • 默认:false

callback(ret, err)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
    eventType: 'left',        //字符串类型;交互事件类型,取值范围如下:
                              // left(表示用户点击了左边按钮)
                              // right(表示用户点击了右边按钮)
    amount: ''                //字符串类型;输入文本框当前的值
}

示例代码

var dialogBox = api.require('dialogBox');
dialogBox.amount({
    texts: {
        title: '修改购买数量',
        default: '1',
        leftBtnTitle: '取消',
        rightBtnTitle: '确定'
    },
    styles: {
        bg: '#fff',
        corner: 0.5,
        w: 300,
        h: 260,
        title: {
            marginT: 20,
            size: 14,
            color: '#000'
        },
        input: {
            w: 150,
            h: 44,
            marginT: 15,
            size: 14,
            color: '#000'
        },
        dividingLine: {
            marginT: 10,
            width: 0.5,
            color: '#696969'
        },
        left: {
            marginL: 10,
            w: 135,
            h: 55,
            bg: '#e0e',
            color: '#007FFF',
            size: 12
        },
        right: {
            marginR: 10,
            w: 135,
            h: 55,
            bg: '#e0e',
            color: '#007FFF',
            size: 12
        }
    }
}, function(ret) {
    api.alert({
        msg: JSON.stringify(ret)
    });
    if (ret.eventType == 'left') {
        var dialogBox = api.require('dialogBox');
        dialogBox.close({
            dialogName: 'amount'
        });
    }
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

list

弹出 list 样式的对话框

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

params

texts:

  • 类型:JSON 对象
  • 描述:(可选项)amount 对话框插件可配置的文本
  • 内部字段:
{
    title: '修改购买数量',        //(可选项)字符串类型;标题栏显示文本内容,若不传则不显示该文本
    enter: '提交',              //(可选项)字符串类型;下边按钮标题,若不传则不显示该文本
}

listTitles:

  • 类型:数组
  • 描述:对话框内的列表每条 title 文本字符串组成的数组,超出该列表显示区域的可上下拖动查看

styles:

  • 类型:JSON 对象
  • 描述:list 对话框样式配置
  • 内部字段:
{
    bg: '#fff',                 //(可选项)字符串类型;对话框整体背景配置,支持#、rgb、rgba、img;默认:#fff
    maskBg:'rgba(0,0,0,0.5)',  //(可选项)字符串类型;遮罩层背景颜色,支持#、rgb、rgba;默认:rgba(0,0,0,0.5)
    corner: 0,                  //(可选项)数字类型;对话框背景圆角大小;默认:0
    w: 300,                     //(可选项)数字类型;对话框的宽;默认:300
    h: 260,                     //(可选项)数字类型;对话框的高;默认:260
    title:{                     //(可选项)JSON 对象;弹窗的 title 样式配置,不传则不显示标题区域
        h: 44,                  //(可选项)数字类型;标题栏高度;默认:44
        size: 14,               //(可选项)数字类型;标题字体大小;默认:14
        color: '#000'           //(可选项)字符串类型;标题字体颜色,支持#、rgb、rgba;默认:#000
    },
    list: {                     //(可选项)JSON 对象;列表样式配置
        h: 128,                 //(可选项)数字类型;列表区域的高度;默认:128
        row: 2,                 //(可选项)数字类型;列表显示的行数;默认:2
        title: {                //(可选项)JSON对象;列表标题样式配置
            marginL: 10,        //(可选项)数组类型;列表标题距离左边的距离;默认:10
            size: 14,           //(可选项)数字类型;列表标题文本字体大小;默认:14
            color: '#696969'    //(可选项)字符串类型;列表标题文本字体颜色,支持#、rgb、rgba;默认:#696969
        },
        content: {              //(可选项)JSON对象;列表内容文本的样式配置((可输入的文本))
            marginL: 10,        //(可选项)数组类型;列表内容文本与左边标题文本的距离;默认:10
            size: 14,           //(可选项)数字类型;列表内容文本字体大小;默认:14
            color: '#000'       //(可选项)字符串类型;列表内容文本字体颜色,支持#、rgb、rgba;默认:#000
        }
    },
    dividingLine: {             //(可选项)JSON对象;按钮与输入框之间的分割线的配置
       width: 0.5,              //(可选项)数字类型;分割线粗细;默认:0.5
       color: '#696969'         //(可选项)字符串类型;分割线颜色,支持rgb、rgba、#;默认:#696969
    },
    enter:{                     //(可选项)JSON 对象;弹框底部按钮样式配置
        w: 135,                 //(可选项)数字类型;底部按钮的宽;默认:135
        h: 55,                  //(可选项)数字类型;底部按钮的高;默认:55
        bg: '#e0e',             //(可选项)字符串类型;底部按钮的背景,支持rgb、rgba、#、img;默认:'#e0e'
        color: '#007FFF',       //(可选项)字符串类型;底部按钮标题字体颜色,支持rgb,rgba、#;默认:'#007FFF'
        size: 12                //(可选项)数字类型;底部按钮标题字体大小;默认:12
        corner:0                //(可选项)数字类型;底部按钮圆角度大小;默认:0
    }
}

tapClose:

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

animation:

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

callback(ret, err)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
    eventType: 'enter',        //字符串类型;交互事件类型,取值范围如下:
                              // enter(表示用户点击了底部按钮)
    amounts: []               //数组类型;用户输入列表内的文本内容组成的数组
}

示例代码

var dialogBox = api.require('dialogBox');
dialogBox.list({
    tapClose: true,
    texts: {
        title: '发货信息',
        enter: '提交'
    },
    listTitles: ['快递公司:', '订单编号:', '收货姓名:', '发货姓名:'],
    styles: {
        bg: '#fff',
        corner: 0,
        w: 300,
        h: 260,
        title: {
            h: 44,
            size: 14,
            color: '#000'
        },
        list: {
            h: 128,
            row: 2,
            title: {
                marginL: 10,
                size: 14,
                color: '#696969'
            },
            content: {
                marginL: 10,
                size: 14,
                color: '#000'
            }
        },
        dividingLine: {
            width: 0.5,
            color: '#696969'
        },
        enter: {
            w: 135,
            h: 55,
            bg: '#e0e',
            color: '#007FFF',
            size: 12
        }
    }
}, function(ret) {
    api.alert({
        msg: JSON.stringify(ret)
    });
    if (ret.eventType == 'enter') {
        var dialogBox = api.require('dialogBox');
        dialogBox.close({
            dialogName: 'list'
        });
    }
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

webView

打开一个可加载 web 页面的弹框

webView({params},callback(ret))

params

texts:

  • 类型:JSON 对象
  • 描述:(可选项)input 对话框插件可配置的文本
  • 内部字段:
{
    title: '接单提醒',           //(可选项)字符串类型;标题栏显示文本内容,若不传则不显示该文本
    leftBtnTitle: '去看看',      //(可选项)字符串类型;左边按钮标题,若不传则不显示该文本
    rightBtnTitle: '去接单'      //(可选项)字符串类型;右边按钮标题,若不传则不显示该文本
}

path:

  • 类型:字符串
  • 描述:要加载的页面地址 支持(http:// widget://)

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: 280,                     //(可选项)数字类型;对话框的高;默认:240
    title:{                     //(可选项)JSON 对象;弹窗的 title 样式配置,不传则不显示标题区域
        h: 44,                  //(可选项)数字类型;标题栏区域高度;默认:44
        size: 14,               //(可选项)数字类型;标题字体大小;默认:14
        color: '#000'           //(可选项)字符串类型;标题字体颜色,支持#、rgb、rgba;默认:#000
    },
    upDividingLine: {           //(可选项)JSON对象;上分割线样式配置
       width: 0.5,              //(可选项)数字类型;上分割线粗细;默认:0.5
       color: '#696969'         //(可选项)字符串类型;上分割线颜色,支持rgb、rgba、#;默认:#696969
    },
    webView:{                   //(可选项)JSON 对象;web 加载区域样式配置
        h: 192,                 //(可选项)数字类型;web 加载区域高度;默认:192
        bg: '#fff',             //(可选项)字符串类型;web 加载区域背景配置;默认:#fff
    },
    downDividingLine: {         //(可选项)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
    },
    right: {                    //(可选项)JSON 对象;右边按钮样式配置,不传则不显示右边按钮
        bg: 'rgba(0,0,0,0)',    //(可选项)字符串类型;右边按钮的背景,支持rgb、rgba、#、img;默认:'rgba(0,0,0,0)'
        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.webView({
    tapClose: false,
    path: 'http://www.apicloud.com',
    texts: {
        title: '接单提醒',
        leftBtnTitle: '看主页',
        rightBtnTitle: '继续接单'
    },
    styles: {
        bg: '#fff',
        corner: 2,
        w: 300,
        h: 280,
        title: {
            h: 44,
            size: 14,
            color: '#000'
        },
        upDividingLine: {
            width: 0.5,
            color: '#696969'
        },
        webView: {
            h: 192,
            bg: '#fff',
        },
        downDividingLine: {
            width: 0.5,
            color: '#696969'
        },
        left: {
            bg: 'rgba(0,0,0,0)',
            color: '#007FFF',
            size: 12
        },
        right: {
            bg: 'rgba(0,0,0,0)',
            color: '#007FFF',
            size: 12
        }
    }
}, function(ret) {
    api.alert({
        msg: JSON.stringify(ret)
    });
    if (ret.eventType == 'left') {
        var dialogBox = api.require('dialogBox');
        dialogBox.close({
            dialogName: 'webView'
        });
    }
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

popupAlert

打开一个警告对话框

popupAlert({params},callback(ret))

params

msg:

  • 类型:JSON 对象
  • 描述:(可选项)popupAlert 对话框插件可配置的文本
  • 内部字段:
{
    content:'这里是文本内容', //(可选项)字符串类型:对话框文本内容,文本所占区域的高度随字文本多少自适应,若不传则不显示该文本
    okBtnTitle: '确定',   //(可选项)字符串类型;按钮标题,若不传则不显示该文本
}

styles:

  • 类型:JSON 对象
  • 描述:popupAlert 对话框样式配置
  • 内部字段:
{
    bg: '#fff',                 //(可选项)字符串类型;对话框整体背景配置,支持#、rgb、rgba;默认:#fff
    maskBg:'rgba(0,0,0,0.5)',   //(可选项)字符串类型;遮罩层背景颜色,支持#、rgb、rgba;默认:rgba(0,0,0,0.5)
    h: 200,                     //(可选项)数字类型;对话框的高;默认:240
    msg :{		    // JSON对象;msg字体设置
        color : '#000000',      // 字符串类型;字体颜色,msg字体颜色;默认黑色
        size  : 20,             // 数字类型;字体大小
        align : 'left'          // 对齐方式;支持 left center right
        maginLR: 10             // 距左右的间距,默认是10
        maginT: 15              //距顶部的间距,默认是15
    },
    border : {                 //(可选项)对话框的边框设置(不传则没有边框)
       left : '10 #FF0000',   // 对话框的左边框(不传不显示),格式为: 'width color'; 边框的粗细width 边框的颜色color,中间空格分割
      right : '10 #FF0000', // 对话框的右边框(不传不显示)
       top : '10 #0000FF',   // 对话框的上边框(不传不显示)
       bottom : '10 #0000FF' // 对话框的下边框(不传不显示)
    }
    okBtn :{                    //(可选项)JSON 对象;确定按钮样式配置,不传则不显示左边按钮
        bg: 'rgba(0,0,0,0)',    //(可选项)字符串类型;确定按钮的背景,支持rgb、rgba、#、img;默认:'rgba(0,0,0,0)'
        highlightBg : '#00F',	//(可选项)字符串类型;左边按钮按下的背景,支持rgb、rgba、#、img;默认:'#00F'
        color: '#007FFF',       //(可选项)字符串类型;确定按钮标题字体颜色,支持rgb,rgba、#;默认:'#007FFF'
        size: 12                //(可选项)数字类型;确定按钮标题字体大小;默认:12
        maginLR: 10             // 距左右的间距,默认是10
        maginB: 10              //距底部的间距,默认是10
    }
}

tapClose:

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

callback(ret, err)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
    eventType: 'ok',        // 字符串类型;交互事件类型,取值范围如下:
                                // ok(表示用户点击了确定按钮)
}

示例代码

var dialogBox = api.require('dialogBox');
dialogBox.popupAlert({
    tapClose: false,
    msg: {
        content:'这里是文本内容',
        okBtnTitle: '确定'
    },
    styles: {
        bg: '#fff',                
        maskBg:'rgba(0,0,0,0.5)',
        h: 280,
        msg :{		    
            color : '#000000',
            size  : 20,
            maginLR: 10,
            maginT: 15       
        },                   
        border : {          
       		left : '10 #FF0000',  
                   right : '10 #FF0000',
       		top : '10 #0000FF',
      		bottom : '10 #0000FF'
        }
        okBtn :{                      
            bg: 'rgba(0,0,0,0)',    
            color: '#007FFF',      
            size: 12,
            maginLR: 10,
            maginB: 10
        }
    }
}, function(ret) {
    api.alert({
            msg: JSON.stringify(ret)
        });
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

confirm

打开一个确认对话框

confirm({params},callback(ret))

params

msg:

  • 类型:JSON 对象
  • 描述:(可选项)confirm 对话框插件可配置的文本
  • 内部字段:
{
    content:'这里是文本内容', //(可选项)字符串类型:对话框文本内容,文本所占区域的高度随字文本多少自适应,若不传则不显示该文本
    leftBtnTitle: '取消',   //(可选项)字符串类型;左边按钮标题,若不传则不显示该文本
    rightBtnTitle: '确认'   //(可选项)字符串类型;右边按钮标题,若不传则不显示该文本
}

styles:

  • 类型:JSON 对象
  • 描述:confirm 对话框样式配置
  • 内部字段:
{
    bg: '#fff',                 //(可选项)字符串类型;对话框整体背景配置,支持#、rgb、rgba;默认:#fff
    maskBg:'rgba(0,0,0,0.5)',   //(可选项)字符串类型;遮罩层背景颜色,支持#、rgb、rgba;默认:rgba(0,0,0,0.5)
    h: 200,                     //(可选项)数字类型;对话框的高;默认:240
    msg :{		    // JSON对象;msg字体设置
        color : '#000000',      // 字符串类型;字体颜色,msg字体颜色;默认黑色
        size  : 20,             // 数字类型;字体大小
        align : 'left'          // 对齐方式;支持 left center right
        maginLR: 10             // 距左右的间距,默认是10
        maginT: 15              //距顶部的间距,默认是15
    },      
    border : {           //(可选项)对话框的边框设置(不传则没有边框)
       left : '10 #FF0000',  // 对话框的左边框(不传不显示),格式为: 'width color'; 边框的粗细width 边框的颜色color,中间空格分割
           right : '10 #FF0000', // 对话框的右边框(不传不显示)
       top : '10 #0000FF',   // 对话框的上边框(不传不显示)
       bottom : '10 #0000FF' // 对话框的下边框(不传不显示)
    },
    leftBtn :{                      //(可选项)JSON 对象;左边按钮样式配置,不传则不显示左边按钮
        bg: 'rgba(0,0,0,0)',    //(可选项)字符串类型;左边按钮的背景,支持rgb、rgba、#、img;默认:'rgba(0,0,0,0)'
        highlightBg : '#00F',	//(可选项)字符串类型;左边按钮按下的背景,支持rgb、rgba、#、img;默认:'#00F'
        color: '#007FFF',       //(可选项)字符串类型;左边按钮标题字体颜色,支持rgb,rgba、#;默认:'#007FFF'
        size: 12                //(可选项)数字类型;左边按钮标题字体大小;默认:12
        maginL: 10              // 距左边的间距,默认是10
        maginB: 10              //距底部的间距,默认是10
    },
    rightBtn :{                //(可选项)JSON 对象;右边按钮样式配置,不传则不显示左边按钮
        bg: 'rgba(0,0,0,0)',    //(可选项)字符串类型;右边按钮的背景,支持rgb、rgba、#、img;默认:'rgba(0,0,0,0)'
        highlightBg : '#00F',	//(可选项)字符串类型;左边按钮按下的背景,支持rgb、rgba、#、img;默认:'#00F'
        color: '#007FFF',       //(可选项)字符串类型;右边按钮标题字体颜色,支持rgb,rgba、#;默认:'#007FFF'
        size: 12                //(可选项)数字类型;右边按钮标题字体大小;默认:12
        maginL: 20              // 距左边的间距,默认是20
        maginR: 10              // 距右边的间距,默认是10
        maginB: 10              //距底部的间距,默认是10
    }
}

tapClose:

  • 类型:布尔类型
  • 描述:是否可以取消(点击遮罩,android系统点击回退是否取消对话框)
  • 默认值:false

callback(ret, err)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
    eventType: 'cancel',        // 字符串类型;交互事件类型,取值范围如下:
                                    // cancel(表示用户点击了左边取消按钮)
                    // ok (表示用户点击了右边确定按钮)
}

示例代码

var dialogBox = api.require('dialogBox');
dialogBox.confirm({
    tapClose: false,
    msg: {
        content:'这里是文本内容',
        leftBtnTitle: '取消',
        rightBtnTitle:'确定'
    },
    styles: {
        bg: '#fff',                
        maskBg:'rgba(0,0,0,0.5)',
        h: 280,
        msg :{		    
            color : '#000000',
            size  : 20,
            maginLR: 10 ,
            maginT: 15       
        },                     
        border : {          
       		left : '10 #FF0000',  
                   right : '10 #FF0000',
       		top : '10 #0000FF',
      		bottom : '10 #0000FF'
        },
        leftBtn :{                     
            borderColor: 'rgba(0,0,0,0)',
            color: '#007FFF',
            size: 12
        },
        rightBtn :{                  
            bg: 'rgba(0,0,0,0)',
            selectedBg:'#F00',
            color: '#007FFF',
            size: 12
        }
    }
}, function(ret) {
    api.alert({
            msg: JSON.stringify(ret)
        });
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

close

关闭弹出的对话框

close ({params})

params

dialogName:

  • 类型:字符串类型
  • 描述:上面所列各种对话框的样式名(接口)

示例代码

var dialogBox = api.require('dialogBox');
dialogBox.close({
    dialogName: 'alert'
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

inputbox

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

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

inputbox({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
    corner: 2,                  //(可选项)数字类型;对话框背景圆角大小;默认:2
    w: 300,                     //(可选项)数字类型;对话框的宽;默认:300
    h: 240,                     //(可选项)数字类型;对话框的高;默认:240
    bottomBtnMarginB:10,        //(可选项)数字类型;对话框底部按钮距离对话框底部边距
    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
        textColor: '#000' ,      //(可选项)字符串类型;输入文本框文本字体颜色,支持#、rgb、rgba;默认:#000
        borderColor:'rgba(0,0,0,0)', //(可选项)字符串类型;输入文本框的边框颜色,支持#、rgb、rgba;默认:#000
                verticalCenter:true,         //(可选项)布尔类型;是否上下居中;默认:false;该参数暂仅支持 android
        textColor: '#000' ,      //(可选项)字符串类型;输入文本框文本字体颜色,支持#、rgb、rgba;默认:#000
        borderColor:'rgba(0,0,0,0)', //(可选项)字符串类型;输入文本框的边框颜色,支持#、rgb、rgba;默认:#000
        borderWidth:1 //(可选项)数字类型;输入文本框的边框宽度;默认: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: 40,                   //(可选项) 数字类型;左边按钮的宽度;默认:对话框宽度的二分之一
        corner:3                //(可选项) 数字类型;左边按钮的圆角度;默认:0
        leftMargin:10           //(可选项) 数字类型;左边按钮的左边距;默认: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 ,                 //(可选项) 数字类型;右边按钮的高度;默认:0
        w: 40 ,                 //(可选项) 数字类型;右边按钮的宽度;默认:对话框宽度的二分之一
        corner:3                //(可选项) 数字类型;右边按钮的圆角度;默认:0
        rightMargin:10          //(可选项) 数字类型;右边按钮的右边距;默认: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  
    },
}

tapClose:

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

callback(ret, err)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
    eventType: 'left',        //字符串类型;交互事件类型,取值范围如下:
                              // left(表示用户点击了左边按钮)
                              // right(表示用户点击了右边按钮)
    text: ''                  //字符串类型;输入文本框当前的值
}

示例代码

var dialogBox = api.require('dialogBox');
dialogBox.inputbox({
   tapClose:true,
    keyboardType: 'default',
    texts: {
        title: '你的昵称',
        placeholder: '输入金额',
        leftBtnTitle: '取消',
        rightBtnTitle: '确定'
    },
    styles: {
        bg: '#fff',
        corner: 2,
        w: 300,
        h: 240,
        title: {
            h: 60,
            alignment: 'center',
            size: 14,
            color: '#000',
            marginT:30,
        },
        input: {
            h: 60,
            y:30,
            marginT:15,
            marginLeft: 10,
            marginRight:10,
            textSize: 14,
            textColor: '#000'
        },
        dividingLine: {
            width: 0.5,
            color: '#696969'
        },
        left: {
            bg: 'rgba(0,0,0,0)',
            color: '#007FFF',
            size: 12
        },
        right: {
            bg: 'rgba(0,0,0,0)',
            color: '#007FFF',
            size: 12
        }
    }
}, function(ret) {
    api.alert({
        msg: JSON.stringify(ret)
    });
    if (ret.eventType == 'left') {
        var dialogBox = api.require('dialogBox');
        dialogBox.close({
            dialogName: 'inputbox'
        });
    }
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

multiLineMenu

弹出 multiLineMenu 样式的对话框,与actionMenu对话框功能一致,区别在于该对话框支持多行

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

是否仍需要帮助? 请保持联络!
最后更新于 2024/12/2