search.html 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  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. .aui-searchbar{
  18. width: 86%;
  19. height: 50px;
  20. margin-left: 40px;
  21. background-color: transparent;
  22. }
  23. .aui-searchbar .aui-searchbar-btn{
  24. color: #fff;
  25. }
  26. .aui-searchbar-input{
  27. background: #fff;
  28. }
  29. .aui-searchbar-input input{
  30. color: #000;
  31. }
  32. #search-input::placeholder{
  33. color: #000;
  34. font-size: 13px;
  35. }
  36. .search_ico{
  37. width: 16px;
  38. height: 16px;
  39. display: block;
  40. position: absolute;
  41. background: url("../../image/seacrh001.png") no-repeat;
  42. background-size: cover;
  43. top: 7px;
  44. left: 17px;
  45. }
  46. .backBtn{
  47. margin-left: 5px;
  48. }
  49. #search-input{
  50. font-size: 14px;
  51. }
  52. .aui-searchbar-input{
  53. margin-right: 60px;
  54. }
  55. .search_btn{
  56. position: absolute;
  57. top: 10px;
  58. right: 10px;
  59. width: 54px;
  60. height: 31px;
  61. line-height: 31px;
  62. -webkit-border-radius: 50px;
  63. -moz-border-radius: 50px;
  64. border-radius: 50px;
  65. color: #000;
  66. background: #fff;
  67. font-size: 13px;
  68. }
  69. .row{
  70. padding: 0 32px;
  71. }
  72. </style>
  73. </head>
  74. <body>
  75. <div class="api_layout">
  76. <header class="header-login">
  77. <img class="backBtn" src="../../image/btn_back.png" alt="" tapmode onclick="backIndex()">
  78. <div class="aui-searchbar" id="search">
  79. <div class="aui-searchbar-input aui-border-radius">
  80. <i class="search_ico"></i>
  81. <form>
  82. <input type="search" placeholder="搜索" id="search-input">
  83. </form>
  84. </div>
  85. <span class="search_btn">搜索</span>
  86. </div>
  87. </header>
  88. <nav>
  89. <ul class="row">
  90. <li>模拟量</li>
  91. <li></li>
  92. </ul>
  93. </nav>
  94. </div>
  95. </body>
  96. </html>
  97. <script type="text/javascript" src="../../script/api.js"></script>
  98. <script type="text/javascript">
  99. apiready = function () {
  100. $api.fixStatusBar($api.dom('header') );
  101. api.parseTapmode();
  102. var info = $api.getStorage('data'),
  103. token = JSON.parse(info).data.access_token;
  104. funIniGroup(token);
  105. }
  106. var eHeaderLis;
  107. function funIniGroup(token){
  108. eHeaderLis = $api.domAll('.header-nav-items li'),
  109. frames = [];
  110. for (var i = 0,len = eHeaderLis.length; i < len; i++) {
  111. frames.push( {
  112. name: 'personal_frame'+i,
  113. url: 'personal_frame'+i+'.html',
  114. bgColor : '#f2f2f2',
  115. bounces:true,
  116. pageParam:{
  117. data:token
  118. },
  119. } )
  120. }
  121. api.openFrameGroup({
  122. name: 'group',
  123. scrollEnabled: true,
  124. rect: {
  125. x: 0,
  126. y: $api.dom('header').offsetHeight+$api.dom('.api_nav').offsetHeight,
  127. w: api.winWidth,
  128. h: $api.winHeight
  129. },
  130. index: 0,
  131. frames: frames
  132. }, function (ret, err) {
  133. menuSelected(ret.index);
  134. });
  135. };
  136. function menuSelected(index) {
  137. for (var i = 0; i < eHeaderLis.length; i++) {
  138. if(index == i ){
  139. $api.addCls(eHeaderLis[i], 'active');
  140. }else {
  141. $api.removeCls(eHeaderLis[i], 'active');
  142. }
  143. }
  144. }
  145. function randomSwitchBtn( tag ) {
  146. if( tag == $api.dom('.header-nav-items li.active') )return;
  147. var eFootLis = $api.domAll('.header-nav-items li');
  148. index = 0;
  149. for (var i = 0,len = eFootLis.length; i < len; i++) {
  150. if( tag == eFootLis[i] ){
  151. index = i;
  152. }else{
  153. $api.removeCls(eFootLis[i], 'active');
  154. }
  155. }
  156. $api.addCls( eFootLis[index], 'active');
  157. api.setFrameGroupIndex({
  158. name: 'group',
  159. index: index
  160. });
  161. }
  162. function backIndex() {
  163. api.sendEvent({
  164. name: 'userInfo',
  165. extra: {
  166. key1: 'value1',
  167. key2: 'value2'
  168. }
  169. });
  170. api.closeWin();
  171. }
  172. </script>