site-manage.html 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=750, initial-scale=1, maximum-scale=1, user-scalable=0" />
  7. <meta name="keywords" content="" />
  8. <meta name="description" content="" />
  9. <title>站点管理</title>
  10. <!-- FAVICON AND APPLE TOUCH -->
  11. <link href="favicon.ico" rel="shortcut icon" />
  12. <link rel="apple-touch-icon-precomposed" sizes="180x180" />
  13. <meta name="msapplication-TileImage" content="mstile.png" />
  14. <link rel="stylesheet" href="css/common.css" />
  15. <meta name="viewport" content="width=375, user-scalable=no" />
  16. </head>
  17. <body>
  18. <div class="page-wrapper">
  19. <div class="filterSection">
  20. <input type="text" placeholder="请选择传输方式">
  21. <span class="search">查询</span>
  22. </div>
  23. <div class="device-list">
  24. <div class="noResult">
  25. <p>暂无查询结果...</p>
  26. </div>
  27. <ul>
  28. <li class="device-item">
  29. <div class="iconBox"><img src="image/site-icon.png" alt=""></div>
  30. <div class="desBox">
  31. <p class="device-tit">测试站点一</p>
  32. </div>
  33. <a href="detail.html" class="navRight"><img src="image/nav.png" alt="" width="14px"></a>
  34. <div class="operate-box">
  35. <ul>
  36. <li class="opera-edit" οnclick="javascrtpt:window.location.href='add.html'">修改设备 </li>
  37. <li class="opera-delete">删除设备</li>
  38. </ul>
  39. </div>
  40. </li>
  41. <li class="device-item">
  42. <div class="iconBox"><img src="image/site-icon.png" alt=""></div>
  43. <div class="desBox">
  44. <p class="device-tit">测试站点二</p>
  45. </div>
  46. <a href="detail.html" class="navRight"><img src="image/nav.png" alt="" width="14px"></a>
  47. <div class="operate-box">
  48. <ul>
  49. <li class="opera-edit" οnclick="javascrtpt:window.location.href='add.html'">修改设备 </li>
  50. <li class="opera-delete">删除设备</li>
  51. </ul>
  52. </div>
  53. </li>
  54. <li class="device-item">
  55. <div class="iconBox"><img src="image/site-icon.png" alt=""></div>
  56. <div class="desBox">
  57. <p class="device-tit">测试站点三</p>
  58. </div>
  59. <a href="detail.html" class="navRight"><img src="image/nav.png" alt="" width="14px"></a>
  60. <div class="operate-box">
  61. <ul>
  62. <li class="opera-edit" οnclick="javascrtpt:window.location.href='add.html'">修改设备 </li>
  63. <li class="opera-delete">删除设备</li>
  64. </ul>
  65. </div>
  66. </li>
  67. <li class="device-item">
  68. <div class="iconBox"><img src="image/site-icon.png" alt=""></div>
  69. <div class="desBox">
  70. <p class="device-tit">测试站点四</p>
  71. </div>
  72. <a href="detail.html" class="navRight"><img src="image/nav.png" alt="" width="14px"></a>
  73. <div class="operate-box">
  74. <ul>
  75. <li class="opera-edit" οnclick="javascrtpt:window.location.href='add.html'">修改设备 </li>
  76. <li class="opera-delete">删除设备</li>
  77. </ul>
  78. </div>
  79. </li>
  80. <li class="device-item">
  81. <div class="iconBox"><img src="image/site-icon.png" alt=""></div>
  82. <div class="desBox">
  83. <p class="device-tit">测试站点五</p>
  84. </div>
  85. <a href="detail.html" class="navRight"><img src="image/nav.png" alt="" width="14px"></a>
  86. <div class="operate-box">
  87. <ul>
  88. <li class="opera-edit" οnclick="javascrtpt:window.location.href='add.html'">修改设备 </li>
  89. <li class="opera-delete">删除设备</li>
  90. </ul>
  91. </div>
  92. </li>
  93. </ul>
  94. <a href="add.html"><img class="plus" src="image/plus-icon.png" alt=""></a>
  95. </div>
  96. </div>
  97. <script src="js/layout.js"></script>
  98. <script src="js/jquery-2.2.2.min.js"></script>
  99. <script>
  100. // 手机长按事件
  101. var timeOutEvent = 0;
  102. var _this;
  103. $(function() {
  104. $(".desBox").on({
  105. touchstart: function(e) {
  106. _this = $(this)
  107. timeOutEvent = setTimeout("longPress()", 500);
  108. // e.preventDefault();
  109. },
  110. touchmove: function() {
  111. clearTimeout(timeOutEvent);
  112. timeOutEvent = 0;
  113. },
  114. touchend: function() {
  115. clearTimeout(timeOutEvent);
  116. if (timeOutEvent != 0) {
  117. // alert("你这是点击,不是长按");
  118. }
  119. return false;
  120. }
  121. })
  122. });
  123. function longPress() {
  124. timeOutEvent = 0;
  125. // alert("长按事件触发发");
  126. _this.parent().find('.operate-box').show().parent().siblings().find('.operate-box').hide()
  127. }
  128. //点击修改页面跳转
  129. $(".device-item").on("touchend", ".opera-edit", function() {
  130. // alert("子元素点击");
  131. window.location.href = "add.html";
  132. })
  133. $(".device-item").on("touchend", ".opera-delete", function() {
  134. // alert("子元素点击");
  135. $(this).parent().parent().parent().remove();
  136. })
  137. // 点击除按钮和弹框之外任意地方隐藏表情
  138. $("body").click(function(e) {
  139. if (!$(e.target).closest(".operate-box").length) {
  140. $(".operate-box").hide();
  141. }
  142. });
  143. </script>
  144. </body>
  145. </html>