Uialert View

/ Title: UIAlertView Description: UIAlertView /

立即使用

概述

UIAlertView 封装了五种款式的弹框,每一种款式都提供一个接口来调用,开发者可按照各个接口的样式来自定义弹框上的文字、图片、图文等。

alert 样式如下图所示:

alert

disappeal 样式如下图所示:

disappeal

input 样式如下图所示:

input

advertisement 样式如下图所示:

advertisement

down 样式如下图所示:

down

注意:本模块 iOS 平台上最低适配系统版本为 iOS 9.0

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

模块接口

alert

弹出 alert 样式的对话框

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

params

texts:

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

styles:

  • 类型:JSON 对象
  • 描述:alert 对话框样式配置
  • 内部字段:
{
    title:{                //(可选项)JSON对象;弹窗标题栏样式配置
      titleSize: 14,     //(可选项)数字类型;标题字体大小;默认:14
      titleColor: '#000' //(可选项)字符串类型;标题字体颜色,支持#、rgb、rgba;默认:#000
    },
    content:{              //(可选项)JSON 对象;文本内容配置
      color: '#000',     //(可选项)字符串类型;内容文本字体颜色,支持 rgb、rgba、#;默认:#000
      size: 12           //(可选项)数字类型:内容文本字体大小;默认:12
    },
    left:{                 //(可选项)JSON 对象;左边按钮样式配置
      color: '#007FFF',  //(可选项)字符串类型;左边按钮标题字体颜色,支持rgb,rgba、#;默认:'#007FFF'
      size: 12           //(可选项)数字类型;左边按钮标题字体大小;默认:12
    },
    right: {               //(可选项)JSON 对象;右边按钮样式配置
      color: '#007FFF',  //(可选项)字符串类型;右边按钮标题字体颜色,支持rgb、rgba、#;默认:'#007FFF'
      size: 12           //(可选项)数字类型;右边按钮标题字体大小;默认:12
    },
    line:{
      color:'#F5F5F5', //(可选项)字符串类型;左右按钮上边横线的颜色,支持rgb、rgba、#;默认:'#F5F5F5'   
    }
}

callback(ret, err)

ret:

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

示例代码

var UIAlertView = api.require('UIAlertView');
UIAlertView.alert({
    texts: {
        title: '您好',
        content: '恭喜您中奖',
        leftBtnTitle: '取消',
        rightBtnTitle: '确认'
    },
    styles:{
        title:{
          titleSize: 14,
          titleColor: '#000'
        },
        content:{
          color: '#000',
          size: 12
        },
        left:{
          color: '#007FFF',
          size: 12
        },
        right: {
          color: '#007FFF',
          size: 12
        },
        line:{
          color:'#F5F5F5',
        }
    }
}, function(ret) {
    api.alert({
        msg: JSON.stringify(ret)
    });
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

disappeal

弹出 自动消失 样式的对话框

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

params

width:

  • 类型:数字类型
  • 描述:(可选项)宽度,image有值才会生效,否则弹窗宽度适应文字长度
  • 默认值:100

time:

  • 类型:数字类型
  • 描述:(可选项)自动消失时间
  • 默认值:1

content:

  • 类型:字符串类型
  • 描述:(可选项)文本内容

image:

  • 类型:字符串类型
  • 描述:(可选项)图片路径,支持fs、widget

示例代码

var UIAlertView = api.require('UIAlertView');
UIAlertView.disappeal({
    width:300,
    content:'成功',
    time:1.5,
    image:'widget://image/disappeal.png'
}, function(ret) {
    api.alert({
        msg: JSON.stringify(ret)
    });
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

input

弹出 input 样式的对话框

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

params

placeholder:

  • 类型:字符串类型
  • 描述:(可选项)输入框提示文本
  • 默认:'请输入内容'

max:

  • 类型:数字类型
  • 描述:(可选项)编辑框最大行数 大于行数则滚动
  • 默认值:1

texts:

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

styles:

  • 类型:JSON 对象
  • 描述:alert 对话框样式配置
  • 内部字段:
{
    title:{                //(可选项)JSON对象;弹窗标题栏样式配置
      titleSize: 14,     //(可选项)数字类型;标题字体大小;默认:14
      titleColor: '#000' //(可选项)字符串类型;标题字体颜色,支持#、rgb、rgba;默认:#000
    },
    content:{              //(可选项)JSON 对象;文本内容配置
      color: '#000',     //(可选项)字符串类型;内容文本字体颜色,支持 rgb、rgba、#;默认:#000
      size: 12           //(可选项)数字类型:内容文本字体大小;默认:12
    },
    left:{                 //(可选项)JSON 对象;左边按钮样式配置
      color: '#007FFF',  //(可选项)字符串类型;左边按钮标题字体颜色,支持rgb,rgba、#;默认:'#007FFF'
      size: 12           //(可选项)数字类型;左边按钮标题字体大小;默认:12
    },
    right: {               //(可选项)JSON 对象;右边按钮样式配置
      color: '#007FFF',  //(可选项)字符串类型;右边按钮标题字体颜色,支持rgb、rgba、#;默认:'#007FFF'
      size: 12           //(可选项)数字类型;右边按钮标题字体大小;默认:12
    },
    line:{
      color:'#F5F5F5', //(可选项)字符串类型;左右按钮上边横线的颜色,支持rgb、rgba、#;默认:'#F5F5F5'   
    }
}

callback(ret, err)

ret:

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

示例代码

var UIAlertView = api.require('UIAlertView');
UIAlertView.input({
    texts: {
        title: '您好',
        content: '恭喜您中奖',
        leftBtnTitle: '取消',
        rightBtnTitle: '确认'
    },
    styles:{
        title:{
          titleSize: 14,
          titleColor: '#000'
        },
        content:{
          color: '#000',
          size: 12
        },
        left:{
          color: '#007FFF',
          size: 12
        },
        right: {
          color: '#007FFF',
          size: 12
        },
        line:{
          color:'#F5F5F5',
        }
    }
}, function(ret) {
    api.alert({
        msg: JSON.stringify(ret)
    });
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

advertisement

弹出 广告 样式的对话框

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

params

size:

  • 类型:JSON 对象
  • 描述:(可选项)显示图片的大小
  • 内部字段:
{
    w:300,  //(可选项)数字类型;图片宽;默认:300
    h:300    //(可选项)数字类型;图片高;默认:300
}

image:

  • 类型:字符串类型
  • 描述:(可选项)图片路径,支持fs、widget

callback(ret, err)

ret:

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

示例代码

var UIAlertView = api.require('UIAlertView');
UIAlertView.advertisement({
    size:{
        w:300,
        h:300
    },
    image:'widget://image/advertisement.jpg'
}, function(ret) {
    api.alert({
        msg: JSON.stringify(ret)
    });
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

down

弹出 下载 样式的对话框

down({params})

params

image:

  • 类型:字符串类型
  • 描述:(可选项)图片路径,支持fs、widget

title:

  • 类型:字符串类型
  • 描述:(可选项)标题
  • 默认:'下载'

titleColor:

  • 类型:字符串类型
  • 描述:(可选项)文字颜色,支持#、rgb、rgba
  • 默认:#000

progressColor:

  • 类型:字符串类型
  • 描述:(可选项)进度条颜色,支持#、rgb、rgba
  • 默认:#000

titleSize:

  • 类型:数字类型
  • 描述:(可选项)标题文字大小
  • 默认:12

示例代码

var UIAlertView = api.require('UIAlertView');
UIAlertView.down({
    title:'下载',
    image:'widget://image/login.jpg'
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

update

更新下载样式的对话框进度条数据

update({params})

params

seconds:

  • 类型:数字类型
  • 描述:(可选项)进度
  • 默认:0.5
  • 取值范围:0-1

示例代码

var UIAlertView = api.require('UIAlertView');
UIAlertView.update({
    seconds:0.5
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

close

关闭弹出的对话框

close ()

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本