UIAlert

来自于:官方立即使用

概述

UIAlert 模块封装了一些目前在 android & ios平台比较流行的对话框

invite对话框效果图

模块接口

invite

邀请对话框

invite({params}, callback(ret))

params

{
    data:{                                                 // JSON对象;数据
        avator:'widget://image/avator.png',            // 字符串;头像路径(支持 fs | widget,http | https)
        name: 'Jack Ma',                               // 字符串;名称
        title:'高级上尉',                               // 字符串;职称
        description:'向你发起挑战',                      // 字符串;描述
        duration:5000,                                 // 数字;定时器时长;单位:ms
        tips:'倒计时结束...',                            // 字符串;底部提示语
        leftBtnTitle:'拒绝',                            // 字符串;左边按钮标题
        rightBtnTitle:'接受'                            // 字符串;右边按钮标题
    },
    styles:{                                               // JSON对象;样式配置
        w:300,                                         // 数字;对话框的宽度
        h:370,                                         // 数字;对话框的高度
        bgColor:'#FFF',                                // 字符串;对话框背景
        viewBorderColor:'#00BFFF',                      // 字符串;对话框边框颜色
       avatorBorderColor:'#00BFFF',                    // 字符串;头像边框颜色
       viewBorderW:5,                                // 数字;对话框边框宽度
       avatorBorderW:5,                              // 数字;头像边框宽度
        avator:{                                       // JSON对象;头像配置
            size: 40,                              // 数字;头像的大小
            marginTop:10,                          // 数字;头像距离对话框顶部的距离
        },
        name:{                                         // JSON对象;名字配置
            size:12,                               // 数字;头像大小
            color:'#00F',                          // 字符串;颜色
            marginTop:10                           // 数字;距离顶部头像的距离
        },
        title:{                                        // JSON对象;职称配置
            size:14,                               // 数字;职称字体大小
            color:'#000',                          // 字符串;职称字体的颜色
            marginTop:10,                          // 数字;距离顶部name的距离
        },
        description:{                                  // JSON对象;
            size:18,                               // 数字;字体大小
            color:'#000',                          // 字符串;颜色
            marginTop:10,                          // 数字;距离顶部title的距离
        },
        timer:{                                        // JSON对象
            size:50,                               // 数字;timer 组件的大小
            progressNormalColor: '#FF0',           // 字符串;定时器当前进度的颜色
            progressHightlightColor: '#FF0',       // 字符串;定时器剩余进度的颜色
            marginTop:10,                          // 数字;距离顶部 description 的距离
        },
        tips:{                                         // JSON对象;提示语配置
            size:12,                               // 数字;字体大小
            color:'#00F',                          // 字符串;颜色
            marginTop:10                           // 数字;距离顶部timer的距离
        },
        leftBtn:{                                      // JSON对象;左侧按钮配置
            w: 80,                       // 数字;按钮的宽度
            h: 30,                                 // 数字;按钮的高度
            color:'#FFF',                          // 字符串;字体颜色
            size: 12,                              // 数字;字体大小
            corner:8,                              // 数字;圆角大小
            bgColor:'#F00'                         // 字符串;按钮背景色
        },
        rightBtn:{                                     // JSON对象;右侧按钮配置
            w: 80,                                 // 数字;按钮的宽度
            h: 30,                                 // 数字;按钮的高度
            color:'#FFF',                          // 字符串;字体颜色
            size: 12,                              // 数字;字体大小
            corner:8,                              // 数字;圆角大小
            bgColor:'#00F',                        // 字符串;按钮背景颜色
            marginLeft:20                          // 数字;按钮左边距(距离左侧按钮)
        }
    }
}

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
    eventType: show,               //字符串类型;对话框显示;取值范围:show(表示对话框显示) | ok(按钮确定事件) | cancel(取消事件) | timeout(超时事件) | mask(点击遮罩事件)
}

示例代码

var UIAlert = api.require('UIAlert');
UIAlert.invite({
    data:{
        avator:'widget://image/avator.png',
        name: 'Jack Ma',
        title:'高级上尉',
        description:'向你发起挑战',
        duration:5000,
        tips:'倒计时结束...',
        leftBtnTitle:'拒绝',
        rightBtnTitle:'接受'
    },
    styles:{
        w:300,
        h:370,
        bgColor:'#FFF',
        avator:{
            size: 40,
            marginTop:10,
        },
        name:{
            size:12,
            color:'#00F',
            marginTop:10
        },
        title:{
            size:14,
            color:'#000',
            marginTop:10,
        },
        description:{
            size:18,
            color:'#000',
            marginTop:10,
        },
        timer:{
            size:50,
            progressNormalColor: '#FF0',
            progressHightlightColor: '#FF0',
            marginTop:10,
        },
        tips:{
            size:12,
            color:'#00F',
            marginTop:10
        },
        leftBtn:{
            w: 80,
            h: 30,
            color:'#FFF',
            size: 12,
            corner:8,
            bgColor:'#F00'
        },
        rightBtn:{
            w: 80,
            h: 30,
            color:'#FFF',
            size: 12,
            corner:8,
            bgColor:'#00F',
            marginLeft:20
        }
    }
}, function(ret){
    alert(JSON.stringify(ret));
});

可用性

iOS系统,android系统

可提供的1.0.0及更高版本

close

关闭对话框

close({params}, callback(ret))

示例代码

var UIAlert = api.require('UIAlert');
UIAlert.close();

可用性

iOS系统,android系统

可提供的1.0.0及更高版本