map_nav.html 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7. <link href="../css/mui.min.css" rel="stylesheet" />
  8. <link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
  9. <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
  10. <style type="text/css">
  11. html {
  12. width: 100%;
  13. height: 100%;
  14. }
  15. body {
  16. height: 100%;
  17. background-color: transparent;
  18. }
  19. .mui-popover .mui-popover-arrow {
  20. left: auto;
  21. right: 10px!important;
  22. }
  23. .mui-popover {
  24. display: block;
  25. width: auto;
  26. opacity: 1;
  27. text-align: center;
  28. }
  29. .mui-table-view-cell>a:not(.mui-btn) {
  30. color: #000;
  31. }
  32. .fa {
  33. margin-right: 8px;
  34. color: #535353;
  35. }
  36. .mui-table-view-cell>a:not(.mui-btn) {
  37. color: #535353;
  38. }
  39. #userGroup{
  40. display: none;
  41. }
  42. #menu{
  43. text-align: left;
  44. font-size: 14px;
  45. }
  46. </style>
  47. </head>
  48. <body>
  49. <div id="topPopover" class="mui-popover" style="position:fixed ;top: 55px;right:5px;">
  50. <div class="mui-popover-arrow" style="top: -30px;"></div>
  51. <ul class="mui-table-view" style="color: #fff; top: -4px;right: 0;" id="menu">
  52. <li class="mui-table-view-cell" data-id="1">
  53. <a href="#">
  54. <i class="iconfont">&#xe71e;</i>全部
  55. </a>
  56. </li>
  57. <li class="mui-table-view-cell" data-id="2">
  58. <a href="#">
  59. <i class="iconfont">&#xe621;</i>杀虫灯
  60. </a>
  61. </li>
  62. <li class="mui-table-view-cell" data-id="3">
  63. <a href="#">
  64. <i class="iconfont">&#xe71f;</i>虫情测报
  65. </a>
  66. </li>
  67. <li class="mui-table-view-cell" data-id="5">
  68. <a href="#">
  69. <i class="iconfont">&#xe6a7;</i>环境监测
  70. </a>
  71. </li>
  72. <li class="mui-table-view-cell" data-id="7">
  73. <a href="#">
  74. <i class="iconfont">&#xe64e;</i>孢子仪
  75. </a>
  76. </li>
  77. <li class="mui-table-view-cell" data-id="8">
  78. <a href="#">
  79. <i class="iconfont">&#xe623;</i>性诱器
  80. </a>
  81. </li>
  82. </ul>
  83. </div>
  84. <script src="../js/mui.min.js"></script>
  85. <script type="text/javascript">
  86. mui.init({
  87. beforeback: function() {     //获得父页面的webview
  88. plus.webview.currentWebview().hide()
  89. return false;
  90. }
  91. })
  92. mui.plusReady(function() {
  93. ws = plus.webview.currentWebview();
  94. ws.setStyle({
  95. mask: "none"
  96. });
  97. window.addEventListener("tap", function() {
  98. ws.hide();
  99. })
  100. window.addEventListener("dragstart", function() {
  101. ws.hide();
  102. })
  103. mui("#menu").on('tap','li',function(){
  104. var id = this.getAttribute('data-id');
  105. var new_request = plus.webview.getWebviewById('map');
  106. mui.fire(new_request,'requestPerson',{id:id});
  107. ws.hide();
  108. })
  109. })
  110. </script>
  111. </body>
  112. </html>