手机开发之H5+规范的原生UI警示框

手机开发中，当处理某些请求或者给用户警示等情况时，希望通过弹出警示框给用户以反馈，使得用户有好的体验。H5+规范提供了几种调用手机原生控件的API接口。

这些弹出框，通过nativeUI对象进行实现(plus.nativeUI)，如下逐一说明

1. 弹出确认框---confirm

[javascript] view plain copy

print?

1. 调用：plus.nativeUI.confirm("info", callbackFunc(event), "title", [buttons]);  

说明：info----弹出框显示的信息；title:弹出框标题；buttons:弹出框下方放置的按钮组合，放置顺序与buttongs顺序相反；callbackFunc(event):点击弹窗框下方按钮后的触发事件。

如何判定点击的哪一个按钮：通过callbackFunc的参数event事件对象----event.index获得点击的是哪一个按钮（与按钮组索引一致）。

举个例子说明：

[javascript] view plain copy

print?

1. // 事件处理  
2. plus.nativeUI.confirm("显示的信息", function(event) {  
3.     var tapIndex = event.index;  
4.     switch (tapIndex) {  
5.         case 0 :   
6.             console.log("你点击了'是'按钮");  
7.             break;  
8.         case 1 :   
9.             console.log("你点击了'否'按钮");  
10.             break;  
11.         case 2 :   
12.             console.log("你点击了'不确定'按钮");  
13.             break;  
14.     }  
15. }, "标题", ["是", "否", "不确定"]);  

2. 警告框----alert

[javascript] view plain copy

print?

1. 调用：plus.nativeUI.alert("info", alertFunc(event), "title", buttonName);  

这里与confirm不同，alert框只用一个按钮，因此最后一个参数是一个String按钮名称，事件处理是通过alertFunc处理

举个例子说明：

[javascript] view plain copy

print?

1. // 提醒用户  
2. plus.nativeUI.confirm("提示的信息", function(event) {  
3.     // 处理逻辑，一般不进行处理，或者页面返回  
4. }, "警告/提示", "确定");  

3. 输入框----prompt

[javascript] view plain copy

print?

1. 调用：plus.nativeUI.prompt("info", promptFunc(event), "title", tips, [buttons]);  

说明：info:输入对话框的提示；promptFunc:关闭对话框的回调；title:标题，不说；tip:输入的地方显示的提示文字；buttons：对话框下显示的按钮数组。

如何获取输入的值呢：通过promptFunc的回调函数中的event参数，event.index判断读取的哪一个按钮，event.value获取输入的值。
举个例子说明：

[javascript] view plain copy

print?

1. // 弹出输入框  
2. plus.nativeUI.prompt("输入一个数字", function(event){  
3.     if(event.index){// 确定按钮  
4.         console.log("你输入了：" + event.value);  
5.     } else {// 取消按钮  
6.         console.log("你取消了该次输入");  
7.     }  
8. }, "标题", "输入提示", ["取消", "确定"]);  

4. 弹出自动消失的浮动框----toast

[javascript] view plain copy

print?

1. 调用：plus.nativeUI.toast("info", options);  

说明：info:弹出的内容信息；

options:对于弹出框的一些说明选项信息，可以配置弹出框显示的图标、位置以及持续时间。

options属性说明：icon---显示的图标；duration---消息框持续时间(long/short)；align---水平方向位置(left/center/right)；verticalAlign---垂直方向位置(top/center/bottom)。

[javascript] view plain copy

print?

1. // 弹出消息框  
2. plus.nativeUI.toast("弹出的消息内容", {  
3.     icon : "icon URL",// eg. "/img/add.png"  
4.     duration : "long",// 持续3.5s，short---2s  
5.     align : "center",// 水平居中  
6.     verticalAlign : "bottom"// 垂直底部  
7. });