UIAlertView

/* Title: UIAlertView Description: UIAlertView */

alert

disappeal

input

advertisement

down

update

close

概述

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及更高版本

是否仍需要帮助？ 请保持联络！
最后更新于 2024/04/24