QRcodeList.html 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  6. <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  7. <meta name="format-detection"content="telephone=no">
  8. <title>index</title>
  9. <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
  10. <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
  11. <link rel="stylesheet" href="../../css/projeck.css">
  12. <style media="screen">
  13. body,html{
  14. margin: 0;
  15. background: #fff;
  16. }
  17. #nav_items{
  18. display: flex;
  19. display: -webkit-flex;
  20. justify-content: center;
  21. -webkit-justify-content: center;
  22. align-items: center;
  23. position: relative;
  24. top: 11.5px;
  25. }
  26. #nav_items li{
  27. width: 85px;
  28. height: 27px;
  29. line-height: 27px;
  30. color: #fff;
  31. border: 1px solid #fff;
  32. -webkit-box-sizing: border-box;
  33. box-sizing: border-box;
  34. font-size: 14px;
  35. }
  36. #nav_items li:first-child{
  37. border-top-left-radius: 2px;
  38. border-bottom-left-radius: 2px;
  39. border-right: 0;
  40. }
  41. #nav_items li:last-child{
  42. border-top-right-radius: 2px;
  43. border-bottom-right-radius: 2px;
  44. border-left: 0;
  45. }
  46. #nav_items .active_nav{
  47. background: #ffffff;
  48. color: #009fe8;
  49. }
  50. </style>
  51. </head>
  52. <body>
  53. <div class="api_layout">
  54. <header class="header-login">
  55. <img class="backBtn" src="../../image/btn_back.png" alt="" onclick="backIndex()">
  56. <ul id="nav_items">
  57. <li class="active_nav" tapmode="active_nav" onclick="randomSwitchBtn(this)">
  58. 二维码
  59. </li>
  60. <li tapmode="active_nav" onclick="randomSwitchBtn(this)">
  61. 记录
  62. </li>
  63. </ul>
  64. </header>
  65. <div class="api_nav">
  66. <div class="header-nav scroller nav-haohuo" id="navScroll">
  67. </div>
  68. </div>
  69. </div>
  70. </body>
  71. </html>
  72. <script type="text/javascript" src="../../script/api.js"></script>
  73. <!-- <script src="../../script/fastclick.min.js" charset="utf-8"></script> -->
  74. <script src="../../script/config.js" charset="utf-8"></script>
  75. <script type="text/javascript">
  76. apiready = function () {
  77. $api.fixStatusBar($api.dom('header') );
  78. var depID = api.pageParam.depID,messageFlag = api.pageParam.messageFlag;
  79. if (messageFlag == 'CODE') {
  80. funIniGroup(depID,0);
  81. }else if (messageFlag == 'RECORD') {
  82. funIniGroup(depID,1);
  83. }
  84. keybackFun()//调用监听物理返回键
  85. };
  86. var eHeaderLis;
  87. function funIniGroup(depID,id){
  88. eHeaderLis = $api.domAll('#nav_items li'),
  89. frames = [];
  90. for (var i = 0,len = eHeaderLis.length; i < len; i++) {
  91. frames.push( {
  92. name: 'QRcode'+i,
  93. url: 'QRcode'+i+'.html',
  94. bgColor : '#f2f2f2',
  95. bounces:true,
  96. pageParam:{
  97. depIDs:depID
  98. },
  99. } )
  100. }
  101. api.openFrameGroup({
  102. name: 'QRcodegroup',
  103. scrollEnabled: true,
  104. rect: {
  105. x: 0,
  106. y: $api.dom('header').offsetHeight,
  107. w: api.winWidth,
  108. h: $api.winHeight
  109. },
  110. preload:0,
  111. index: id,
  112. frames: frames
  113. }, function (ret, err) {
  114. menuSelected(ret.index);
  115. });
  116. };
  117. function menuSelected(index) {
  118. for (var i = 0; i < eHeaderLis.length; i++) {
  119. if(index == i ){
  120. $api.addCls(eHeaderLis[i], 'active_nav');
  121. }else {
  122. $api.removeCls(eHeaderLis[i], 'active_nav');
  123. }
  124. }
  125. }
  126. function randomSwitchBtn( tag ) {
  127. if( tag == $api.dom('#nav_items li.active_nav') )return;
  128. var eFootLis = $api.domAll('#nav_items li');
  129. index = 0;
  130. for (var i = 0,len = eFootLis.length; i < len; i++) {
  131. if( tag == eFootLis[i] ){
  132. index = i;
  133. }else{
  134. $api.removeCls(eFootLis[i], 'active_nav');
  135. }
  136. }
  137. $api.addCls( eFootLis[index], 'active_nav');
  138. api.setFrameGroupIndex({
  139. name: 'QRcodegroup',
  140. index: index
  141. });
  142. }
  143. function backIndex() {
  144. var newsFun ='newsFun()'
  145. api.sendEvent({
  146. name: 'myEvent',
  147. extra: {
  148. key1: 'value1',
  149. key2: 'value2'
  150. }
  151. });
  152. api.sendEvent({
  153. name: 'newsBroadcast',
  154. extra: {
  155. key1: 'value1',
  156. key2: 'value2'
  157. }
  158. });
  159. api.closeWin({
  160. name:'QRcodeLisr'
  161. });
  162. }
  163. // 监听物理返回键
  164. function keybackFun() {
  165. api.addEventListener({
  166. name: 'keyback'
  167. }, function(ret, err){
  168. api.sendEvent({
  169. name: 'myEvent'
  170. });
  171. api.sendEvent({
  172. name: 'newsBroadcast'
  173. });
  174. api.closeWin({
  175. name:'QRcodeLisr'
  176. });
  177. });
  178. }
  179. </script>