- nativeUI
- actionSheet
- alert
- confirm
- closeWaiting
- closeToast
- previewImage
- showWaiting
- pickDate
- pickTime
- prompt
- toast
- ActionButtonStyles
- ActionSheetStyles
- ConfirmStyles
- PreviewImageStyles
- PickDateStyles
- PickTimeStyles
- NativeUIObj
- close
- WaitingObj
- setTitle
- close
- onclose
- WaitingStyles
- WaitingLoadingStyles
- ToastStyles
- ActionSheetCallback
- AlertCallback
- ConfirmCallback
- PromptCallback
- PickDatetimeSuccessCallback
- PickDatetimeErrorCallback
- PreviewImageLongPressCallback
nativeUI
nativeUI管理系统原生界面,可用于弹出系统原生提示对话框窗口、时间日期选择对话框、等待对话框等。
方法:
- actionSheet: 弹出系统选择按钮框
- alert: 弹出系统提示对话框
- confirm: 弹出系统确认对话框
- closeWaiting: 关闭系统等待对话框
- closeToast: 关闭自动消失的提示消息
- previewImage: 预览图片
- showWaiting: 显示系统等待对话框
- pickDate: 弹出系统日期选择对话框
- pickTime: 弹出系统时间选择对话框
- prompt: 弹出系统输入对话框
- toast: 显示自动消失的提示消息
对象:
- ActionButtonStyles: JSON对象,原生选择按钮框上按钮的样式参数
- ActionSheetStyles: JSON对象,原生选择按钮框的样式参数
- ConfirmStyles: 确认对话框的参数
- PreviewImageStyles: JSON对象,图片预览的参数
- PickDateStyles: 日期选择对话框的参数
- PickTimeStyles: JSON对象,时间选择对话框的参数
- NativeUIObj: 系统原生界面基类对象
- WaitingObj: 系统等待对话框对象
- WaitingStyles: JSON对象,原生等待对话框的参数
- WaitingLoadingStyles: JSON对象,原生等待对话框上loading图标自定义样式
- ToastStyles: JSON对象,系统提示消息框要设置的参数
回调方法:
- ActionSheetCallback: 系统选择按钮框的回调函数
- AlertCallback: 系统提示框确认的回调函数
- ConfirmCallback: 关闭确认对话框的回调函数
- PromptCallback: 系统输入对话框关闭后的回调函数
- PickDatetimeSuccessCallback: 选择日期或时间操作成功的回调函数
- PickDatetimeErrorCallback: 选择日期或时间操作取消或失败的回调函数
- PreviewImageLongPressCallback: 图片预览长按事件
权限:
5+功能模块(permissions)
{
// ...
"permissions":{
// ...
"NativeUI": {
"description": "原生UI控件"
}
}
}
actionSheet
弹出系统选择按钮框
NativeUIObj plus.nativeUI.actionSheet(actionsheetStyle, actionsheetCallback);
说明:
从底部动画弹出系统样式选择按钮框,可设置选择框的标题、按钮文字等。弹出的提示框为非阻塞模式,用户点击选择框上的按钮后关闭,并通过actionsheetCallback回调函数通知用户选择的按钮。
参数:
- actionsheetStyle: (ActionSheetStyles)必选 选择按钮框显示的样式
- actionsheetCallback: (ActionSheetCallback)可选 选择按钮框关闭后的回调函数
返回值:
NativeUIObj: 系统原生界面基类对象
示例:
// 弹出系统选择按钮框
function actionSheet(){
plus.nativeUI.actionSheet(
{title:"Plus is ready!",
cancel:"取消",
buttons:[
{
title:"1"
},{
title:"2"
}
]},
function(e){
console.log("User pressed: "+e.index);
}
);
}
alert
弹出系统提示对话框
void plus.nativeUI.alert(message, alertCB, title, buttonCapture);
说明:
创建并显示系统样式提示对话框,可设置提示对话框的标题、内容、按钮文字等。弹出的提示对话框为非阻塞模式,用户点击提示对话框上的按钮后关闭,并通过alertCB回调函数通知对话框已关闭。
参数:
- message: (String)必选 提示对话框上显示的内容
- alertCB: (AlertCallback)可选 提示对话框上关闭后的回调函数
- title: (String)可选 提示对话框上显示的标题
- buttonCapture: (String)必选 提示对话框上按钮显示的内容
返回值:
void: 无
示例:
// 弹出系统提示对话框
function showAlert(){
plus.nativeUI.alert("Hello HTML5 plus!", function(){
console.log("User pressed!");
}, "nativeUI", "OK");
}
confirm
弹出系统确认对话框
void plus.nativeUI.confirm(message, confirmCB, styles);
void plus.nativeUI.confirm(message, confirmCB, title, buttons); // deprecated
说明:
创建并显示系统样式确认对话框,可设置确认对话框的标题、内容、按钮数目及其文字。弹出的确认对话框为非阻塞模式,用户点击确认对话框上的按钮后关闭,并通过confirmCB回调函数通知用户点击的按钮索引值。
参数:
- message: (String)必选 确认对话框上显示的内容
- confirmCB: (ConfirmCallback)可选 确认对话框关闭后的回调函数回调函数中包括Event参数,可通过其index属性(Number类型)获取用户点击按钮的索引值。
- styles|title: (ConfirmStyles|String)可选 确认对话框的参数/对话框的标题类型为json(ConfirmStyles),表示设置确认对话框的参数;类型为String时,表示设置确认对话框的标题(不推荐使用)。
- buttons: (Array[String])可选 确认对话框上显示的按钮(不推荐使用)字符串数组,每项对应在确认对话框上显示一个按钮,用户点击后通过confirmCB返回用户点击按钮的在数组中的索引值。不推荐使用,建议使用styles参数中的buttons属性。
返回值:
void: 无
平台支持:
- Android- ALL(支持): 对话框上最多只能支持三个按钮,buttons参数超过三个的值则忽略。
- iOS- ALL(支持)
示例:
// 弹出提示信息对话框
function showConfirm(){
plus.nativeUI.confirm("Are you sure ready?", function(e){
console.log("Close confirm: "+e.index);
});
}
closeWaiting
关闭系统等待对话框
void plus.nativeUI.closeWaiting();
说明:
关闭已经显示的所有系统样式等待对话框,触发Waiting对象的onclose事件。
参数:
无
返回值:
void: 无
示例:
// 自动关闭系统等待对话框
function autoCloseWaiting(){
plus.nativeUI.showWaiting( "等待中..." );
setTimeout(function(){
plus.nativeUI.closeWaiting();
}, 5000);
}
closeToast
关闭自动消失的提示消息
void plus.nativeUI.closeToast();
说明:
关闭已经显示的所有自动消失的提示框。
参数:
无
返回值:
void: 无
平台支持:
- Android- ALL(支持): 仅可关闭type类型为"richtext"的提示消息。
- iOS- ALL(支持)
示例:
// 自动关闭系统等待对话框
function autoCloseToast(){
plus.nativeUI.toast(
"<font style=\"font-size:14px\">再按一次返回键退出<br/>点此可<a onclick=\"console.log('clicked')\">反馈意见</a></font>",
{type:'richtext',
duration:'long',
richTextStyle:{align:'center'}
}
);
setTimeout(function(){
plus.nativeUI.closeToast();
}, 500);
}
previewImage
预览图片
void plus.nativeUI.previewImage(urls, styles);
说明:
创建并显示全屏图片预览界面,用户点击图片或返回键退出预览界面。
参数:
- urls: (Array[String])必选 需要预览的图片地址列表支持网络地址,也支持本地地址。相对路径 - 相对于当前页面的host位置,如"a.jpg";绝对路径 - 系统绝对路径,如Android平台"/sdcard/a.jpg",此类路径通常通过其它5+ API获取的;扩展相对路径URL(RelativeURL) - 以"_"开头的相对路径,如"_www/a.jpg";本地路径URL - 以“file://”开头,后面跟随系统绝对路径。
- styles: (PreviewImageStyles)可选 预览的显示参数如设置默认显示图片的索引值。
返回值:
void: 无
示例:
// 图片预览
function previewImage(){
plus.nativeUI.previewImage([
"_www/logo.png",
"http://img-cdn-qiniu.dcloud.net.cn/icon1.png",
"http://img-cdn-qiniu.dcloud.net.cn/icon2.png",
"http://img-cdn-qiniu.dcloud.net.cn/icon3.png"
]);
}
showWaiting
显示系统等待对话框
Waiting plus.nativeUI.showWaiting(title, styles);
说明:
创建并显示系统样式等待对话框,并返回等待对话框对象Waiting,显示后需调用其close方法进行关闭。
参数:
- title: (String)可选 等待对话框上显示的提示标题内容
- styles: (WaitingStyles)可选 等待对话框的显示参数可设置等待对话框的宽、高、边距、背景等样式。
返回值:
Waiting: Waiting对象
示例:
// 弹出系统等待对话框
function showWaiting(){
var w = plus.nativeUI.showWaiting("等待中...");
}
pickDate
弹出系统日期选择对话框
void plus.nativeUI.pickDate( successCB, errorCB, styles );
说明:
创建并显示系统样式日期选择对话框,可进行日期的选择。用户操作确认后通过successCB回调函数返回用户选择的日期,若用户取消选择则通过errorCB回调。
参数:
- successCB: (PickDatetimeSuccessCallback)必选 日期选择操作成功的回调函数回调函数中包括Event参数,可通过其date属性(Date类型)获取用户选择的时间。
- errorCB: (PickDatetimeErrorCallback)可选 日期选择操作取消或失败的回调函数
- styles: (PickDateStyles)可选 日期选择操作的参数
返回值:
void: 无
示例:
// 选择日期
function pickDate(){
plus.nativeUI.pickDate(function(e){
var d=e.date;
console.log("选择的日期:"+d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate());
}, function(e){
console.log("未选择日期:"+JSON.stringify(e));
});
}
pickTime
弹出系统时间选择对话框
void plus.nativeUI.pickTime(successCB, errorCB, styles);
说明:
创建并弹出系统样式时间选择对话框,可进行时间的选择。用户操作确认后通过successCB回调函数返回用户选择的时间,若用户取消选择则通过errorCB回调。
参数:
- successCB: (PickDatetimeSuccessCallback)必选 时间选择操作成功的回调函数回调函数中包括Event参数,可通过其date属性(Date类型)获取用户选择的时间。
- errorCB: (PickDatetimeErrorCallback)可选 时间选择操作取消或失败的回调函数
- styles: (PickTimeStyles)可选 时间选择操作的参数
返回值:
void: 无
示例:
// 选择时间
function pickTime(){
plus.nativeUI.pickTime(function(e){
var d=e.date;
console.log("选择的时间:"+d.getHours()+":"+d.getMinutes());
}, function(e){
console.log("未选择时间:"+JSON.stringify(e));
});
}
prompt
弹出系统输入对话框
void plus.nativeUI.prompt(message, promptCB, title, tip, buttons);
说明:
创建并显示系统样式输入对话框,可设置输入对话框的标题、内容、提示输入信息、按钮数目及其文字。弹出的输入对话框为非阻塞模式,其中包含编辑框供用户输入内容,用户点击输入对话框上的按钮后自动关闭,并通过promptCB回调函数返回用户点击的按钮及输入的内容。
参数:
- message: (String)必选 输入对话框上显示的内容
- promptCB: (PromptCallback)可选 关闭输入对话框的回调函数回调函数中包括Event参数,可通过其index属性(Number类型)获取用户点击按钮的索引值,通过其value属性(String类型)获取用户输入的内容。
- title: (String)可选 输入对话框上显示的标题
- tip: (String)可选 输入对话框上编辑框显示的提示文字
- buttons: (Array[String])可选 输入对话框上显示的按钮数组
返回值:
void: 无
示例:
// 弹出输入对话框
function showPrompt(){
plus.nativeUI.prompt("Input your name: ", function(e){
console.log(((e.index==0)?"OK: ":"Cancel")+e.value);
}, "nativeUI", "your name", ["OK","Cancel"]);
}
toast
显示自动消失的提示消息
void plus.nativeUI.toast(message, styles);
说明:
创建并显示系统样式提示消息,弹出的提示消息为非阻塞模式,显示指定时间后自动消失。提示消息显示时间可通过styles的duration属性控制,长时间提示消息显示时间约为3.5s,短时间提示消息显示时间约为2s。
参数:
- message: (String)必选 提示消息上显示的文字内容
- styles: (ToastStyles)可选 提示消息的参数可设置提示消息显示的图标、持续时间、位置等。
返回值:
void: 无
示例:
// 显示自动消失的提示消息
function showToast(){
plus.nativeUI.toast("I'am toast information!");
}
ActionButtonStyles
JSON对象,原生选择按钮框上按钮的样式参数
属性:
- color: (String类型)按钮上显示的文字颜色可取值:"#RRGGBB"格式字符串,如"#FF0000"表示文字颜色为红色;"rgba(R,G,B,A)",其中R/G/B分别代表红色值/绿色值/蓝色值,正整数类型,取值范围为0-255,A为透明度,浮点数类型,取值范围为0-1(0为全透明,1为不透明),如"rgba(255,0,0,0.5)",表示红色半透明。
平台支持
- Android - ALL (支持): 默认值为"#000000"(黑色);如果style为"destructive",则默认值为"#FF0000"(红色)。
- iOS - ALL (不支持): 暂不支持设置字体颜色,如果style为"default"则文字颜色为"#0000FF"(蓝色);如果style为"destructive",则文字颜色为"#FF0000"(红色)。
- title: (String类型)按钮上显示的文字内容
- style: (String类型)按钮的样式可取值:"destructive" - 表示警示按钮样式,默认文字颜色为红色;"default" - 表示默认按钮样式。默认值为"default"。
平台支持
- Android - ALL (不支持)
- iOS - 5.0+ (支持): iOS7及以下系统只仅支持一个按钮为"destructive"样式按钮,iOS8及以上系统可支持多个"destructive"样式按钮。
示例:
// 弹出系统选择按钮框
function actionSheet(){
var actionbuttons=[{title:"不同意",style:"destructive"},{title:"1"},{title:"2"},{title:"3"}];
var actionstyle={title:"Hello HTML5 plus!",cancel:"取消",buttons:actionbuttons};
plus.nativeUI.actionSheet(actionstyle, function(e){
console.log("User pressed: "+e.index );
});
}
ActionSheetStyles
JSON对象,原生选择按钮框的样式参数
属性:
- title: (String类型)选择按钮框的标题
- cancel: (String类型)取消按钮上显示的文字内容不设置此属性,则不显示取消按钮。
平台支持
- iOS - ALL (支持): 在iPad设备上不会显示取消按钮,点击actionsheet区域之外会自动关闭,并触发取消回调。
- buttons: (Array[ActionButtonStyles]类型)选择框上的按钮,ActionButtonStyles对象数组
示例:
// 弹出系统选择按钮框
function actionSheet(){
var actionbuttons=[{title:"不同意",style:"destructive"},{title:"1"},{title:"2"},{title:"3"}];
var actionstyle={title:"Hello HTML5 plus!",cancel:"取消",buttons:actionbuttons};
plus.nativeUI.actionSheet(actionstyle, function(e){
console.log("User pressed: "+e.index );
});
}
ConfirmStyles
确认对话框的参数
属性:
title: (String类型)确认对话框显示的标题如果不设置此属性值,则不显示标题。
buttons: (Array[String]类型)确认对话框上显示的按钮字符串数组,每项对应在确认对话框上显示一个按钮,用户点击后通过confirmCB返回用户点击按钮的在数组中的索引值。
verticalAlign: (String类型)对话框在屏幕中的垂直分享对齐方式可取值:"top" - 表示垂直居顶对齐;"center" - 表示垂直居中对齐;"bottom" - 表示垂直居底对齐。默认值为"center"(垂直居中对齐)。
示例:
// 弹出系统确认对话框
function showConfirm(){
plus.nativeUI.confirm("Are you sure ready?", function(e){
console.log("Close confirm: "+e.index);
},
{"title":"nativeUI",
"buttons":["Yes","No"],
"verticalAlign":"bottom"
}
);
}
PreviewImageStyles
JSON对象,图片预览的参数
属性:
background: (String类型)图片预览的背景颜色颜色值格式为"#RRGGBB",如"#FF0000"表示为红色背景。默认值为黑色("#000000")。
current: (Number类型)默认显示图片的索引值索引值从0开始,默认值为0。
indicator: (String类型)图片指示器样式可取值:"default" - 默认指示器(底部圆点样式);"number" - 顶部数字指示器(顶部居中显示,文字为%当前图片索引值(从1开始)%/%图片总数%);"none" - 不显示指示器。默认值为"default"。
loop: (Boolean类型)是否可循环预览可取值:"true" - 支持循环预览;"false" - 不支持循环预览。默认值为"false"。
onLongPress: (PreviewImageLongPressCallback类型)长按事件用户在图片预览界面长按时触发。在回调中返回长按图片的信息(索引值、地址等)。由于图片预览界面是层级非常高的窗口,此时只能调用plus.nativeUI.*显示的窗口覆盖在图片预览界面上(原生控件plus.nativeObj.View也无法显示)。注意:HBuilderX1.9.5及以上版本支持。
示例:
// 图片预览
function previewImage(){
plus.nativeUI.previewImage([
"_www/img/h5p.jpg",
"../img/shake/2.jpg",
"http://img-cdn-qiniu.dcloud.net.cn/newpage/images/logo4.png"
],{
current:1,
loop:true,
onLongPress:function(e){ // 预览界面长按显示ActionSheet
console.log('onLongPress: '+JSON.stringify(e));
var bts=[{title:"警告",style:"destructive"},{title:"按钮1"},{title:"按钮2"},{title:"按钮3"}];
plus.nativeUI.actionSheet({title:"ActionSheet标题",cancel:"取消",buttons:bts},
function(e){
console.log( "选择了\""+((e.index>0)?bts[e.index-1].title:"取消")+"\"");
}
);
}
});
}
PickDateStyles
日期选择对话框的参数
属性:
title: (String类型)日期选择对话框显示的标题如果未设置,则不显示标题。
date: (Date类型)日期选择对话框默认显示的日期如果未设置,则显示当前的日期。
minDate: (Date类型)日期选择对话框可选择的最小日期Date类型对象,如果未设置可选择的最小日期,则使用系统默认可选择的最小日期值。
maxDate: (Date类型)日期选择对话框可选择的最大日期Date类型对象,如果未设置可选择的最大日期,则使用系统默认可选择的最大日期值。其值必须大于minDate设置的值,否则使用系统默认可选择的最大日期值。
popover: (JSON类型)时间选择对话框弹出指示区域JSON类型对象,格式如{top:10;left:10;width:200;height:200;},所有值为像素值,其值为相对于容器Webview的位置。如未设置此值,默认在屏幕居中显示。仅在iPad上有效,其它设备忽略此值。
示例:
// 选择日期
function pickDate(){
var styles = {};
styles.title = "请选择日期:"; // 显示标题
styles.date = new Date(), styles.date.setFullYear(2018,8,8);// 默认显示的日期
styles.minDate = new Date(), styles.minDate.setFullYear(2010,0,1);// 设置最小可选日期为“2010-01-01”
styles.maxDate = new Date(), styles.maxDate.setFullYear(2020,11,31);// 设置最大可选日期为“2020-12-31”
plus.nativeUI.pickDate(function(e){
var d=e.date;
console.log( "选择的日期:"+d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate() );
}, function(e){
console.log( "未选择日期:"+e.message );
}, styles);
}
PickTimeStyles
JSON对象,时间选择对话框的参数
属性:
time: (Date类型)时间选择对话框默认显示的时间如果未设置,则默认当前的时间。
title: (String类型)时间选择对话框显示的标题如果未设置,则不显示标题。
is24Hour: (Boolean类型)是否24小时制模式true表示使用24小时制模式显示,fale表示使用12小时制模式显示,默认值为true。
popover: (JSON类型)日期选择对话框弹出指示区域JSON类型对象,格式如{top:10;left:10;width:200;height:200;},所有值为像素值,其值相对于容器webview的位置。如未设置此值,默认在屏幕居中显示。仅在iPad上有效,其它设备忽略此值。
示例:
// 选择时间
function pickTime(){
var styles = {};
styles.title = "请选择时间:"; //设置标题
styles.time = new Date(), styles.time.setHours(6,0); //设置默认显示时间为早上6点
styles.is24Hour = false; //使用12小时制模式显示
plus.nativeUI.pickTime(function(e){
var d=e.date;
console.log( "选择的时间:"+d.getHours()+":"+d.getMinutes() );
}, function(e){
console.log( "未选择时间:"+e.message );
}, styles);
}
NativeUIObj
系统原生界面基类对象
interface NativeUIObj{
function void close();
}
方法:
- close: 关闭显示的系统原生界面
close
关闭显示的系统原生界面
void uiobj.close();
说明:
调用plus.nativeUI.actionSheet方法创建并显示系统界面后,可通过其close方法将原生界面关闭。此情况下触发界面关闭回调函数参数的index属性值为-1。注意:一个系统原生界面只能关闭一次,多次调用将无任何作用。
参数:
无
返回值:
void: 无
示例:
// 弹出系统选择按钮框(5秒后自动关闭)
function autoActionSheet(){
var a = plus.nativeUI.actionSheet({title:'Plus is ready!',
cancel:'取消',
buttons:[{title:'1'},{title:'2'}]
},
function(e){
console.log('User pressed: '+e.index);
a=null;
});
setTimeout(function(){
a&&a.close();
}, 5000);
}
WaitingObj
系统等待对话框对象
说明:
从NativeUIObj对象继承而来,通过plus.nativeUI.showWaiting方法创建时返回。用于控制系统样式等待对话框的操作,如关闭、设置标题内容等。
方法:
事件:
- onclose: 等待对话框关闭事件
setTitle
设置等待对话框上显示的文字内容
wobj.setTitle( title );
参数:
- title: (String)必选 要设置的文本信息
返回值:
void: 无
示例:
// 更新等待对话框上显示内容
function updateWaitingTitle(){
// 弹出系统等待对话框
var w = plus.nativeUI.showWaiting( "等待中..." );
// 2秒后更新
setTimeout(function(){
w.setTitle( "正在更新" );
}, 2000);
}
close
关闭显示的系统等待对话框
wobj.close();
说明:
调用plus.nativeUI.showWaiting方法创建并显示系统等待界后,可通过其close方法将原生等待控件关闭。一个系统等待对话框只能关闭一次,多次调用将无任何作用。
参数:
无
返回值:
void: 无
示例:
// 自动关闭等待框
function autoClosWaiting(){
var w = plus.nativeUI.showWaiting( "等待中..." );
// 2秒后关闭
setTimeout(function(){
w.close();
}, 2000);
}
onclose
等待对话框关闭事件
wobj.onclose = function() {
console.log( "Waiting closed!" );
};
说明:
function类型
等待框关闭时触发,当调用close方法或用户点击返回按钮导致等待框关闭时触发。
示例:
// 弹出系统等待对话框
function showWaiting(){
var w = plus.nativeUI.showWaiting("等待中...");
// 关闭事件
w.onclose = function() {
console.log("Waiting onclose!");
}
}
WaitingStyles
JSON对象,原生等待对话框的参数
属性:
width: (String类型)等待框背景区域的宽度值支持像素值("500px")或百分比("50%"),百分比相对于屏幕的宽计算,如果不设置则根据内容自动计算合适的宽度。
height: (String类型)等待框背景区域的高度值支持像素绝对值("500px")或百分比("50%"),如果不设置则根据内容自动计算合适的高度。
color: (String类型)等待框中文字的颜色颜色值支持(参考CSS颜色规范):颜色名称(参考CSS Color Names)/十六进制值/rgb值/rgba值,默认值为白色。
size: (String类型)等待框中文字的字体大小如"14px"表示使用14像素高的文字,未设置则使用系统默认字体大小。
textalign: (String类型)等待对话框中标题文字的水平对齐方式对齐方式可选值包括:"left":水平居左对齐显示,"center":水平居中对齐显示,"right":水平居右对齐显示。默认值为水平居中对齐显示,即"center"。
padding: (String类型)等待对话框的内边距值支持像素值("10px")和百分比("5%"),百分比相对于屏幕的宽计算,默认值为"3%"。
background: (String类型)等待对话框显示区域的背景色背景色的值支持(参考CSS颜色规范):颜色名称(参考CSS Color Names)/十六进制值/rgb值/rgba值,默认值为rgba(0,0,0,0.7)。
style: (String类型)等待对话框样式可取值"black"、"white",black表示等待框为黑色雪花样式,通常在背景主色为浅色时使用;white表示等待框为白色雪花样式,通常在背景主色为深色时使用。仅在iOS平台有效,其它平台忽略此值,未设置时默认值为white。
modal: (Boolen类型)等待框是否模态显示模态显示时用户不可操作直到等待对话框关闭,否则用户在等待对话框显示时也可操作下面的内容,未设置时默认为true。
round: (Number类型)等待框显示区域的圆角值支持像素值("10px"),未设置时使用默认值"10px"。
padlock: (Boolen类型)点击等待显示区域是否自动关闭true表示点击等待对话框显示区域时自动关闭,false则不关闭,未设置时默认值为false。
back: (String类型)返回键处理方式可取值"none"表示截获处理返回键,但不做任何响应;"close"表示截获处理返回键并关闭等待框;"transmit"表示不截获返回键,向后传递给Webview窗口继续处理(与未显示等待框的情况一致)。
平台支持
- Android - 2.3+ (支持)
- iOS - ALL (不支持): iOS设备无返回键,忽略此属性。
- loading: (WaitingLoadingStyles类型)自定义等待框上loading图标样式
WaitingLoadingStyles
JSON对象,原生等待对话框上loading图标自定义样式
属性:
display: _(String类型)_loading图标显示样式可取值:"block"表示图标与文字分开两行显示,上面显示loading图标,下面显示文字;"inline"表示loading图标与文字在同一行显示,左边显示loading图标,右边显示文字;"none"表示不显示loading图标;
height: _(String类型)_loading图标高度设置loading图标的高度(宽度等比率缩放),取值类型:像素值,如"14px"表示14像素高。
平台支持
- Android - 2.3+ (支持)
- iOS - 5.1+ (支持): 仅在自定义loading图标时生效,使用系统默认样式loading图标时忽略此参数。
- icon: _(String类型)_loading图标路径自定义loading图标的路径,png格式,并且必须是本地资源地址;loading图要求宽是高的整数倍,显示等待框时按照图片的高横向截取每帧刷新。
interval: _(Number类型)_loading图每帧刷新间隔单位为ms(毫秒),默认值为100ms。
type: _(String类型)_loading图标类型如果设置了icon属性,则优先使用icon自定义图标。可取值:"circle" - 圆圈类型loading图标;"snow" - 雪花类型loading图标。默认值为"circle"。
平台支持
- Android - ALL (支持)
- iOS - ALL (不支持): 不支持设置loading图标类型,默认为系统雪花图标。
ToastStyles
JSON对象,系统提示消息框要设置的参数
属性:
align: (String类型)提示消息框在屏幕中的水平位置可选值为"left"、"center"、"right",分别为水平居左、居中、居右,未设置时默认值为"center"。
background: (String类型)提示消息框的背景色背景色的值支持(参考CSS颜色规范):颜色名称(参考CSS Color Names)/十六进制值/rgb值/rgba值。
平台支持
- Android - ALL (支持): 默认为系统toast的背景颜色。
- iOS - ALL (支持): 默认值为rgba(0,0,0,0.7)。
- duration: (String类型)提示消息框显示的时间可选值为"long"、"short",值为"long"时显示时间约为3.5s,值为"short"时显示时间约为2s,未设置时默认值为"short"。
icon: (String类型)提示消息框上显示的图标仅支持本地图片路径。
iconWidth: (String类型)图标的宽度单位为px(逻辑像素值),默认值为图片的宽度。
iconHeight: (String类型)图标的高度单位为px(逻辑像素值),默认值为图片的高度。
style: (String类型)提示消息框上显示的样式可取值:"block"表示图标与文字分两行显示,上面显示图标,下面显示文字;"inline"表示图标与文字在同一行显示,左边显示图标,右边显示文字。默认值为"block"。
type: (String类型)提示消息框上显示的文本类型可取值:"text" - 显示的消息内容为文本字符串;"richtext" - 显示的消息内容为富文本内容。默认值为"text"。当type为"text"时,富文本使用html的部分标签,具体标签如下:图片标签;字体标签,内容在一行显示不下时自动换行,行高默认为字体的1.2倍;换行标签;链接标签链接地址。如示例“链接地址”。
richTextStyle: (RichTextStyles类型)富文本样式当type属性值为"richtext"时有效,用于定义富文本的样式,如其文本对齐方式、使用的字体等。
verticalAlign: (String类型)提示消息在屏幕中的垂直位置可选值为"top"、"center"、"bottom",分别为垂直居顶、居中、居底,未设置时默认值为"bottom"。
示例:
// 显示自动消失的富文本提示消息
function showRichToast(){
plus.nativeUI.toast("<font style=\"font-size:14px\">再按一次返回键退出<br/>点此可<a onclick=\"console.log('clicked')\">反馈意见</a></font>",
{type:'richtext',
duration:'long',
richTextStyle:{
align:'center'
}
});
}
ActionSheetCallback
系统选择按钮框的回调函数
void onActioned( Event event ){
// actionsheet handled code.
var index=event.index; // 用户关闭时点击按钮的索引值
}
参数:
- event: (Event)必选 用户操作选择按钮框关闭后返回的数据可通过event.index(Number类型)获取用户关闭时点击按钮的索引值,索引值从0开始;0表示用户点击取消按钮,大于0值表示用户点击ActionSheetStyles中buttons属性定义的按钮,索引值从1开始(即1表示点击buttons中定义的第一个按钮)。通过API(close()方法)关闭,则回调函数中event的index属性值为-1。
返回值:
void: 无
AlertCallback
系统提示框确认的回调函数
void onAlerted( Event event ){
// Alert handled code.
var index=event.index; // 用户关闭提示对话框点击按钮的索引值
}
参数:
- event: (Event)必选 用户操作确认对话框关闭后返回的数据可通过event.index(Number类型)获取用户关闭确认对话框点击按钮的索引值,点击确认键的索引值为0。Android平台上通过返回按钮关闭时索引值为-1。
返回值:
void: 无
平台支持:
- Android- ALL(支持): 用户点击设备“返回”按键导致提示对话框关闭,也会触发此回调函数,此时回调返回参数中的index属性值为-1。
- iOS- ALL(支持): 用户只能通过点击提示对话框上的按钮进行关闭。
ConfirmCallback
关闭确认对话框的回调函数
void onConfirmed( Event event ) {
// Confirm handled code.
var index=event.index; // 用户关闭确认对话框点击按钮的索引值
}
参数:
- event: (Event)必选 用户操作确认对话框关闭后返回的数据可通过event.index(Number类型)获取用户关闭确认对话框点击按钮的索引值,索引值从0开始;
返回值:
void: 无
平台支持:
- Android- ALL(支持): 用户点击设备“返回”按键导致确认对话框关闭,则回调函数中event的index属性值为-1。
- iOS- ALL(支持): 用户只能通过点击确认对话框上的按钮进行关闭。
PromptCallback
系统输入对话框关闭后的回调函数
function void onPrompted( Event event ) {
// Prompt handled code.
var index=event.index; // 用户关闭输入对话框点击按钮的索引值
var value=event.value; // 用户输入的内容
}
参数:
- event: (Event)必选 用户操作输入对话框关闭后返回的数据可通过event.index(Number类型)获取用户关闭输入对话框点击按钮的索引值,索引值从0开始;通过event.value(String类型)获取用户输入的内容,如果没有输入则返回空字符串。
返回值:
void: 无
平台支持:
- Android- ALL(支持): 用户点击设备“返回”按键导致输入对话框关闭,则回调函数中event的index属性值为-1,value值为空字符串。
- iOS- ALL(支持): 用户只能通过点击输入对话框上的按钮进行关闭。
PickDatetimeSuccessCallback
选择日期或时间操作成功的回调函数
function void onPickSuccess( Event event ) {
// Date picked code.
var date = event.date;// 用户选择的日期或时间
}
参数:
- event: (Event)必选 用户完成选择日期或时间后返回的数据可通过event.date(Date类型)获取选择的日期或时间值。若调用的是日期选择操作则仅年、月、日信息有效,若调用的是时间选择操作则仅时、分信息有效。
返回值:
void: 无
PickDatetimeErrorCallback
选择日期或时间操作取消或失败的回调函数
function void onPickError( Exception error ) {
// Date picked error.
var code = error.code; // 错误编码
var message = error.message; // 错误描述信息
}
参数:
- error: (Exception)必选 用户选择操作失败信息可通过error.code(Number类型)获取错误编码;可通过error.message(String类型)获取错误描述信息。
返回值:
void: 无
PreviewImageLongPressCallback
图片预览长按事件
function void onlongPress(event) {
// longpress event
var index = event.index; // 长按图片的索引
var url = event.url; // 长按图片的url地址
var path = event.path; // 长按图片的本地图片路径(系统绝对路径)
}
说明:
在图片预览界面长按时触发。
参数:
- index: (Number)必选 长按图片的索引值索引值从0开始。
- url: (String)必选 长按图片的url地址与调用plus.nativeUI.previewImage传入的urls值一致。
- path: (String)必选 长按图片的本地地址系统绝对路径。
返回值:
void: 无