碼上快樂

相關內容    簡體    繁體

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

本文轉載自   查看原文   2017-12-05 11:20   5679 

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

1、方法

1.1、actionSheet: 彈出系統選擇按鈕框

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

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

參數：

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.2、alert: 彈出系統提示對話框

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

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

參數：

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.3、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.4、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.5、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.6、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.7、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.8、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.9、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、對象

2.1、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.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.3、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.4、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.5、Waiting: 系統等待對話框對象

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

2.5.1、方法

（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.2、事件

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.6、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.7、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.8、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、回調方法

3.1、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.2、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.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.4、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.5、PickDatetimeSuccessCallback: 選擇日期或時間操作成功的回調函數

function void onPickSuccess( Event event ) {

// Date picked code.

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

}

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

返回值：void : 無

3.6、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 : 無


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 18模塊-nativeUI【管理系統一些常見的原生對話框】 HTML5+規范：device(管理設備信息) 系統事件管理(Events) ---- HTML5+ Html5+ 技術規范 （上） HTML5+規范：Webview的使用詳解 原 HTML5+規范：barcode(條碼掃描) java學生管理系統（界面版） 酒店后台管理系統（純界面） 設備信息的管理(Device) ---- HTML5+ 攝像頭的管理(camera) ---- HTML5+
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM