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

手机开发中，当处理某些请求或者给用户警示等情况时，希望通过弹出警示框给用户以反馈，使得用户有好的体验。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]);

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

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

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

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

调用：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"// 垂直底部
});