searchFile_win.html 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  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" href="../../css/projeck.css">
  11. <style media="screen">
  12. body,html{
  13. margin: 0;
  14. background: #fff;
  15. }
  16. .aui-searchbar{
  17. width: 86%;
  18. height: 50px;
  19. margin-left: 40px;
  20. background-color: transparent;
  21. }
  22. .aui-searchbar .aui-searchbar-btn{
  23. color: #fff;
  24. }
  25. .aui-searchbar-input{
  26. background: #fff;
  27. }
  28. .aui-searchbar-input input{
  29. color: #000;
  30. }
  31. #search-input::placeholder{
  32. color: #ccc;
  33. font-size: 14px;
  34. }
  35. .search_ico{
  36. width: 16px;
  37. height: 16px;
  38. display: block;
  39. position: absolute;
  40. background: url("../../image/search.png") no-repeat;
  41. background-size: cover;
  42. top: 8px;
  43. left: 17px;
  44. }
  45. .backBtn{
  46. margin-left: 5px;
  47. }
  48. #search-input{
  49. font-size: 14px;
  50. height: 28px;
  51. }
  52. .aui-searchbar-input{
  53. margin-right: 60px;
  54. }
  55. .search_btn{
  56. position: absolute;
  57. bottom: 9px;
  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. </style>
  70. </head>
  71. <body>
  72. <div class="api_layout">
  73. <header class="header-login">
  74. <img class="backBtn" src="../../image/btn_back.png" alt="" onclick="backIndex()">
  75. <div class="aui-searchbar" id="search">
  76. <div class="aui-searchbar-input aui-border-radius">
  77. <i class="search_ico"></i>
  78. <form>
  79. <input type="text" placeholder="搜索" id="search-input">
  80. </form>
  81. </div>
  82. <span class="search_btn" onclick="seacrhWinFun(inputValue)">搜索</span>
  83. </div>
  84. </header>
  85. </div>
  86. </body>
  87. </html>
  88. <script type="text/javascript" src="../../script/api.js"></script>
  89. <!-- <script src="../../script/fastclick.min.js" charset="utf-8"></script> -->
  90. <script type="text/javascript" src="../../script/config.js"></script>
  91. <script type="text/javascript">
  92. var inputValue = ''
  93. apiready = function () {
  94. $api.fixStatusBar($api.dom('header') );
  95. fnInitUIInput();
  96. console.log(api.pageParam.token);
  97. openSearchFrm(api.pageParam.token);
  98. };
  99. function openSearchFrm(token) {
  100. $event.openFrame('searchFile_frm','header','',{token},'');
  101. }
  102. function backIndex() {
  103. // api.sendEvent({
  104. // name: 'userInfo',
  105. // extra: {
  106. // key1: 'value1',
  107. // key2: 'value2'
  108. // }
  109. // });
  110. api.closeWin();
  111. }
  112. // input
  113. function fnInitUIInput() {
  114. var searchText = $api.byId('search-input');
  115. var rect = $api.offset(searchText);
  116. var UIInput = api.require('UIInput');
  117. UIInput.open({
  118. rect: {
  119. x: rect.l,
  120. y: rect.t+1,
  121. w: rect.w,
  122. h: rect.h-1
  123. },
  124. styles: {
  125. bgColor: '#fff',
  126. size: 14,
  127. color: '#000',
  128. placeholder: {
  129. color: '#ccc'
  130. }
  131. },
  132. autoFocus: false,
  133. maxRows: 1,
  134. placeholder: '搜索',
  135. keyboardType: 'default',
  136. fixedOn: api.frameName
  137. }, function(ret, err) {
  138. if (ret) {
  139. var uiInputId = ret.id;
  140. if (ret && ret.eventType == "show") {
  141. setTimeout(function() {
  142. UIInput.popupKeyboard({id: uiInputId});
  143. }, 300)
  144. } else if (ret.eventType == "change") {
  145. UIInput.value({
  146. id: uiInputId
  147. }, function(ret, err) {
  148. if (ret) {
  149. if (ret.status) {
  150. inputValue = ret.msg;
  151. console.log(inputValue);
  152. seacrhWinFun(ret.msg);
  153. }
  154. }
  155. });
  156. }
  157. }
  158. });
  159. }
  160. // 查询
  161. function seacrhWinFun(text) {
  162. api.execScript({
  163. name: 'searchFile_win',
  164. frameName: 'searchFile_frm',
  165. script: 'searchFileList("'+text+'");'
  166. });
  167. }
  168. </script>