# [nativeUI]() nativeUI管理系统原生界面,可用于弹出系统原生提示对话框窗口、时间日期选择对话框、等待对话框等。 ### 方法: - [actionSheet](http://www.dcloud.io/docs/api/zh_cn/nativeUI.shtml#plus.nativeUI.actionSheet): 弹出系统选择按钮框 - [alert](http://www.dcloud.io/docs/api/zh_cn/nativeUI.shtml#plus.nativeUI.alert): 弹出系统提示对话框 - [confirm](http://www.dcloud.io/docs/api/zh_cn/nativeUI.shtml#plus.nativeUI.confirm): 弹出系统确认对话框 - [closeWaiting](http://www.dcloud.io/docs/api/zh_cn/nativeUI.shtml#plus.nativeUI.closeWaiting): 关闭系统等待对话框 - [showWaiting](http://www.dcloud.io/docs/api/zh_cn/nativeUI.shtml#plus.nativeUI.showWaiting): 显示系统等待对话框 - [pickDate](http://www.dcloud.io/docs/api/zh_cn/nativeUI.shtml#plus.nativeUI.pickDate): 弹出系统日期选择对话框 - [pickTime](http://www.dcloud.io/docs/api/zh_cn/nativeUI.shtml#plus.nativeUI.pickTime): 弹出系统时间选择对话框 - [prompt](http://www.dcloud.io/docs/api/zh_cn/nativeUI.shtml#plus.nativeUI.prompt): 弹出系统输入对话框 - [toast](http://www.dcloud.io/docs/api/zh_cn/nativeUI.shtml#plus.nativeUI.toast): 显示自动消失的提示消息 ### 对象: - [ActionButtonStyle](http://www.dcloud.io/docs/api/zh_cn/nativeUI.shtml#plus.nativeUI.ActionButtonStyle): JSON对象,原生选择按钮框上按钮的样式参数 - [ActionSheetStyle](http://www.dcloud.io/docs/api/zh_cn/nativeUI.shtml#plus.nativeUI.ActionSheetStyle): JSON对象,原生选择按钮框的样式参数 - [PickDateOption](http://www.dcloud.io/docs/api/zh_cn/nativeUI.shtml#plus.nativeUI.PickDateOption): JSON对象,日期选择对话框的参数 - [PickTimeOption](http://www.dcloud.io/docs/api/zh_cn/nativeUI.shtml#plus.nativeUI.PickTimeOption): JSON对象,时间选择对话框的参数 - [Waiting](http://www.dcloud.io/docs/api/zh_cn/nativeUI.shtml#plus.nativeUI.Waiting): 系统等待对话框对象 - [WaitingOption](http://www.dcloud.io/docs/api/zh_cn/nativeUI.shtml#plus.nativeUI.WaitingOption): JSON对象,原生等待对话框的参数 - [ToastOption](http://www.dcloud.io/docs/api/zh_cn/nativeUI.shtml#plus.nativeUI.ToastOption): JSON对象,系统提示消息框要设置的参数 ### 回调方法: - [ActionSheetCallback](http://www.dcloud.io/docs/api/zh_cn/nativeUI.shtml#plus.nativeUI.ActionSheetCallback): 系统选择按钮框的回调函数 - [AlertCallback](http://www.dcloud.io/docs/api/zh_cn/nativeUI.shtml#plus.nativeUI.AlertCallback): 系统提示框确认的回调函数 - [ConfirmCallback](http://www.dcloud.io/docs/api/zh_cn/nativeUI.shtml#plus.nativeUI.ConfirmCallback): 关闭确认对话框的回调函数 - [PromptCallback](http://www.dcloud.io/docs/api/zh_cn/nativeUI.shtml#plus.nativeUI.PromptCallback): 系统输入对话框关闭后的回调函数 - [PickDatetimeSuccessCallback](http://www.dcloud.io/docs/api/zh_cn/nativeUI.shtml#plus.nativeUI.PickDatetimeSuccessCallback): 选择日期或时间操作成功的回调函数 - [PickDatetimeErrorCallback](http://www.dcloud.io/docs/api/zh_cn/nativeUI.shtml#plus.nativeUI.PickDatetimeErrorCallback): 选择日期或时间操作取消或失败的回调函数 # [actionSheet]() 弹出系统选择按钮框 ~~~ void plus.nativeUI.actionSheet( actionsheetStyle, actionsheetCallback ); ~~~ ### 说明: 从底部动画弹出系统样式选择按钮框,可设置选择框的标题、按钮文字等。 弹出的提示框为非阻塞模式,用户点击选择框上的按钮后关闭,并通过actionsheetCallback回调函数通知用户选择的按钮。 ### 参数: - actionsheetStyle: *( [ActionSheetStyle](http://www.dcloud.io/docs/api/zh_cn/nativeUI.shtml#plus.nativeUI.ActionSheetStyle) ) 必选 *选择按钮框显示的样式 - actionsheetCallback: *( [ActionSheetCallback](http://www.dcloud.io/docs/api/zh_cn/nativeUI.shtml#plus.nativeUI.ActionSheetCallback) ) 可选 *选择按钮框关闭后的回调函数 ### 返回值: void : 无 ### 示例: ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>nativeUI Example</title> <script type="text/javascript"> // H5 plus事件处理 function plusReady(){ // 弹出系统选择按钮框 plus.nativeUI.actionSheet( {title:"Plus is ready!",cancel:"取消",buttons:[{title:"1"},{title:"2"}]}, function(e){ console.log( "User pressed: "+e.index ); } ); } if(window.plus){ plusReady(); }else{ document.addEventListener("plusready",plusReady,false); } </script> </head> <body> 弹出系统选择按钮框 </body> </html> ~~~ # [alert]() 弹出系统提示对话框 ~~~ void plus.nativeUI.alert( message, alertCB, title, buttonCapture ); ~~~ ### 说明: 创建并显示系统样式提示对话框,可设置提示对话框的标题、内容、按钮文字等。 弹出的提示对话框为非阻塞模式,用户点击提示对话框上的按钮后关闭,并通过alertCB回调函数通知对话框已关闭。 ### 参数: - message: *( String ) 必选 *提示对话框上显示的内容 - alertCB: *( [AlertCallback](http://www.dcloud.io/docs/api/zh_cn/nativeUI.shtml#plus.nativeUI.AlertCallback) ) 可选 *提示对话框上关闭后的回调函数 - title: *( String ) 可选 *提示对话框上显示的标题 - buttonCapture: *( String ) 必选 *提示对话框上按钮显示的内容 ### 返回值: void : 无 ### 示例: ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>nativeUI Example</title> <script type="text/javascript"> // H5 plus事件处理 function plusReady(){ // 弹出系统提示对话框 plus.nativeUI.alert( "Plus is ready!", function(){ console.log( "User pressed!" ); }, "nativeUI", "OK" ); } if(window.plus){ plusReady(); }else{ document.addEventListener("plusready",plusReady,false); } </script> </head> <body> 弹出系统提示对话框 </body> </html> ~~~ # [confirm]() 弹出系统确认对话框 ~~~ void plus.nativeUI.confirm( message, confirmCB, title, buttons ); ~~~ ### 说明: 创建并显示系统样式确认对话框,可设置确认对话框的标题、内容、按钮数目及其文字。 弹出的确认对话框为非阻塞模式,用户点击确认对话框上的按钮后关闭,并通过confirmCB回调函数通知用户点击的按钮索引值。 ### 参数: - message: *( String ) 必选 *确认对话框上显示的内容 - confirmCB: *( [ConfirmCallback](http://www.dcloud.io/docs/api/zh_cn/nativeUI.shtml#plus.nativeUI.ConfirmCallback) ) 可选 *确认对话框关闭后的回调函数 回调函数中包括Event参数,可通过其index属性(Number类型)获取用户点击按钮的索引值。 - title: *( String ) 可选 *确认对话框上显示的标题 - buttons: *( Array[ String ] ) 可选 *确认对话框上显示的按钮 字符串数组,每项对应在确认对话框上显示一个按钮,用户点击后通过confirmCB返回用户点击按钮的在数组中的索引值。 ### 返回值: void : 无 ### 平台支持: - Android - 2.2+ (支持): 对话框上最多只能支持三个按钮,buttons参数超过三个的值则忽略。 - iOS - 4.5+ (支持) ### 示例: ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>nativeUI Example</title> <script type="text/javascript"> // H5 plus事件处理 function plusReady(){ // 弹出提示信息对话框 plus.nativeUI.confirm( "Are you sure ready?", function(e){ console.log( (e.index==0)?"Yes!":"No!" ); }, "nativeUI", ["Yes","No"] ); } if(window.plus){ plusReady(); }else{ document.addEventListener("plusready",plusReady,false); } </script> </head> <body> 弹出系统确认对话框 </body> </html> ~~~ # [closeWaiting]() 关闭系统等待对话框 ~~~ void plus.nativeUI.closeWaiting(); ~~~ ### 说明: 关闭已经显示的所有系统样式等待对话框,触发Waiting对象的onclose事件。 ### 参数: 无 ### 返回值: void : 无 ### 示例: ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>nativeUI Example</title> <script type="text/javascript"> // H5 plus事件处理 function plusReady(){ // 弹出系统等待对话框 plus.nativeUI.showWaiting( "等待中..." ); setTimeout( function(){ plus.nativeUI.closeWaiting(); }, 5000 ); } if(window.plus){ plusReady(); }else{ document.addEventListener("plusready",plusReady,false); } </script> </head> <body> 显示系统等待对话框 5S后自动关闭 </body> </html> ~~~ # [showWaiting]() 显示系统等待对话框 ~~~ Waiting plus.nativeUI.showWaiting( title, options ); ~~~ ### 说明: 创建并显示系统样式等待对话框,并返回等待对话框对象Waiting,显示后需调用其close方法进行关闭。 ### 参数: - title: *( String ) 可选 *等待对话框上显示的提示标题内容 - options: *( [WaitingOption](http://www.dcloud.io/docs/api/zh_cn/nativeUI.shtml#plus.nativeUI.WaitingOption) ) 可选 *等待对话框的显示参数 可设置等待对话框的宽、高、边距、背景等样式。 ### 返回值: [Waiting](http://www.dcloud.io/docs/api/zh_cn/nativeUI.shtml#plus.nativeUI.Waiting) : Waiting对象 ### 示例: ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>nativeUI Example</title> <script type="text/javascript"> // H5 plus事件处理 function plusReady(){ // 弹出系统等待对话框 var w = plus.nativeUI.showWaiting( "等待中..." ); } if(window.plus){ plusReady(); }else{ document.addEventListener("plusready",plusReady,false); } </script> </head> <body> 显示系统等待对话框 </body> </html> ~~~ # [pickDate]() 弹出系统日期选择对话框 ~~~ void plus.nativeUI.pickDate( successCB, errorCB, options ); ~~~ ### 说明: 创建并显示系统样式日期选择对话框,可进行日期的选择。 用户操作确认后通过successCB回调函数返回用户选择的日期,若用户取消选择则通过errorCB回调。 ### 参数: - successCB: *( [PickDatetimeSuccessCallback](http://www.dcloud.io/docs/api/zh_cn/nativeUI.shtml#plus.nativeUI.PickDatetimeSuccessCallback) ) 必选 *日期选择操作成功的回调函数 回调函数中包括Event参数,可通过其date属性(Date类型)获取用户选择的时间。 - errorCB: *( [PickDatetimeErrorCallback](http://www.dcloud.io/docs/api/zh_cn/nativeUI.shtml#plus.nativeUI.PickDatetimeErrorCallback) ) 可选 *日期选择操作取消或失败的回调函数 - options: *( [PickDateOption](http://www.dcloud.io/docs/api/zh_cn/nativeUI.shtml#plus.nativeUI.PickDateOption) ) 可选 *日期选择操作的参数 ### 返回值: void : 无 ### 示例: ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>nativeUI Example</title> <script type="text/javascript"> // H5 plus事件处理 function plusReady(){ } if(window.plus){ plusReady(); }else{ document.addEventListener("plusready",plusReady,false); } // 选择日期 function pickDate(){ plus.nativeUI.pickDate( function(e){ var d=e.date; console.log( "选择的日期:"+d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate() ); },function(e){ console.log( "未选择日期:"+e.message ); }); } </script> </head> <body> 弹出系统日期选择对话框 <br/> <button onclick="pickDate()">选择日期</button> </body> </html> ~~~ # [pickTime]() 弹出系统时间选择对话框 ~~~ void plus.nativeUI.pickTime( successCB, errorCB, options ); ~~~ ### 说明: 创建并弹出系统样式时间选择对话框,可进行时间的选择。 用户操作确认后通过successCB回调函数返回用户选择的时间,若用户取消选择则通过errorCB回调。 ### 参数: - successCB: *( [PickDatetimeSuccessCallback](http://www.dcloud.io/docs/api/zh_cn/nativeUI.shtml#plus.nativeUI.PickDatetimeSuccessCallback) ) 必选 *时间选择操作成功的回调函数 回调函数中包括Event参数,可通过其date属性(Date类型)获取用户选择的时间。 - errorCB: *( [PickDatetimeErrorCallback](http://www.dcloud.io/docs/api/zh_cn/nativeUI.shtml#plus.nativeUI.PickDatetimeErrorCallback) ) 可选 *时间选择操作取消或失败的回调函数 - options: *( [PickTimeOption](http://www.dcloud.io/docs/api/zh_cn/nativeUI.shtml#plus.nativeUI.PickTimeOption) ) 可选 *时间选择操作的参数 ### 返回值: void : 无 ### 示例: ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>nativeUI Example</title> <script type="text/javascript"> // H5 plus事件处理 function plusReady(){ } if(window.plus){ plusReady(); }else{ document.addEventListener("plusready",plusReady,false); } // 选择时间 function pickTime(){ plus.nativeUI.pickTime( function(e){ var d=e.date; console.log( "选择的时间:"+d.getHours()+":"+d.getMinutes() ); },function(e){ console.log( "未选择时间:"+e.message ); }); } </script> </head> <body> 弹出系统时间选择对话框 <br/> <button onclick="pickTime()">选择时间</button> </body> </html> ~~~ # [prompt]() 弹出系统输入对话框 ~~~ void plus.nativeUI.prompt( message, promptCB, title, tip, buttons ); ~~~ ### 说明: 创建并显示系统样式输入对话框,可设置输入对话框的标题、内容、提示输入信息、按钮数目及其文字。 弹出的输入对话框为非阻塞模式,其中包含编辑框供用户输入内容,用户点击输入对话框上的按钮后自动关闭,并通过promptCB回调函数返回用户点击的按钮及输入的内容。 ### 参数: - message: *( String ) 必选 *输入对话框上显示的内容 - promptCB: *( [PromptCallback](http://www.dcloud.io/docs/api/zh_cn/nativeUI.shtml#plus.nativeUI.PromptCallback) ) 可选 *关闭输入对话框的回调函数 回调函数中包括Event参数,可通过其index属性(Number类型)获取用户点击按钮的索引值,通过其value属性(String类型)获取用户输入的内容。 - title: *( String ) 可选 *输入对话框上显示的标题 - tip: *( String ) 可选 *输入对话框上编辑框显示的提示文字 - buttons: *( Array[ String ] ) 可选 *输入对话框上显示的按钮数组 ### 返回值: void : 无 ### 示例: ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>nativeUI Example</title> <script type="text/javascript"> // H5 plus事件处理 function plusReady(){ // 弹出输入对话框 plus.nativeUI.prompt( "Input your name: ", function(e){ console.log( ((e.index==0)?"OK: ":"Cancel")+e.value ); },"nativeUI", "your name", ["OK","Cancel"]); } if(window.plus){ plusReady(); }else{ document.addEventListener("plusready",plusReady,false); } </script> </head> <body> 弹出系统输入对话框 </body> </html> ~~~ # [toast]() 显示自动消失的提示消息 ~~~ void plus.nativeUI.toast( message, options ); ~~~ ### 说明: 创建并显示系统样式提示消息,弹出的提示消息为非阻塞模式,显示指定时间后自动消失。 提示消息显示时间可通过options的duration属性控制,长时间提示消息显示时间约为3.5s,短时间提示消息显示时间约为2s。 ### 参数: - message: *( String ) 必选 *提示消息上显示的文字内容 - options: *( [ToastOption](http://www.dcloud.io/docs/api/zh_cn/nativeUI.shtml#plus.nativeUI.ToastOption) ) 可选 *提示消息的参数 可设置提示消息显示的图标、持续时间、位置等。 ### 返回值: void : 无 ### 示例: ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>nativeUI Example</title> <script type="text/javascript"> // H5 plus事件处理 function plusReady(){ // 显示自动消失的提示消息 plus.nativeUI.toast( "I'am toast information!"); } if(window.plus){ plusReady(); }else{ document.addEventListener("plusready",plusReady,false); } </script> </head> <body> 显示自动消失的提示消息 </body> </html> ~~~ # [ActionButtonStyle]() JSON对象,原生选择按钮框上按钮的样式参数 ### 属性: - title: *(String 类型 )*按钮上显示的文字内容 - style: *(String 类型 )*按钮的样式,可取值“destructive”、“default” “destructive”表示警示按钮样式、“default”表示默认按钮样式,默认为“default”。 ### 平台支持 - Android - ALL (不支持) - iOS - 5.0+ (支持): iOS7及以下系统只仅支持一个按钮为“destructive”样式按钮,iOS8及以上系统可支持多个“destructive”样式按钮。 # [ActionSheetStyle]() JSON对象,原生选择按钮框的样式参数 ### 属性: - title: *(String 类型 )*选择按钮框的标题 - cancel: *(String 类型 )*取消按钮上显示的文字内容 不设置此属性,则不显示取消按钮。 - buttons: *(Array[ [ActionButtonStyle](http://www.dcloud.io/docs/api/zh_cn/nativeUI.shtml#plus.nativeUI.ActionButtonStyle) ] 类型 )*选择框上的按钮,ActionButtonStyle对象数组 # [PickDateOption]() JSON对象,日期选择对话框的参数 ### 属性: - title: *(String 类型 )*日期选择对话框显示的标题 如果未设置标题,则默认显示标题为当前选择的日期。 - date: *(Date 类型 )*日期选择对话框默认显示的日期 如果未设置默认显示的日期,则显示当前的日期。 - minDate: *(Date 类型 )*日期选择对话框可选择的最小日期 Date类型对象,如果未设置可选择的最小日期,则使用系统默认可选择的最小日期值。 - maxDate: *(Date 类型 )*日期选择对话框可选择的最大日期 Date类型对象,如果未设置可选择的最大日期,则使用系统默认可选择的最大日期值。 其值必须大于minDate设置的值,否则使用系统默认可选择的最大日期值。 - popover: *(JSON 类型 )*时间选择对话框弹出指示区域 JSON类型对象,格式如{top:10;left:10;width:200;height:200;},所有值为像素值,其值为相对于容器Webview的位置。 如未设置此值,默认在屏幕居中显示。仅在iPad上有效,其它设备忽略此值。 # [PickTimeOption]() 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上有效,其它设备忽略此值。 # [Waiting]() 系统等待对话框对象 ### 说明: 可通过plus.nativeUI.showWaiting方法创建,用于控制系统样式等待对话框的操作,如关闭、设置标题内容等。 ### 方法: - [setTitle](http://www.dcloud.io/docs/api/zh_cn/nativeUI.shtml#plus.nativeUI.Waiting.setTitle): 设置等待对话框上显示的文字内容 - [close](http://www.dcloud.io/docs/api/zh_cn/nativeUI.shtml#plus.nativeUI.Waiting.close): 关闭显示的系统等待对话框 ### 事件: - [onclose](http://www.dcloud.io/docs/api/zh_cn/nativeUI.shtml#plus.nativeUI.Waiting.onclose): 等待对话框关闭事件 # [setTitle]() 设置等待对话框上显示的文字内容 ~~~ wobj.setTitle( title ); ~~~ ### 说明: 在调用plus.nativeUI.showWaiting方法时设置等待对话框初始显示的文字内容,显示后可通过此方法动态修改等待对话框上显示的文字,设置后文字内容将立即更新。 ### 参数: - title: *( String ) 必选 *要设置的文本信息 ### 返回值: void : 无 ### 示例: ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>nativeUI Example</title> <script type="text/javascript"> // H5 plus事件处理 function plusReady(){ // 弹出系统等待对话框 var w = plus.nativeUI.showWaiting( "等待中..." ); // 2秒后更新 setTimeout( function(){ w.setTitle( "正在更新" ); }, 2000 ); } if(window.plus){ plusReady(); }else{ document.addEventListener("plusready",plusReady,false); } </script> </head> <body> 显示系统等待对话框<br/> 设置等待对话框上显示的文字内容 </body> </html> ~~~ # [close]() 关闭显示的系统等待对话框 ~~~ wobj.close(); ~~~ ### 说明: 调用plus.nativeUI.showWaiting方法创建并显示系统等待界后,可通过其close方法将原生等待控件关闭。 一个系统等待对话框只能关闭一次,多次调用将无任何作用。 ### 参数: 无 ### 返回值: void : 无 ### 示例: ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>nativeUI Example</title> <script type="text/javascript"> // H5 plus事件处理 function plusReady(){ // 弹出系统等待对话框 var w = plus.nativeUI.showWaiting( "等待中..." ); // 2秒后关闭 setTimeout( function(){ w.close(); }, 2000 ); } if(window.plus){ plusReady(); }else{ document.addEventListener("plusready",plusReady,false); } </script> </head> <body> 显示系统等待对话框<br/> 关闭显示的系统等待对话框 </body> </html> ~~~ # [onclose]() 等待对话框关闭事件 ~~~ wobj.onclose = function() { console.log( "Waiting closed!" ); }; ~~~ ### 说明: function 类型 等待框关闭时触发,当调用close方法或用户点击返回按钮导致等待框关闭时触发。 ### 示例: ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>nativeUI Example</title> <script type="text/javascript"> // H5 plus事件处理 function plusReady(){ // 弹出系统等待对话框 var w = plus.nativeUI.showWaiting( "等待中..." ); // 关闭事件 w.onclose = function() { console.log( "Waiting onclose!" ); } // 2秒后关闭 setTimeout( function(){ w.close(); }, 2000 ); } if(window.plus){ plusReady(); }else{ document.addEventListener("plusready",plusReady,false); } </script> </head> <body> 显示系统等待对话框<br/> 关闭显示的系统等待对话框 </body> </html> ~~~ # [WaitingOption]() JSON对象,原生等待对话框的参数 ### 属性: - width: *(String 类型 )*等待框背景区域的宽度 值支持像素值("500px")或百分比("50%"),百分比相对于屏幕的宽计算,如果不设置则根据内容自动计算合适的宽度。 - height: *(String 类型 )*等待框背景区域的高度 值支持像素绝对值("500px")或百分比("50%"),如果不设置则根据内容自动计算合适的高度。 - color: *(String 类型 )*等待框中文字的颜色 颜色值支持(参考CSS颜色规范):颜色名称(参考CSS Color Names)/十六进制值/rgb值/rgba值,默认值为白色。 - textalign: *(String 类型 )*等待对话框中标题文字的水平对齐方式 对齐方式可选值包括:"left":水平居左对齐显示,"center":水平居中对齐显示,"right":水平居右对齐显示。默认值为水平居中对齐显示,即"center"。 - padding: *(String 类型 )*等待对话框的内边距 值支持像素值("10px")和百分比("5%"),百分比相对于屏幕的宽计算,默认值为"3%"。 - background: *(String 类型 )*等待对话框显示区域的背景色 背景色的值支持(参考CSS颜色规范):颜色名称(参考CSS Color Names)/十六进制值/rgb值/rgba值,默认值为rgba(0,0,0,0.8)。 - style: *(String 类型 )*等待对话框样式 可取值"black"、"white",black表示等待框为黑色雪花样式,通常在背景主色为浅色时使用;white表示等待框为白色雪花样式,通常在背景主色为深色时使用。 仅在iOS平台有效,其它平台忽略此值,未设置时默认值为white。 ### 平台支持 - Android - 2.3+ (不支持): 忽略此属性值。 - iOS - 4.5+ (支持): 支持"black"、"white"两种样式。 - modal: *(Boolen 类型 )*等待框是否模态显示 模态显示时用户不可操作直到等待对话框关闭,否则用户在等待对话框显示时也可操作下面的内容,未设置时默认为true。 - round: *(Number 类型 )*等待框显示区域的圆角 值支持像素值("10px"),未设置时使用默认值"10px"。 - padlock: *(Boolen 类型 )*点击等待显示区域是否自动关闭 true表示点击等待对话框显示区域时自动关闭,false则不关闭,未设置时默认值为false。 # [ToastOption]() JSON对象,系统提示消息框要设置的参数 ### 属性: - icon: *(String 类型 )*提示消息框上显示的图标 - duration: *(String 类型 )*提示消息框显示的时间 可选值为"long"、"short",值为"long"时显示时间约为3.5s,值为"short"时显示时间约为2s,未设置时默认值为"short"。 - align: *(String 类型 )*提示消息框在屏幕中的水平位置 可选值为"left"、"center"、"right",分别为水平居左、居中、居右,未设置时默认值为"center"。 - verticalAlign: *(String 类型 )*提示消息在屏幕中的垂直位置 可选值为"top"、"center"、"bottom",分别为垂直居顶、居中、居底,未设置时默认值为"bottom"。 # [ActionSheetCallback]() 系统选择按钮框的回调函数 ~~~ void onActioned( Event event ){ // actionsheet handled code. } ~~~ ### 参数: - event: *( Event ) 必选 *用户操作选择按钮框关闭后返回的数据 可通过event的index属性(Number类型)获取用户关闭时点击按钮的索引值,索引值从0开始; 0表示用户点击取消按钮,大于0值表示用户点击ActionSheetStyle中buttons属性定义的按钮,索引值从1开始(即1表示点击buttons中定义的第一个按钮)。 ### 返回值: void : 无 ### 平台支持: - Android - ALL (不支持) - iOS - 4.3+ (支持): 用户只能通过点击选择按钮上的按钮进行关闭。 ### 示例: ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>nativeUI Example</title> <script type="text/javascript"> // H5 plus事件处理 function plusReady(){ // 弹出系统选择按钮框 var actionbuttons=[{title:"不同意",style:"destructive"},{title:"test1"},{title:"test2"},{title:"3"}]; var actionstyle={title:"Plus is ready!",cancel:"取消",buttons:actionbuttons}; plus.nativeUI.actionSheet( actionstyle, function(e){ if(e.index>0){ console.log( "User pressed: "+actionbuttons[e.index-1].title ); }else{ console.log( "User pressed 取消" ); } } ); } if(window.plus){ plusReady(); }else{ document.addEventListener("plusready",plusReady,false); } </script> </head> <body> 弹出系统选择按钮框 </body> </html> ~~~ # [AlertCallback]() 系统提示框确认的回调函数 ~~~ void onAlerted(){ // Alert handled code. } ~~~ ### 参数: 无 ### 返回值: void : 无 ### 平台支持: - Android - 2.2+ (支持): 用户点击设备“返回”按键导致提示对话框关闭,也会触发此回调函数。 - iOS - 4.3+ (支持): 用户只能通过点击提示对话框上的按钮进行关闭。 # [ConfirmCallback]() 关闭确认对话框的回调函数 ~~~ void onConfirmed( Event event ) { // Confirm handled code. var index=event.index; // 用户关闭确认对话框点击按钮的索引值 } ~~~ ### 参数: - event: *( Event ) 必选 *用户操作确认对话框关闭后返回的数据 可通过event的index属性(Number类型)获取用户关闭确认对话框点击按钮的索引值,索引值从0开始; ### 返回值: void : 无 ### 平台支持: - Android - 2.2+ (支持): 用户点击设备“返回”按键导致确认对话框关闭,则回调函数中event的index属性值为-1。 - iOS - 4.3+ (支持): 用户只能通过点击确认对话框上的按钮进行关闭。 # [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 - 2.2+ (支持): 用户点击设备“返回”按键导致输入对话框关闭,则回调函数中event的index属性值为-1,value值为空字符串。 - iOS - 4.3+ (支持): 用户只能通过点击输入对话框上的按钮进行关闭。 # [PickDatetimeSuccessCallback]() 选择日期或时间操作成功的回调函数 ~~~ function void onPickSuccess( Event event ) { // Date picked code. var date = event.date;// 用户选择的日期或时间 } ~~~ ### 参数: - event: *( Event ) 必选 *用户完成选择日期或时间后返回的数据 可通过event的date属性获取选择的日期或时间值。 若调用的是日期选择操作则仅年、月、日信息有效,若调用的是时间选择操作则仅时、分信息有效。 ### 返回值: void : 无 # [PickDatetimeErrorCallback]() 选择日期或时间操作取消或失败的回调函数 ~~~ function void onPickError( Exception error ) { // Date picked error. alert( error.message ); } ~~~ ### 参数: - error: *( Exception ) 必选 *用户选择操作失败信息 ### 返回值: void : 无