HTML5+規範：nativeUI(管理系統原生界面)

時間  2019-12-10
標籤 html5 html 規範 nativeui 管理 系統 原生 界面 欄目 HTML5 简体版
原文   原文鏈接

 nativeUI管理系統原生界面，可用於彈出系統原生提示對話框窗口、時間日期選擇對話框、等待對話框等。javascript

一、方法

1.一、actionSheet: 彈出系統選擇按鈕框

     void plus.nativeUI.actionSheet( actionsheetStyle, actionsheetCallback ); html

說明：從底部動畫彈出系統樣式選擇按鈕框，可設置選擇框的標題、按鈕文字等。 彈出的提示框爲非阻塞模式，用戶點擊選擇框上的按鈕後關閉，並經過actionsheetCallback回調函數通知用戶選擇的按鈕。java

參數：web

actionsheetStyle: ( ActionSheetStyle ) 必選 選擇按鈕框顯示的樣式數組

actionsheetCallback: ( ActionSheetCallback ) 可選 選擇按鈕框關閉後的回調函數函數

返回值：void : 無字體

示例：動畫

[html] view plain copy print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>nativeUI Example</title>  
  6. <script type="text/javascript">  
  7. // H5 plus事件處理  
  8. function plusReady(){  
  9. // 彈出系統選擇按鈕框  
  10. plus.nativeUI.actionSheet( {title:"Plus is ready!",cancel:"取消",buttons:[{title:"1"},{title:"2"}]}, function(e){  
  11. console.log( "User pressed: "+e.index );  
  12. } );  
  13. }  
  14. if(window.plus){  
  15. plusReady();  
  16. }else{  
  17. document.addEventListener("plusready",plusReady,false);  
  18. }  
  19. </script>  
  20. </head>  
  21. <body>  
  22. 彈出系統選擇按鈕框  
  23. </body>  
  24. </html>  
<!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>

 

1.二、alert: 彈出系統提示對話框

void plus.nativeUI.alert( message, alertCB, title, buttonCapture ); 編碼

說明：建立並顯示系統樣式提示對話框，可設置提示對話框的標題、內容、按鈕文字等。 彈出的提示對話框爲非阻塞模式，用戶點擊提示對話框上的按鈕後關閉，並經過alertCB回調函數通知對話框已關閉。spa

參數：

message: ( String ) 必選 提示對話框上顯示的內容

alertCB: ( AlertCallback ) 可選 提示對話框上關閉後的回調函數

title: ( String ) 可選 提示對話框上顯示的標題

buttonCapture: ( String ) 必選 提示對話框上按鈕顯示的內容

返回值：void : 無

示例：

[html] view plain copy print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>nativeUI Example</title>  
  6. <script type="text/javascript">  
  7. // H5 plus事件處理  
  8. function plusReady(){  
  9. // 彈出系統提示對話框  
  10. plus.nativeUI.alert( "Plus is ready!", function(){  
  11. console.log( "User pressed!" );  
  12. }, "nativeUI", "OK" );  
  13. }  
  14. if(window.plus){  
  15. plusReady();  
  16. }else{  
  17. document.addEventListener("plusready",plusReady,false);  
  18. }  
  19. </script>  
  20. </head>  
  21. <body>  
  22. 彈出系統提示對話框  
  23. </body>  
  24. </html>  
<!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>

 

 

1.三、confirm: 彈出系統確認對話框

      void plus.nativeUI.confirm( message, confirmCB, title, buttons );

說明：建立並顯示系統樣式確認對話框，可設置確認對話框的標題、內容、按鈕數目及其文字。 彈出的確認對話框爲非阻塞模式，用戶點擊確認對話框上的按鈕後關閉，並經過confirmCB回調函數通知用戶點擊的按鈕索引值。

參數：

message: ( String ) 必選 確認對話框上顯示的內容

confirmCB: ( ConfirmCallback ) 可選 確認對話框關閉後的回調函數，回調函數中包括Event參數，可經過其index屬性（Number類型）獲取用戶點擊按鈕的索引值。

title: ( String ) 可選 確認對話框上顯示的標題

buttons: ( Array[ String ] ) 可選 確認對話框上顯示的按鈕。字符串數組，每項對應在確認對話框上顯示一個按鈕，用戶點擊後經過confirmCB返回用戶點擊按鈕的在數組中的索引值。

返回值：void : 無

平臺支持：Android - 2.2+ (支持): 對話框上最多隻能支持三個按鈕，buttons參數超過三個的值則忽略。iOS - 4.5+ (支持)

示例：

[html] view plain copy print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>nativeUI Example</title>  
  6. <script type="text/javascript">  
  7. // H5 plus事件處理  
  8. function plusReady(){  
  9. // 彈出提示信息對話框  
  10. plus.nativeUI.confirm( "Are you sure ready?", function(e){  
  11. console.log( (e.index==0)?"Yes!":"No!" );  
  12. }, "nativeUI", ["Yes","No"] );  
  13. }  
  14. if(window.plus){  
  15. plusReady();  
  16. }else{  
  17. document.addEventListener("plusready",plusReady,false);  
  18. }  
  19. </script>  
  20. </head>  
  21. <body>  
  22. 彈出系統確認對話框  
  23. </body>  
  24. </html>  
<!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>

 

1.四、closeWaiting: 關閉系統等待對話框

         void plus.nativeUI.closeWaiting();

說明：關閉已經顯示的全部系統樣式等待對話框，觸發Waiting對象的onclose事件。

返回值：void : 無

示例：

[html] view plain copy print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>nativeUI Example</title>  
  6. <script type="text/javascript">  
  7. // H5 plus事件處理  
  8. function plusReady(){  
  9. // 彈出系統等待對話框  
  10. plus.nativeUI.showWaiting( "等待中..." );  
  11. setTimeout( function(){  
  12. plus.nativeUI.closeWaiting();  
  13. }, 5000 );  
  14. }  
  15. if(window.plus){  
  16. plusReady();  
  17. }else{  
  18. document.addEventListener("plusready",plusReady,false);  
  19. }  
  20. </script>  
  21. </head>  
  22. <body>  
  23. 顯示系統等待對話框  
  24. 5S後自動關閉  
  25. </body>  
  26. </html>  
<!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>

 

1.五、showWaiting: 顯示系統等待對話框

        Waiting plus.nativeUI.showWaiting( title, options );

說明：建立並顯示系統樣式等待對話框，並返回等待對話框對象Waiting，顯示後需調用其close方法進行關閉。

參數：

title: ( String ) 可選 等待對話框上顯示的提示標題內容

options: ( WaitingOptions ) 可選 等待對話框的顯示參數，可設置等待對話框的寬、高、邊距、背景等樣式。

返回值：Waiting : Waiting對象

示例：

[html] view plain copy print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>nativeUI Example</title>  
  6. <script type="text/javascript">  
  7. // H5 plus事件處理  
  8. function plusReady(){  
  9. // 彈出系統等待對話框  
  10. var w = plus.nativeUI.showWaiting( "等待中..." );  
  11. }  
  12. if(window.plus){  
  13. plusReady();  
  14. }else{  
  15. document.addEventListener("plusready",plusReady,false);  
  16. }  
  17. </script>  
  18. </head>  
  19. <body>  
  20. 顯示系統等待對話框  
  21. </body>  
  22. </html>  
<!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>

 

1.六、pickDate: 彈出系統日期選擇對話框

        void plus.nativeUI.pickDate( successCB, errorCB, options );

說明：建立並顯示系統樣式日期選擇對話框，可進行日期的選擇。 用戶操做確認後經過successCB回調函數返回用戶選擇的日期，若用戶取消選擇則經過errorCB回調。

參數：

successCB: ( PickDatetimeSuccessCallback ) 必選 日期選擇操做成功的回調函數。回調函數中包括Event參數，可經過其date屬性（Date類型）獲取用戶選擇的時間。

errorCB: ( PickDatetimeErrorCallback ) 可選 日期選擇操做取消或失敗的回調函數

options: ( PickDateOption ) 可選 日期選擇操做的參數

返回值：void : 無

示例：

[html] view plain copy print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>nativeUI Example</title>  
  6. <script type="text/javascript">  
  7. // H5 plus事件處理  
  8. function plusReady(){  
  9. }  
  10. if(window.plus){  
  11. plusReady();  
  12. }else{  
  13. document.addEventListener("plusready",plusReady,false);  
  14. }  
  15. // 選擇日期  
  16. function pickDate(){  
  17. plus.nativeUI.pickDate( function(e){  
  18. var d=e.date;  
  19. console.log( "選擇的日期："+d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate() );  
  20. },function(e){  
  21. console.log( "未選擇日期："+e.message );  
  22. });  
  23. }  
  24. </script>  
  25. </head>  
  26. <body>  
  27. 彈出系統日期選擇對話框  
  28. <br/>  
  29. <button onclick="pickDate()">選擇日期</button>  
  30. </body>  
  31. </html>  
<!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>

 

 

1.七、pickTime: 彈出系統時間選擇對話框

      void plus.nativeUI.pickTime( successCB, errorCB, options );

說明：建立並彈出系統樣式時間選擇對話框，可進行時間的選擇。 用戶操做確認後經過successCB回調函數返回用戶選擇的時間，若用戶取消選擇則經過errorCB回調。

參數：

successCB: ( PickDatetimeSuccessCallback ) 必選 時間選擇操做成功的回調函數。回調函數中包括Event參數，可經過其date屬性（Date類型）獲取用戶選擇的時間。

errorCB: ( PickDatetimeErrorCallback ) 可選 時間選擇操做取消或失敗的回調函數

options: ( PickTimeOption ) 可選 時間選擇操做的參數

返回值：void : 無

示例：

[html] view plain copy print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>nativeUI Example</title>  
  6. <script type="text/javascript">  
  7. // H5 plus事件處理  
  8. function plusReady(){  
  9. }  
  10. if(window.plus){  
  11. plusReady();  
  12. }else{  
  13. document.addEventListener("plusready",plusReady,false);  
  14. }  
  15. // 選擇時間  
  16. function pickTime(){  
  17. plus.nativeUI.pickTime( function(e){  
  18. var d=e.date;  
  19. console.log( "選擇的時間："+d.getHours()+":"+d.getMinutes() );  
  20. },function(e){  
  21. console.log( "未選擇時間："+e.message );  
  22. });  
  23. }  
  24. </script>  
  25. </head>  
  26. <body>  
  27. 彈出系統時間選擇對話框  
  28. <br/>  
  29. <button onclick="pickTime()">選擇時間</button>  
  30. </body>  
  31. </html>  
<!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>

 

1.八、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 : 無

示例：

[html] view plain copy print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>nativeUI Example</title>  
  6. <script type="text/javascript">  
  7. // H5 plus事件處理  
  8. function plusReady(){  
  9. // 彈出輸入對話框  
  10. plus.nativeUI.prompt( "Input your name: ", function(e){  
  11. console.log( ((e.index==0)?"OK: ":"Cancel")+e.value );  
  12. },"nativeUI", "your name", ["OK","Cancel"]);  
  13. }  
  14. if(window.plus){  
  15. plusReady();  
  16. }else{  
  17. document.addEventListener("plusready",plusReady,false);  
  18. }  
  19. </script>  
  20. </head>  
  21. <body>  
  22. 彈出系統輸入對話框  
  23. </body>  
  24. </html>  
<!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>

 

 

1.九、toast: 顯示自動消失的提示消息

         void plus.nativeUI.toast( message, options );

說明：建立並顯示系統樣式提示消息，彈出的提示消息爲非阻塞模式，顯示指定時間後自動消失。 提示消息顯示時間可經過options的duration屬性控制，長時間提示消息顯示時間約爲3.5s，短期提示消息顯示時間約爲2s。

 

參數：

message: ( String ) 必選 提示消息上顯示的文字內容

options: ( ToastOption ) 可選 提示消息的參數。可設置提示消息顯示的圖標、持續時間、位置等。

返回值：void : 無

示例：

[html] view plain copy print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>nativeUI Example</title>  
  6. <script type="text/javascript">  
  7. // H5 plus事件處理  
  8. function plusReady(){  
  9. // 顯示自動消失的提示消息  
  10. plus.nativeUI.toast( "I'am toast information!");  
  11. }  
  12. if(window.plus){  
  13. plusReady();  
  14. }else{  
  15. document.addEventListener("plusready",plusReady,false);  
  16. }  
  17. </script>  
  18. </head>  
  19. <body>  
  20. 顯示自動消失的提示消息  
  21. </body>  
<!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>

 

二、對象

2.一、ActionButtonStyle: JSON對象，原生選擇按鈕框上按鈕的樣式參數

屬性：

title: (String 類型 )按鈕上顯示的文字內容

style: (String 類型 )按鈕的樣式，可取值「destructive」、「default」。「destructive」表示警示按鈕樣式、「default」表示默認按鈕樣式，默認爲「default」。

平臺支持：Android - ALL (不支持)，iOS - 5.0+ (支持): iOS7及如下系統只僅支持一個按鈕爲「destructive」樣式按鈕，iOS8及以上系統可支持多個「destructive」樣式按鈕。

示例：

[html] view plain copy print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>nativeUI Example</title>  
  6. <script type="text/javascript">  
  7. // H5 plus事件處理  
  8. function plusReady(){  
  9. // 彈出系統選擇按鈕框  
  10. var actionbuttons=[{title:"不一樣意",style:"destructive"},{title:"1"},{title:"2"},{title:"3"}];  
  11. var actionstyle={title:"Plus is ready!",cancel:"取消",buttons:actionbuttons};  
  12. plus.nativeUI.actionSheet( {title:"Plus is ready!",cancel:"取消",actionstyle, function(e){  
  13. console.log( "User pressed: "+e.index );  
  14. } );  
  15. }  
  16. if(window.plus){  
  17. plusReady();  
  18. }else{  
  19. document.addEventListener("plusready",plusReady,false);  
  20. }  
  21. </script>  
  22. </head>  
  23. <body>  
  24. 彈出系統選擇按鈕框  
  25. </body>  
  26. </html>  
<!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:"1"},{title:"2"},{title:"3"}];
var actionstyle={title:"Plus is ready!",cancel:"取消",buttons:actionbuttons};
plus.nativeUI.actionSheet( {title:"Plus is ready!",cancel:"取消",actionstyle, function(e){
console.log( "User pressed: "+e.index );
} );
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
</script>
</head>
<body>
彈出系統選擇按鈕框
</body>
</html>

 

2.二、ActionSheetStyle: JSON對象，原生選擇按鈕框的樣式參數

屬性：

title: (String 類型 )選擇按鈕框的標題

cancel: (String 類型 )取消按鈕上顯示的文字內容，不設置此屬性，則不顯示取消按鈕。

buttons: (Array[ ActionButtonStyle ] 類型 )選擇框上的按鈕，ActionButtonStyle對象數組

示例：

[html] view plain copy print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>nativeUI Example</title>  
  6. <script type="text/javascript">  
  7. // H5 plus事件處理  
  8. function plusReady(){  
  9. // 彈出系統選擇按鈕框  
  10. var actionbuttons=[{title:"不一樣意",style:"destructive"},{title:"1"},{title:"2"},{title:"3"}];  
  11. var actionstyle={title:"Plus is ready!",cancel:"取消",buttons:actionbuttons};  
  12. plus.nativeUI.actionSheet( actionstyle, function(e){  
  13. console.log( "User pressed: "+e.index );  
  14. } );  
  15. }  
  16. if(window.plus){  
  17. plusReady();  
  18. }else{  
  19. document.addEventListener("plusready",plusReady,false);  
  20. }  
  21. </script>  
  22. </head>  
  23. <body>  
  24. 彈出系統選擇按鈕框  
  25. </body>  
  26. </html>  
<!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:"1"},{title:"2"},{title:"3"}];
var actionstyle={title:"Plus is ready!",cancel:"取消",buttons:actionbuttons};
plus.nativeUI.actionSheet( actionstyle, function(e){
console.log( "User pressed: "+e.index );
} );
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
</script>
</head>
<body>
彈出系統選擇按鈕框
</body>
</html>

 

 

2.三、PickDateOption: JSON對象，日期選擇對話框的參數

屬性：

（1）、title: (String 類型 )日期選擇對話框顯示的標題，若是未設置標題，則默認顯示標題爲當前選擇的日期。

[html] view plain copy print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>nativeUI Example</title>  
  6. <script type="text/javascript">  
  7. // H5 plus事件處理  
  8. function plusReady(){  
  9. }  
  10. if(window.plus){  
  11. plusReady();  
  12. }else{  
  13. document.addEventListener("plusready",plusReady,false);  
  14. }  
  15. // 選擇日期  
  16. function pickDate(){  
  17. plus.nativeUI.pickDate( function(e){  
  18. var d=e.date;  
  19. console.log( "選擇的日期："+d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate() );  
  20. },function(e){  
  21. console.log( "未選擇日期："+e.message );  
  22. },{title:"請選擇日期："});  
  23. }  
  24. </script>  
  25. </head>  
  26. <body>  
  27. 彈出系統日期選擇對話框  
  28. <br/>  
  29. <button onclick="pickDate()">選擇日期</button>  
  30. <br/>  
  31. 設置標題爲「請選擇日期：」  
  32. </body>  
  33. </html>  
<!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 );
},{title:"請選擇日期："});
}
</script>
</head>
<body>
彈出系統日期選擇對話框
<br/>
<button onclick="pickDate()">選擇日期</button>
<br/>
設置標題爲「請選擇日期：」
</body>
</html>

 

（2）、date: (Date 類型 )日期選擇對話框默認顯示的日期，若是未設置默認顯示的日期，則顯示當前的日期。

[html] view plain copy print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>nativeUI Example</title>  
  6. <script type="text/javascript">  
  7. // H5 plus事件處理  
  8. function plusReady(){  
  9. }  
  10. if(window.plus){  
  11. plusReady();  
  12. }else{  
  13. document.addEventListener("plusready",plusReady,false);  
  14. }  
  15. // 選擇日期  
  16. function pickDate(){  
  17. var d=new Date();  
  18. d.setFullYear(2008,7,8);  
  19. plus.nativeUI.pickDate( function(e){  
  20. var d=e.date;  
  21. console.log( "選擇的日期："+d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate() );  
  22. },function(e){  
  23. console.log( "未選擇日期："+e.message );  
  24. },{date:d});  
  25. }  
  26. </script>  
  27. </head>  
  28. <body>  
  29. 彈出系統日期選擇對話框  
  30. <br/>  
  31. <button onclick="pickDate()">選擇日期</button>  
  32. <br/>  
  33. 設置默認日期爲「2008-08-08」  
  34. </body>  
  35. </html>  
<!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(){
var d=new Date();
d.setFullYear(2008,7,8);
plus.nativeUI.pickDate( function(e){
var d=e.date;
console.log( "選擇的日期："+d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate() );
},function(e){
console.log( "未選擇日期："+e.message );
},{date:d});
}
</script>
</head>
<body>
彈出系統日期選擇對話框
<br/>
<button onclick="pickDate()">選擇日期</button>
<br/>
設置默認日期爲「2008-08-08」
</body>
</html>

 

（3）、minDate: (Date 類型 )日期選擇對話框可選擇的最小日期，Date類型對象，若是未設置可選擇的最小日期，則使用系統默承認選擇的最小日期值。

[html] view plain copy print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>nativeUI Example</title>  
  6. <script type="text/javascript">  
  7. // H5 plus事件處理  
  8. function plusReady(){  
  9. }  
  10. if(window.plus){  
  11. plusReady();  
  12. }else{  
  13. document.addEventListener("plusready",plusReady,false);  
  14. }  
  15. // 選擇日期  
  16. function pickDate(){  
  17. var d=new Date();  
  18. d.setFullYear(2010,0,1);  
  19. plus.nativeUI.pickDate( function(e){  
  20. var d=e.date;  
  21. console.log( "選擇的日期："+d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate() );  
  22. },function(e){  
  23. console.log( "未選擇日期："+e.message );  
  24. },{minDate:d});  
  25. }  
  26. </script>  
  27. </head>  
  28. <body>  
  29. 彈出系統日期選擇對話框  
  30. <br/>  
  31. <button onclick="pickDate()">選擇日期</button>  
  32. <br/>  
  33. 設置最小可選日期爲「2010-01-01」  
  34. </body>  
  35. </html>  
<!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(){
var d=new Date();
d.setFullYear(2010,0,1);
plus.nativeUI.pickDate( function(e){
var d=e.date;
console.log( "選擇的日期："+d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate() );
},function(e){
console.log( "未選擇日期："+e.message );
},{minDate:d});
}
</script>
</head>
<body>
彈出系統日期選擇對話框
<br/>
<button onclick="pickDate()">選擇日期</button>
<br/>
設置最小可選日期爲「2010-01-01」
</body>
</html>

 

（4）、maxDate: (Date 類型 )日期選擇對話框可選擇的最大日期，Date類型對象，若是未設置可選擇的最大日期，則使用系統默承認選擇的最大日期值。 其值必須大於minDate設置的值，不然使用系統默承認選擇的最大日期值。

[html] view plain copy print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>nativeUI Example</title>  
  6. <script type="text/javascript">  
  7. // H5 plus事件處理  
  8. function plusReady(){  
  9. }  
  10. if(window.plus){  
  11. plusReady();  
  12. }else{  
  13. document.addEventListener("plusready",plusReady,false);  
  14. }  
  15. // 選擇日期  
  16. function pickDate(){  
  17. var d=new Date();  
  18. d.setFullYear(2014,11,31);  
  19. plus.nativeUI.pickDate( function(e){  
  20. var d=e.date;  
  21. console.log( "選擇的日期："+d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate() );  
  22. },function(e){  
  23. console.log( "未選擇日期："+e.message );  
  24. },{maxDate:d});  
  25. }  
  26. </script>  
  27. </head>  
  28. <body>  
  29. 彈出系統日期選擇對話框  
  30. <br/>  
  31. <button onclick="pickDate()">選擇日期</button>  
  32. <br/>  
  33. 設置最大可選日期爲「2014-12-31」  
  34. </body>  
  35. </html>  
<!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(){
var d=new Date();
d.setFullYear(2014,11,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 );
},{maxDate:d});
}
</script>
</head>
<body>
彈出系統日期選擇對話框
<br/>
<button onclick="pickDate()">選擇日期</button>
<br/>
設置最大可選日期爲「2014-12-31」
</body>
</html>

 

（5）、popover: (JSON 類型 )時間選擇對話框彈出指示區域，JSON類型對象，格式如{top:10;left:10;width:200;height:200;}，全部值爲像素值，其值爲相對於容器Webview的位置。 如未設置此值，默認在屏幕居中顯示。僅在iPad上有效，其它設備忽略此值。

2.四、PickTimeOption: JSON對象，時間選擇對話框的參數

屬性：

（1）、time: (Date 類型 )時間選擇對話框默認顯示的時間，若是未設置標題，則默認顯示標題爲當前選擇的時間。

 

[html] view plain copy print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>nativeUI Example</title>  
  6. <script type="text/javascript">  
  7. // H5 plus事件處理  
  8. function plusReady(){  
  9. }  
  10. if(window.plus){  
  11. plusReady();  
  12. }else{  
  13. document.addEventListener("plusready",plusReady,false);  
  14. }  
  15. // 選擇時間  
  16. function pickTime(){  
  17. var t=new Date();  
  18. t.setHours(6,0);  
  19. plus.nativeUI.pickTime( function(e){  
  20. var d=e.date;  
  21. console.log( "選擇的時間："+d.getHours()+":"+d.getMinutes() );  
  22. },function(e){  
  23. console.log( "未選擇時間："+e.message );  
  24. },{time:t});  
  25. }  
  26. </script>  
  27. </head>  
  28. <body>  
  29. 彈出系統時間選擇對話框  
  30. <br/>  
  31. <button onclick="pickTime()">選擇時間</button>  
  32. <br/>  
  33. 設置默認顯示時間爲早上6點  
  34. </body>  
  35. </html>  
<!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(){
var t=new Date();
t.setHours(6,0);
plus.nativeUI.pickTime( function(e){
var d=e.date;
console.log( "選擇的時間："+d.getHours()+":"+d.getMinutes() );
},function(e){
console.log( "未選擇時間："+e.message );
},{time:t});
}
</script>
</head>
<body>
彈出系統時間選擇對話框
<br/>
<button onclick="pickTime()">選擇時間</button>
<br/>
設置默認顯示時間爲早上6點
</body>
</html>

 

（2）、title: (String 類型 )時間選擇對話框顯示的標題，若是未設置標題，則默認顯示標題爲當前選擇的時間。

[html] view plain copy print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>nativeUI Example</title>  
  6. <script type="text/javascript">  
  7. // H5 plus事件處理  
  8. function plusReady(){  
  9. }  
  10. if(window.plus){  
  11. plusReady();  
  12. }else{  
  13. document.addEventListener("plusready",plusReady,false);  
  14. }  
  15. // 選擇時間  
  16. function pickTime(){  
  17. plus.nativeUI.pickTime( function(e){  
  18. var d=e.date;  
  19. console.log( "選擇的時間："+d.getHours()+":"+d.getMinutes() );  
  20. },function(e){  
  21. console.log( "未選擇時間："+e.message );  
  22. },{title:"請選擇時間："});  
  23. }  
  24. </script>  
  25. </head>  
  26. <body>  
  27. 彈出系統時間選擇對話框  
  28. <br/>  
  29. <button onclick="pickTime()">選擇時間</button>  
  30. <br/>  
  31. 設置標題爲「請選擇時間：」  
  32. </body>  
  33. </html>  
<!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 );
},{title:"請選擇時間："});
}
</script>
</head>
<body>
彈出系統時間選擇對話框
<br/>
<button onclick="pickTime()">選擇時間</button>
<br/>
設置標題爲「請選擇時間：」
</body>
</html>

 

（3）、is24Hour: (Boolean 類型 )是否24小時制模式true表示使用24小時制模式顯示，fale表示使用12小時制模式顯示，默認值爲true。

[html] view plain copy print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>nativeUI Example</title>  
  6. <script type="text/javascript">  
  7. // H5 plus事件處理  
  8. function plusReady(){  
  9. }  
  10. if(window.plus){  
  11. plusReady();  
  12. }else{  
  13. document.addEventListener("plusready",plusReady,false);  
  14. }  
  15. // 選擇時間  
  16. function pickTime(){  
  17. plus.nativeUI.pickTime( function(e){  
  18. var d=e.date;  
  19. console.log( "選擇的時間："+d.getHours()+":"+d.getMinutes() );  
  20. },function(e){  
  21. console.log( "未選擇時間："+e.message );  
  22. },{is24Hour:false});  
  23. }  
  24. </script>  
  25. </head>  
  26. <body>  
  27. 彈出系統時間選擇對話框  
  28. <br/>  
  29. <button onclick="pickTime()">選擇時間</button>  
  30. <br/>  
  31. 設置12小時制顯示  
  32. </body>  
  33. </html>  
<!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 );
},{is24Hour:false});
}
</script>
</head>
<body>
彈出系統時間選擇對話框
<br/>
<button onclick="pickTime()">選擇時間</button>
<br/>
設置12小時制顯示
</body>
</html>

 

（4）、popover: (JSON 類型 )日期選擇對話框彈出指示區域。JSON類型對象，格式如{top:10;left:10;width:200;height:200;}，全部值爲像素值，其值相對於容器webview的位置。 如未設置此值，默認在屏幕居中顯示。僅在iPad上有效，其它設備忽略此值。

2.五、Waiting: 系統等待對話框對象

說明：可經過plus.nativeUI.showWaiting方法建立，用於控制系統樣式等待對話框的操做，如關閉、設置標題內容等。

2.5.一、方法

（1）、setTitle: 設置等待對話框上顯示的文字內容

                wobj.setTitle( title );

說明：在調用plus.nativeUI.showWaiting方法時設置等待對話框初始顯示的文字內容，顯示後可經過此方法動態修改等待對話框上顯示的文字，設置後文字內容將當即更新。

 

參數：title: ( String ) 必選 要設置的文本信息

返回值：void : 無

示例：

[html] view plain copy print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>nativeUI Example</title>  
  6. <script type="text/javascript">  
  7. // H5 plus事件處理  
  8. function plusReady(){  
  9. // 彈出系統等待對話框  
  10. var w = plus.nativeUI.showWaiting( "等待中..." );  
  11. // 2秒後更新  
  12. setTimeout( function(){  
  13. w.setTitle( "正在更新" );  
  14. }, 2000 );  
  15. }  
  16. if(window.plus){  
  17. plusReady();  
  18. }else{  
  19. document.addEventListener("plusready",plusReady,false);  
  20. }  
  21. </script>  
  22. </head>  
  23. <body>  
  24. 顯示系統等待對話框<br/>  
  25. 設置等待對話框上顯示的文字內容  
  26. </body>  
  27. </html>  
<!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>

 

（2）、close: 關閉顯示的系統等待對話框

             wobj.close();

說明：調用plus.nativeUI.showWaiting方法建立並顯示系統等待界後，可經過其close方法將原生等待控件關閉。 一個系統等待對話框只能關閉一次，屢次調用將無任何做用。

返回值：void : 無

示例：

[html] view plain copy print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>nativeUI Example</title>  
  6. <script type="text/javascript">  
  7. // H5 plus事件處理  
  8. function plusReady(){  
  9. // 彈出系統等待對話框  
  10. var w = plus.nativeUI.showWaiting( "等待中..." );  
  11. // 2秒後關閉  
  12. setTimeout( function(){  
  13. w.close();  
  14. }, 2000 );  
  15. }  
  16. if(window.plus){  
  17. plusReady();  
  18. }else{  
  19. document.addEventListener("plusready",plusReady,false);  
  20. }  
  21. </script>  
  22. </head>  
  23. <body>  
  24. 顯示系統等待對話框<br/>  
  25. 關閉顯示的系統等待對話框  
  26. </body>  
  27. </html>  
<!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>

 

2.5.二、事件

onclose: 等待對話框關閉事件

wobj.onclose = function() {

console.log( "Waiting closed!" );

};

說明：function 類型。等待框關閉時觸發，當調用close方法或用戶點擊返回按鈕致使等待框關閉時觸發。

示例：

[html] view plain copy print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>nativeUI Example</title>  
  6. <script type="text/javascript">  
  7. // H5 plus事件處理  
  8. function plusReady(){  
  9. // 彈出系統等待對話框  
  10. var w = plus.nativeUI.showWaiting( "等待中..." );  
  11. // 關閉事件  
  12. w.onclose = function() {  
  13. console.log( "Waiting onclose!" );  
  14. }  
  15. // 2秒後關閉  
  16. setTimeout( function(){  
  17. w.close();  
  18. }, 2000 );  
  19. }  
  20. if(window.plus){  
  21. plusReady();  
  22. }else{  
  23. document.addEventListener("plusready",plusReady,false);  
  24. }  
  25. </script>  
  26. </head>  
  27. <body>  
  28. 顯示系統等待對話框<br/>  
  29. 關閉顯示的系統等待對話框  
  30. </body>  
  31. </html>  
<!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>

 

2.六、WaitingOptions: JSON對象，原生等待對話框的參數

屬性：

  （1）、width: (String 類型 )等待框背景區域的寬度。值支持像素值（"500px"）或百分比（"50%"），百分比相對於屏幕的寬計算，若是不設置則根據內容自動計算合適的寬度。

  （2）、height: (String 類型 )等待框背景區域的高度。值支持像素絕對值（"500px"）或百分比（"50%"），若是不設置則根據內容自動計算合適的高度。

  （3）、color: (String 類型 )等待框中文字的顏色。顏色值支持(參考CSS顏色規範)：顏色名稱(參考CSS Color Names)/十六進制值/rgb值/rgba值，默認值爲白色。

  （4）、size: (String 類型 )等待框中文字的字體大小。如"14px"表示使用14像素高的文字，未設置則使用系統默認字體大小。

  （5）、textalign: (String 類型 )等待對話框中標題文字的水平對齊方式。對齊方式可選值包括："left"：水平居左對齊顯示，"center"：水平居中對齊顯示，"right"：水平居右對齊顯示。默認值爲水平居中對齊顯示，即"center"。

  （6）、padding: (String 類型 )等待對話框的內邊距。值支持像素值（"10px"）和百分比（"5%"），百分比相對於屏幕的寬計算，默認值爲"3%"。

  （7）、background: (String 類型 )等待對話框顯示區域的背景色。背景色的值支持(參考CSS顏色規範)：顏色名稱(參考CSS Color Names)/十六進制值/rgb值/rgba值，默認值爲rgba(0,0,0,0.8)。

  （8）、style: (String 類型 )等待對話框樣式，可取值"black"、"white"，black表示等待框爲黑色雪花樣式，一般在背景主色爲淺色時使用；white表示等待框爲白色雪花樣式，一般在背景主色爲深色時使用。 僅在iOS平臺有效，其它平臺忽略此值，未設置時默認值爲white。

  （9）、modal: (Boolen 類型 )等待框是否模態顯示，模態顯示時用戶不可操做直到等待對話框關閉，不然用戶在等待對話框顯示時也可操做下面的內容，未設置時默認爲true。

  （10）、round: (Number 類型 )等待框顯示區域的圓角。值支持像素值（"10px"），未設置時使用默認值"10px"。

  （11）、padlock: (Boolen 類型 )點擊等待顯示區域是否自動關閉。true表示點擊等待對話框顯示區域時自動關閉，false則不關閉，未設置時默認值爲false。

  （12）、back: (String 類型 )返回鍵處理方式，可取值"none"表示截獲處理返回鍵，但不作任何響應；"close"表示截獲處理返回鍵並關閉等待框；"transmit"表示不截獲返回鍵，向後傳遞給Webview窗口繼續處理（與未顯示等待框的狀況一致）。

平臺支持Android - 2.3+ (支持)iOS - ALL (不支持): iOS設備無返回鍵，忽略此屬性。

  （13）、loading: (WaitingLoadingOptions 類型 )自定義等待框上loading圖標樣式

2.七、WaitingLoadingOptions: JSON對象，原生等待對話框上loading圖標自定義樣式

屬性：

  （1）、display: (String 類型 )loading圖標顯示樣式。可取值： "block"表示圖標與文字分開兩行顯示，上面顯示loading圖標，下面顯示文字； "inline"表示loading圖標與文字在同一行顯示，左邊顯示loading圖標，右邊顯示文字； "none"表示不顯示loading圖標；

  （2）、icon: (String 類型 )loading圖標路徑。自定義loading圖標的路徑，png格式，而且必須是本地資源地址； loading圖要求寬是高的整數倍，顯示等待框時按照圖片的高橫向截取每幀刷新。

  （3）、interval: (Number 類型 )loading圖每幀刷新間隔。單位爲ms（毫秒），默認值爲100ms。

2.八、ToastOption: JSON對象，系統提示消息框要設置的參數

屬性：

  （1）、icon: (String 類型 )提示消息框上顯示的圖標

  （2）、duration: (String 類型 )提示消息框顯示的時間。可選值爲"long"、"short"，值爲"long"時顯示時間約爲3.5s，值爲"short"時顯示時間約爲2s，未設置時默認值爲"short"。

  （3）、align: (String 類型 )提示消息框在屏幕中的水平位置。可選值爲"left"、"center"、"right"，分別爲水平居左、居中、居右，未設置時默認值爲"center"。

  （4）、verticalAlign: (String 類型 )提示消息在屏幕中的垂直位置。可選值爲"top"、"center"、"bottom"，分別爲垂直居頂、居中、居底，未設置時默認值爲"bottom"。

三、回調方法

3.一、ActionSheetCallback: 系統選擇按鈕框的回調函數

void onActioned( Event event ){

// actionsheet handled code.

var index=event.index; // 用戶關閉時點擊按鈕的索引值

}

參數：event: ( Event ) 必選 用戶操做選擇按鈕框關閉後返回的數據，可經過event.index（Number類型）獲取用戶關閉時點擊按鈕的索引值，索引值從0開始； 0表示用戶點擊取消按鈕，大於0值表示用戶點擊ActionSheetStyle中buttons屬性定義的按鈕，索引值從1開始（即1表示點擊buttons中定義的第一個按鈕）。

返回值：void : 無

平臺支持：Android - ALL (不支持)，iOS - 4.3+ (支持): 用戶只能經過點擊選擇按鈕上的按鈕進行關閉。

示例：

[html] view plain copy print?
  1.    
  2. <!DOCTYPE html>  
  3. <html>  
  4. <head>  
  5. <meta charset="utf-8">  
  6. <title>nativeUI Example</title>  
  7. <script type="text/javascript">  
  8. // H5 plus事件處理  
  9. function plusReady(){  
  10. // 彈出系統選擇按鈕框  
  11. var actionbuttons=[{title:"不一樣意",style:"destructive"},{title:"test1"},{title:"test2"},{title:"3"}];  
  12. var actionstyle={title:"Plus is ready!",cancel:"取消",buttons:actionbuttons};  
  13. plus.nativeUI.actionSheet( actionstyle, function(e){  
  14. if(e.index>0){  
  15. console.log( "User pressed: "+actionbuttons[e.index-1].title );  
  16. }else{  
  17. console.log( "User pressed 取消" );  
  18. }  
  19. } );  
  20. }  
  21. if(window.plus){  
  22. plusReady();  
  23. }else{  
  24. document.addEventListener("plusready",plusReady,false);  
  25. }  
  26. </script>  
  27. </head>  
  28. <body>  
  29. 彈出系統選擇按鈕框  
  30. </body>  
  31. </html>  
 
<!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>

 

 

3.二、AlertCallback: 系統提示框確認的回調函數

void onAlerted( Event event ){

// Alert handled code.

var index=event.index; // 用戶關閉提示對話框點擊按鈕的索引值

}

參數：event: ( Event ) 必選 用戶操做確認對話框關閉後返回的數據。可經過event.index（Number類型）獲取用戶關閉確認對話框點擊按鈕的索引值，點擊確認鍵的索引值爲0。 Android平臺上經過返回按鈕關閉時索引值爲-1。

返回值：void : 無

平臺支持：Android - 2.2+ (支持): 用戶點擊設備「返回」按鍵致使提示對話框關閉，也會觸發此回調函數，此時回調返回參數中的index屬性值爲-1。iOS - 4.3+ (支持): 用戶只能經過點擊提示對話框上的按鈕進行關閉。

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+ (支持): 用戶只能經過點擊確認對話框上的按鈕進行關閉。

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+ (支持): 用戶只能經過點擊輸入對話框上的按鈕進行關閉。

3.五、PickDatetimeSuccessCallback: 選擇日期或時間操做成功的回調函數

function void onPickSuccess( Event event ) {

// Date picked code.

var date = event.date;// 用戶選擇的日期或時間

}

參數：event: ( Event ) 必選 用戶完成選擇日期或時間後返回的數據。可經過event.date（Date類型）獲取選擇的日期或時間值。 若調用的是日期選擇操做則僅年、月、日信息有效，若調用的是時間選擇操做則僅時、分信息有效。

返回值：void : 無

3.六、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 : 無

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程