devbox
菜鸟追梦旅行
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

HTML5+规范：nativeUI(管理系统原生界面)

作者：菜鸟追梦旅行 | 2024-02-18 05:07:42

赞

踩

plus.nativeui.prompt

 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>  
  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>

 

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>  
  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>

 

 

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>  
  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>

 

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>  
  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>

 

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>  
  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>

 

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 οnclick="pickDate()">选择日期</button>  
  30. </body>  
  31. </html>  
  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 οnclick="pickDate()">选择日期</button>
  30. </body>
  31. </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 οnclick="pickTime()">选择时间</button>  
  30. </body>  
  31. </html>  
  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 οnclick="pickTime()">选择时间</button>
  30. </body>
  31. </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>  
  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>

 

 

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>  
  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>

 

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>  
  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>

 

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>  
  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>

 

 

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 οnclick="pickDate()">选择日期</button>  
  30. <br/>  
  31. 设置标题为“请选择日期：”  
  32. </body>  
  33. </html>  
  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 οnclick="pickDate()">选择日期</button>
  30. <br/>
  31. 设置标题为“请选择日期：”
  32. </body>
  33. </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 οnclick="pickDate()">选择日期</button>  
  32. <br/>  
  33. 设置默认日期为“2008-08-08”  
  34. </body>  
  35. </html>  
  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 οnclick="pickDate()">选择日期</button>
  32. <br/>
  33. 设置默认日期为“2008-08-08”
  34. </body>
  35. </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 οnclick="pickDate()">选择日期</button>  
  32. <br/>  
  33. 设置最小可选日期为“2010-01-01”  
  34. </body>  
  35. </html>  
  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 οnclick="pickDate()">选择日期</button>
  32. <br/>
  33. 设置最小可选日期为“2010-01-01”
  34. </body>
  35. </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 οnclick="pickDate()">选择日期</button>  
  32. <br/>  
  33. 设置最大可选日期为“2014-12-31”  
  34. </body>  
  35. </html>  
  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 οnclick="pickDate()">选择日期</button>
  32. <br/>
  33. 设置最大可选日期为“2014-12-31”
  34. </body>
  35. </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 οnclick="pickTime()">选择时间</button>  
  32. <br/>  
  33. 设置默认显示时间为早上6点  
  34. </body>  
  35. </html>  
  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 οnclick="pickTime()">选择时间</button>
  32. <br/>
  33. 设置默认显示时间为早上6点
  34. </body>
  35. </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 οnclick="pickTime()">选择时间</button>  
  30. <br/>  
  31. 设置标题为“请选择时间：”  
  32. </body>  
  33. </html>  
  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 οnclick="pickTime()">选择时间</button>
  30. <br/>
  31. 设置标题为“请选择时间：”
  32. </body>
  33. </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 οnclick="pickTime()">选择时间</button>  
  30. <br/>  
  31. 设置12小时制显示  
  32. </body>  
  33. </html>  
  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 οnclick="pickTime()">选择时间</button>
  30. <br/>
  31. 设置12小时制显示
  32. </body>
  33. </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>  
  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>

 

（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>  
  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>

 

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>  
  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>

 

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>  
  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>

 

 

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 : 无

转载于:https://www.cnblogs.com/zxh1919/p/7986000.html

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/105027
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号