njs.html 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  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. // 保存iOS平台导入的类对象
  12. var UIAlertView=null;
  13. // 保存Android导入对象和全局环境对象
  14. var AlertDialog=null,mainActivity=null;
  15. // H5 plus事件处理
  16. function plusReady(){
  17. switch ( plus.os.name ) {
  18. case "Android":
  19. // 程序全局环境对象
  20. mainActivity = plus.android.runtimeMainActivity();
  21. // 导入AlertDialog类
  22. AlertDialog = plus.android.importClass("android.app.AlertDialog");
  23. break;
  24. case "iOS":
  25. // 导入UIAlertView类
  26. UIAlertView = plus.ios.importClass("UIAlertView");
  27. break;
  28. default:
  29. break;
  30. }
  31. }
  32. if(window.plus){
  33. plusReady();
  34. }else{
  35. document.addEventListener("plusready",plusReady,false);
  36. }
  37. /**
  38. * 在iOS平台通过NJS显示系统提示框
  39. */
  40. function njsAlertForiOS(){
  41. /*
  42. * Objective-C 代码
  43. *
  44.   // 创建UIAlertView类的实例对象
  45.   UIAlertView *view = [UIAlertView alloc];
  46.   // 设置提示对话上的内容
  47.   [view initWithTitle:@"自定义标题" // 提示框标题
  48.    message:@"使用NJS的原生弹出框,可自定义弹出框的标题、按钮" // 提示框上显示的内容
  49.    delegate:nil // 点击提示框后的通知代理对象,nil类似js的null,意为不设置
  50.    cancelButtonTitle:@"确定(或者其他字符)" // 提示框上取消按钮的文字
  51.    otherButtonTitles:nil]; // 提示框上其它按钮的文字,设置为nil表示不显示
  52.   // 调用show方法显示提示对话框,在OC中使用[]语法调用对象的方法
  53.   [view show];
  54. */
  55. // 创建UIAlertView类的实例对象
  56. var view = new UIAlertView();
  57. // 设置提示对话上的内容
  58. view.initWithTitlemessagedelegatecancelButtonTitleotherButtonTitles("自定义标题" // 提示框标题
  59. , "使用NJS的原生弹出框,可自定义弹出框的标题、按钮" // 提示框上显示的内容
  60. , null // 操作提示框后的通知代理对象,暂不设置
  61. , "确定(或者其他字符)" // 提示框上取消按钮的文字
  62. , null ); // 提示框上其它按钮的文字,设置为null表示不显示
  63. // 调用show方法显示提示对话框
  64. view.show();
  65. }
  66. /**
  67. * 在Android平台通过NJS显示系统提示框
  68. */
  69. function njsAlertForAndroid(){
  70. /*
  71. * Android平台 java代码
  72. *
  73. // 创建提示框构造对象,Builder是AlertDialog的内部类。参数this指代Android的主Activity对象,该对象启动应用时自动生成
  74. AlertDialog.Builder dlg = new AlertDialog.Builder(this);
  75. // 设置提示框标题
  76. dlg.setTitle("自定义标题");
  77. // 设置提示框内容
  78. dlg.setMessage("使用NJS的原生弹出框,可自定义弹出框的标题、按钮");
  79. // 设置提示框按钮
  80. dlg.setPositiveButton("确定(或者其他字符)", null);
  81. // 显示提示框
  82. dlg.show();
  83. */
  84. // 创建提示框构造对象,构造函数需要提供程序全局环境对象,通过plus.android.runtimeMainActivity()方法获取
  85. var dlg = new AlertDialog.Builder(mainActivity);
  86. // 设置提示框标题
  87. dlg.setTitle("自定义标题");
  88. // 设置提示框内容
  89. dlg.setMessage("使用NJS的原生弹出框,可自定义弹出框的标题、按钮");
  90. // 设置提示框按钮
  91. dlg.setPositiveButton("确定(或者其他字符)",null);
  92. // 显示提示框
  93. dlg.show();
  94. }
  95. function showNjsView(){
  96. switch ( plus.os.name ) {
  97. case "Android":
  98. njsAlertForAndroid();
  99. break;
  100. case "iOS":
  101. njsAlertForiOS();
  102. break;
  103. default:
  104. alert( "此平台不支持!" );
  105. break;
  106. }
  107. }
  108. function gamecenter(){
  109. if ( 'iOS' == plus.os.name ) {
  110. clicked('njs_ios_gamecenter.html',true);
  111. }else{
  112. plus.nativeUI.alert( "此平台不支持!" );
  113. }
  114. }
  115. function shortcut(){
  116. if ( 'Android' == plus.os.name ) {
  117. clicked('njs_android_shortcut.html',true);
  118. }else{
  119. plus.nativeUI.alert( "此平台不支持!" );
  120. }
  121. }
  122. </script>
  123. <link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
  124. <style type="text/css">
  125. </style>
  126. </head>
  127. <body>
  128. <br/>
  129. <!--div class="button" onclick="gamecenter()">Game Center</div>
  130. <div class="button" onclick="shortcut()">Shortcut</div>
  131. <br/-->
  132. <ul class="dlist">
  133. <li class="ditem" onclick="showNjsView()">native.js调用系统提示框</li>
  134. <li class="ditem" onclick="clicked('njs_efficient.html')">native.js高级API</li>
  135. </ul>
  136. <br/>
  137. <div class="button button-waring" onclick="plus.runtime.openURL('http://ask.dcloud.net.cn/article/114')">更多示例...</div>
  138. <div id="outpos"/>
  139. <div id="output">
  140. Native.JS一种把操作系统的原生对象转义,映射为JS对象,在JS里编写原生代码的技术。可通过plus.android.*和plus.ios.*提供的API分别调用Android和iOS平台的Native API。
  141. </div>
  142. </body>
  143. </html>