nativeui.html 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  6. <meta name="HandheldFriendly" content="true"/>
  7. <meta name="MobileOptimized" content="320"/>
  8. <title>Hello H5+</title>
  9. <script type="text/javascript" src="../js/common.js"></script>
  10. <script type="text/javascript">
  11. function previewImage() {
  12. outSet("预览图片");
  13. plus.nativeUI.previewImage([
  14. "_www/img/h5p.jpg",
  15. "../img/shake/2.jpg",
  16. "http://img-cdn-qiniu.dcloud.net.cn/newpage/images/logo4.png"
  17. ],{
  18. current:1,
  19. loop:true,
  20. onLongPress:function(e){
  21. outLine('onLongPress: '+JSON.stringify(e));
  22. showActionSheet();
  23. }
  24. });
  25. }
  26. function pickDate() {
  27. outSet( "打开系统日期选择框:");
  28. var dDate=new Date();
  29. dDate.setFullYear(2014,0,1);
  30. var minDate=new Date();
  31. minDate.setFullYear(2010,0,1);
  32. var maxDate=new Date();
  33. maxDate.setFullYear(2016,11,31);
  34. outLine( "[date] "+dDate );
  35. outLine( "[minDate] "+minDate );
  36. outLine( "[maxDate] "+maxDate );
  37. plus.nativeUI.pickDate( function(e) {
  38. var d=e.date;
  39. outLine( "选择的日期:"+d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate() );
  40. },function(e){
  41. outSet( "未选择日期:"+e.message );
  42. },{title:"请选择日期",date:dDate,minDate:minDate,maxDate:maxDate});
  43. }
  44. function pickTime() {
  45. outSet( "打开系统时间选择框:");
  46. var dTime=new Date();
  47. dTime.setHours(6,0);
  48. outLine( "[time] "+dTime );
  49. plus.nativeUI.pickTime(function(e){
  50. var d=e.date;
  51. outLine( "选择的时间:"+d.getHours()+":"+d.getMinutes() );
  52. },function (e){
  53. outSet( "取消选择时间!" );
  54. },{title:"请选择时间",is24Hour:true,time:dTime});
  55. }
  56. function showAlert(){
  57. outSet( "弹出系统提示对话框:" );
  58. plus.nativeUI.alert("系统提示框内容\n第二行内容",function(e){
  59. var i=e.index;
  60. if(i<0){
  61. outLine( "按\"返回\"键关闭提示框!" );
  62. }else{
  63. outLine( "提示框已关闭!" );
  64. }
  65. },"nativeUI","好");
  66. }
  67. function showConfirm(){
  68. outSet( "弹出系统确认对话框:" );
  69. var bts=["是","否","取消"];
  70. plus.nativeUI.confirm("系统确认对话框内容\n第二行内容",function(e){
  71. var i=e.index;
  72. outLine( "按\""+((i>=0)?bts[e.index]:"返回")+"\"关闭!" );
  73. },"nativeUI",bts);
  74. }
  75. function showPrompt(){
  76. outSet( "弹出系统输入对话框:" );
  77. var bts=["确认","取消"];
  78. plus.nativeUI.prompt("请输入内容",function(e){
  79. var i=e.index;
  80. outLine( "按\""+((i>=0)?bts[e.index]:"返回")+"\"关闭:"+e.value );
  81. },"nativeUI","内容",bts);
  82. }
  83. function showActionSheet(){
  84. outSet( "弹出系统选择按钮框:" );
  85. var bts=[{title:"警告",style:"destructive"},{title:"按钮1"},{title:"按钮2"},{title:"按钮3"}];
  86. plus.nativeUI.actionSheet({title:"ActionSheet标题",cancel:"取消",buttons:bts},
  87. function(e){
  88. outLine( "选择了\""+((e.index>0)?bts[e.index-1].title:"取消")+"\"");
  89. }
  90. );
  91. }
  92. function showToast(){
  93. plus.nativeUI.toast("您好!正在使用HBuilder开发应用!",{duration:"long"});
  94. }
  95. function showWaiting(){
  96. var nw = clicked('nativeui_waiting.html',false,false,{popGesture:'none'});
  97. nw.addEventListener("close",function(){
  98. plus.nativeUI.closeWaiting();
  99. },false);
  100. }
  101. </script>
  102. <link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
  103. </head>
  104. <body>
  105. <ul class="dlist">
  106. <li class="ditem" onclick="previewImage()">预览图片</li>
  107. <li class="ditem" onclick="pickDate()">系统日期选择框</li>
  108. <li class="ditem" onclick="pickTime()">系统时间选择框</li>
  109. <li class="ditem" onclick="showAlert()">提示框</li>
  110. <li class="ditem" onclick="showConfirm()">确认框</li>
  111. <li class="ditem" onclick="showPrompt()">输入框</li>
  112. <li class="ditem" onclick="showActionSheet()">弹出菜单ActionSheet</li>
  113. <li class="ditem" onclick="showToast()">自动消失提示框</li>
  114. </ul>
  115. <br/>
  116. <div class="button" onclick="showWaiting()">等待框</div>
  117. <div id="outpos"/>
  118. <div id="output">
  119. nativeUI管理系统原生界面,可用于弹出系统原生提示对话框窗口、时间日期选择对话框、等待对话框等。
  120. </div>
  121. </body>
  122. </html>