NativeUI · Html5+參考

# [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 : 無