手机开发中,当处理某些请求或者给用户警示等情况时,希望通过弹出警示框给用户以反馈,使得用户有好的体验。H5+规范提供了几种调用手机原生控件的API接口。
这些弹出框,通过nativeUI对象进行实现(plus.nativeUI),如下逐一说明
1. 弹出确认框---confirm
调用:plus.nativeUI.confirm("info", callbackFunc(event), "title", [buttons]);
说明:info----弹出框显示的信息;title:弹出框标题;buttons:弹出框下方放置的按钮组合,放置顺序与buttongs顺序相反;callbackFunc(event):点击弹窗框下方按钮后的触发事件。
如何判定点击的哪一个按钮:通过callbackFunc的参数event事件对象----event.index获得点击的是哪一个按钮(与按钮组索引一致)。
举个例子说明:
// 事件处理
plus.nativeUI.confirm("显示的信息", function(event) {
var tapIndex = event.index;
switch (tapIndex) {
case 0 :
console.log("你点击了'是'按钮");
break;
case 1 :
console.log("你点击了'否'按钮");
break;
case 2 :
console.log("你点击了'不确定'按钮");
break;
}
}, "标题", ["是", "否", "不确定"]);
2. 警告框----alert
调用:plus.nativeUI.alert("info", alertFunc(event), "title", buttonName);
这里与confirm不同,alert框只用一个按钮,因此最后一个参数是一个String按钮名称,事件处理是通过alertFunc处理
举个例子说明:
// 提醒用户
plus.nativeUI.confirm("提示的信息", function(event) {
// 处理逻辑,一般不进行处理,或者页面返回
}, "警告/提示", "确定");
3. 输入框----prompt
调用:plus.nativeUI.prompt("info", promptFunc(event), "title", tips, [buttons]);
如何获取输入的值呢:通过promptFunc的回调函数中的event参数,event.index判断读取的哪一个按钮,event.value获取输入的值。
举个例子说明:
// 弹出输入框
plus.nativeUI.prompt("输入一个数字", function(event){
if(event.index){// 确定按钮
console.log("你输入了:" + event.value);
} else {// 取消按钮
console.log("你取消了该次输入");
}
}, "标题", "输入提示", ["取消", "确定"]);
调用:plus.nativeUI.toast("info", options);
说明:info:弹出的内容信息;
options:对于弹出框的一些说明选项信息,可以配置弹出框显示的图标、位置以及持续时间。
options属性说明:icon---显示的图标;duration---消息框持续时间(long/short);align---水平方向位置(left/center/right);verticalAlign---垂直方向位置(top/center/bottom)。
// 弹出消息框
plus.nativeUI.toast("弹出的消息内容", {
icon : "icon URL",// eg. "/img/add.png"
duration : "long",// 持续3.5s,short---2s
align : "center",// 水平居中
verticalAlign : "bottom"// 垂直底部
});