Няма описание

search-home.html 3.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  6. <title></title>
  7. <link href="../css/mui.min.css" rel="stylesheet"/>
  8. <link href="../css/app.css" rel="stylesheet"/>
  9. <link href="../css/iconfont.css" rel="stylesheet" />
  10. </head>
  11. <body>
  12. <!-- 主页面标题 -->
  13. <header class="mui-bar mui-bar-nav toptitbox">
  14. <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left topback"></a>
  15. <div class="searchbox2 mui-pull-right">
  16. <div class="mui-pull-left searchselect">
  17. <div class="simuselect">
  18. <div class="ulbox lookwho" id="div_select">专家</div>
  19. <ul id="li_show" class="lishow">
  20. <li data-num="1">专家</li>
  21. <li data-num="0">资源</li>
  22. </ul>
  23. </div>
  24. <em class="mui-icon mui-icon-arrowdown"></em>
  25. </div>
  26. <input type="text" class="mui-input-clear mui-pull-right searchtxt2" placeholder="搜索专家、设备资源" id="searchval">
  27. </div>
  28. </header>
  29. <!-- 主页面内容容器 -->
  30. <div class="mui-content" id="dd">
  31. <!-- 主界面具体展示内容 -->
  32. <div class="historybox" style=" position: absolute; top:45px;left:0; z-index:2; " id="historybox">
  33. <!--<ul class="hisrecord">
  34. <li>
  35. <span class="histicon mui-pull-left"></span>
  36. <span class="mui-pull-left">搜索历史词</span>
  37. <span class="mui-icon mui-icon-closeempty delrecord"></span>
  38. </li>
  39. <li>
  40. <span class="histicon mui-pull-left"></span>
  41. <span class="mui-pull-left">搜索历史词</span>
  42. <span class="mui-icon mui-icon-closeempty delrecord"></span>
  43. </li>
  44. <li>
  45. <span class="histicon mui-pull-left"></span>
  46. <span class="mui-pull-left">搜索历史词</span>
  47. <span class="mui-icon mui-icon-closeempty delrecord"></span>
  48. </li>
  49. <li class="trashrecord"><em class="mui-icon mui-icon-trash"></em>清除历史记录</li>
  50. </ul>-->
  51. <div class="hotsearchbox">
  52. <div>热门搜索</div>
  53. <ul class="hotsearch">
  54. <li>材料检测</li>
  55. <li>防腐蚀</li>
  56. <li>材料表面与界面</li>
  57. <li>微晶金属材料</li>
  58. <li>黑色金属</li>
  59. <li>金属基复合材料</li>
  60. </ul>
  61. </div>
  62. </div>
  63. </div>
  64. <script src="../js/public/mui.min.js"></script>
  65. <script src="../js/public/base.js"></script>
  66. <script type="text/javascript">
  67. var showblock = document.getElementById("li_show");
  68. var selectblock = document.getElementById("div_select");
  69. var searchVal = document.getElementById("searchval");
  70. var key,bigClass=1;
  71. /*搜专家搜资源的下拉选择框*/
  72. selectblock.addEventListener('tap', function() {
  73. showblock.style.display = 'block';
  74. });
  75. mui("#li_show").on('tap', 'li', function() {
  76. bigClass = this.getAttribute("data-num");
  77. //console.log(bigClass)
  78. selectblock.innerHTML = this.innerHTML;
  79. showblock.style.display = 'none';
  80. });
  81. /*点击热门搜索*/
  82. mui(".hotsearch").on('tap', 'li', function() {
  83. plus.nativeUI.showWaiting();
  84. key = this.innerHTML;
  85. plus.nativeUI.showWaiting();//显示原生等待框
  86. plus.webview.create("../html/search.html",'search.html',{},{key:key,bigClass:bigClass});
  87. });
  88. /*按键字搜索*/
  89. searchval.addEventListener("keyup", function() {
  90. var e = event || window.event || arguments.caller.arguments[0];
  91. if(e.keyCode == 13) {
  92. key = searchVal.value;
  93. plus.nativeUI.showWaiting();
  94. mui.openWindow({
  95. url: '../html/search.html',
  96. id: '../html/search.html',
  97. show:{
  98. autoShow:false,
  99. aniShow:"fade-in",
  100. },
  101. extras:{
  102. key:key,
  103. bigClass:bigClass
  104. }
  105. });
  106. }
  107. })
  108. </script>
  109. </body>
  110. </html>