UIAlert

立即使用

论坛示例

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

概述

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

  1. invite对话框效果图

UIAlert - 图1

模块接口

invite close

invite

邀请对话框

invite({params}, callback(ret))

params

  1. {
  2.     data:{                                                 // JSON对象；数据
  3.         avator:'widget://image/avator.png',            // 字符串；头像路径（支持 fs | widget,http | https）
  4.         name: 'Jack Ma',                               // 字符串；名称
  5.         title:'高级上尉',                               // 字符串；职称
  6.         description:'向你发起挑战',                      // 字符串；描述
  7.         duration:5000,                                 // 数字；定时器时长；单位：ms
  8.         tips:'倒计时结束...',                            // 字符串；底部提示语
  9.         leftBtnTitle:'拒绝',                            // 字符串；左边按钮标题
  10.         rightBtnTitle:'接受'                            // 字符串；右边按钮标题
  11.     },
  12.     styles:{                                               // JSON对象；样式配置
  13.         w:300,                                         // 数字；对话框的宽度
  14.         h:370,                                         // 数字；对话框的高度
  15.         bgColor:'#FFF',                                // 字符串；对话框背景
  16.         viewBorderColor:'#00BFFF',                      // 字符串；对话框边框颜色
  17.        avatorBorderColor:'#00BFFF',                    // 字符串；头像边框颜色
  18.        viewBorderW:5,                                // 数字；对话框边框宽度
  19.        avatorBorderW:5,                              // 数字；头像边框宽度
  20.         avator:{                                       // JSON对象；头像配置
  21.             size: 40,                              // 数字；头像的大小
  22.             marginTop:10,                          // 数字；头像距离对话框顶部的距离
  23.         },
  24.         name:{                                         // JSON对象；名字配置
  25.             size:12,                               // 数字；头像大小
  26.             color:'#00F',                          // 字符串；颜色
  27.             marginTop:10                           // 数字；距离顶部头像的距离
  28.         },
  29.         title:{                                        // JSON对象；职称配置
  30.             size:14,                               // 数字；职称字体大小
  31.             color:'#000',                          // 字符串；职称字体的颜色
  32.             marginTop:10,                          // 数字；距离顶部name的距离
  33.         },
  34.         description:{                                  // JSON对象；
  35.             size:18,                               // 数字；字体大小
  36.             color:'#000',                          // 字符串；颜色
  37.             marginTop:10,                          // 数字；距离顶部title的距离
  38.         },
  39.         timer:{                                        // JSON对象
  40.             size:50,                               // 数字；timer 组件的大小
  41.             progressNormalColor: '#FF0',           // 字符串；定时器当前进度的颜色
  42.             progressHightlightColor: '#FF0',       // 字符串；定时器剩余进度的颜色
  43.             marginTop:10,                          // 数字；距离顶部 description 的距离
  44.         },
  45.         tips:{                                         // JSON对象；提示语配置
  46.             size:12,                               // 数字；字体大小
  47.             color:'#00F',                          // 字符串；颜色
  48.             marginTop:10                           // 数字；距离顶部timer的距离
  49.         },
  50.         leftBtn:{                                      // JSON对象；左侧按钮配置
  51.             w: 80,                       // 数字；按钮的宽度
  52.             h: 30,                                 // 数字；按钮的高度
  53.             color:'#FFF',                          // 字符串；字体颜色
  54.             size: 12,                              // 数字；字体大小
  55.             corner:8,                              // 数字；圆角大小
  56.             bgColor:'#F00'                         // 字符串；按钮背景色
  57.         },
  58.         rightBtn:{                                     // JSON对象；右侧按钮配置
  59.             w: 80,                                 // 数字；按钮的宽度
  60.             h: 30,                                 // 数字；按钮的高度
  61.             color:'#FFF',                          // 字符串；字体颜色
  62.             size: 12,                              // 数字；字体大小
  63.             corner:8,                              // 数字；圆角大小
  64.             bgColor:'#00F',                        // 字符串；按钮背景颜色
  65.             marginLeft:20                          // 数字；按钮左边距（距离左侧按钮）
  66.         }
  67.     }
  68. }

callback(ret)

ret：

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

示例代码

  1. var UIAlert = api.require('UIAlert');
  2. UIAlert.invite({
  3.     data:{
  4.         avator:'widget://image/avator.png',
  5.         name: 'Jack Ma',
  6.         title:'高级上尉',
  7.         description:'向你发起挑战',
  8.         duration:5000,
  9.         tips:'倒计时结束...',
  10.         leftBtnTitle:'拒绝',
  11.         rightBtnTitle:'接受'
  12.     },
  13.     styles:{
  14.         w:300,
  15.         h:370,
  16.         bgColor:'#FFF',
  17.         avator:{
  18.             size: 40,
  19.             marginTop:10,
  20.         },
  21.         name:{
  22.             size:12,
  23.             color:'#00F',
  24.             marginTop:10
  25.         },
  26.         title:{
  27.             size:14,
  28.             color:'#000',
  29.             marginTop:10,
  30.         },
  31.         description:{
  32.             size:18,
  33.             color:'#000',
  34.             marginTop:10,
  35.         },
  36.         timer:{
  37.             size:50,
  38.             progressNormalColor: '#FF0',
  39.             progressHightlightColor: '#FF0',
  40.             marginTop:10,
  41.         },
  42.         tips:{
  43.             size:12,
  44.             color:'#00F',
  45.             marginTop:10
  46.         },
  47.         leftBtn:{
  48.             w: 80,
  49.             h: 30,
  50.             color:'#FFF',
  51.             size: 12,
  52.             corner:8,
  53.             bgColor:'#F00'
  54.         },
  55.         rightBtn:{
  56.             w: 80,
  57.             h: 30,
  58.             color:'#FFF',
  59.             size: 12,
  60.             corner:8,
  61.             bgColor:'#00F',
  62.             marginLeft:20
  63.         }
  64.     }
  65. }, function(ret){
  66.     alert(JSON.stringify(ret));
  67. });

可用性

iOS系统，android系统

可提供的1.0.0及更高版本

close

关闭对话框

close({params}, callback(ret))

示例代码

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

可用性

iOS系统，android系统

可提供的1.0.0及更高版本