js3.html 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  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,user-scalable=0">
  7. <link rel="stylesheet" href="../css/weui.css"/>
  8. <link rel="stylesheet" href="../css/weuix.css"/>
  9. <script src="../js/zepto.min.js"></script>
  10. <script src="../js/zepto.weui.js"></script>
  11. </head>
  12. <body ontouchstart>
  13. <div class="container">
  14. <div class="page-hd">
  15. <h1 class="page-hd-title">
  16. 滑动删除
  17. </h1>
  18. <p class="page-hd-desc">Swipeout</p>
  19. </div>
  20. <div class="page-bd-15">
  21. <div class="weui-cells">
  22. <div class="weui-cell weui-cell_swiped" id="s1">
  23. <div class="weui-cell__bd">
  24. <div class="weui-cell">
  25. <div class="weui-cell__bd">
  26. <p>左滑列表</p>
  27. </div>
  28. <div class="weui-cell__ft">向左滑动试试</div>
  29. </div>
  30. </div>
  31. <div class="weui-cell__ft">
  32. <a class="weui-swiped-btn weui-swiped-btn_warn delete-swipeout" href="javascript:">删除</a>
  33. <a class="weui-swiped-btn weui-swiped-btn_default close-swipeout" href="javascript:">关闭</a>
  34. </div>
  35. </div>
  36. <div class="weui-cell weui-cell_swiped" id="s2">
  37. <div class="weui-cell__bd">
  38. <div class="weui-cell">
  39. <div class="weui-cell__bd">
  40. <p>左滑列表</p>
  41. </div>
  42. <div class="weui-cell__ft">向左滑动试试</div>
  43. </div>
  44. </div>
  45. <div class="weui-cell__ft">
  46. <a class="weui-swiped-btn weui-swiped-btn_warn delete-swipeout" href="javascript:">删除</a>
  47. </div>
  48. </div>
  49. <div class="weui-cell weui-cell_swiped" id="s3">
  50. <div class="weui-cell__bd">
  51. <div class="weui-cell">
  52. <div class="weui-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width:20px;margin-right:5px;display:block"></div>
  53. <div class="weui-cell__bd">
  54. <p>左滑列表</p>
  55. </div>
  56. <div class="weui-cell__ft">向左滑动试试</div>
  57. </div>
  58. </div>
  59. <div class="weui-cell__ft">
  60. <a class="weui-swiped-btn weui-swiped-btn_default close-swipeout" href="javascript:">取消关注</a>
  61. </div>
  62. </div>
  63. </div>
  64. </div>
  65. <br>
  66. <br>
  67. <div class="weui-footer weui-footer_fixed-bottom">
  68. <p class="weui-footer__links">
  69. <a href="../index.html" class="weui-footer__link">WeUI首页</a>
  70. </p>
  71. <p class="weui-footer__text">Copyright &copy; Yoby</p>
  72. </div>
  73. </div>
  74. <script>
  75. /* js加载进来用
  76. $('.weui-cell_swiped').swipeout()
  77. 初始化
  78. $('.weui-cell_swiped').swipeout('close') 关闭
  79. */
  80. $('.delete-swipeout').click(function () {
  81. $(this).parents('.weui-cell').remove()
  82. })
  83. $('.close-swipeout').click(function () {
  84. $(this).parents('.weui-cell').swipeout('close')
  85. })
  86. $('.weui-cell_swiped').swipeout('open')
  87. </script>
  88. </body>
  89. </html>