js2.html 2.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  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. ActionSheet
  17. </h1>
  18. <p class="page-hd-desc">操作表</p>
  19. </div>
  20. <div class="page-bd-15">
  21. <a href="javascript:;" id='show-actions' class="weui-btn weui-btn_primary">显示 ActionSheet</a>
  22. <a href="javascript:;" id='show-actions-bg' class="weui-btn weui-btn_primary">自定义背景色</a>
  23. </div>
  24. <br>
  25. <br>
  26. <div class="weui-footer weui-footer_fixed-bottom">
  27. <p class="weui-footer__links">
  28. <a href="../index.html" class="weui-footer__link">WeUI首页</a>
  29. </p>
  30. <p class="weui-footer__text">Copyright &copy; Yoby</p>
  31. </div>
  32. </div>
  33. <script>
  34. //有4个颜色配置
  35. $(document).on("click", "#show-actions", function() {
  36. $.actions({
  37. title: "选择操作",
  38. onClose: function() {
  39. console.log("close");
  40. },
  41. actions: [
  42. {
  43. text: "发布",
  44. className: "color-primary",
  45. onClick: function() {
  46. $.alert("发布成功");
  47. }
  48. },
  49. {
  50. text: "编辑",
  51. className: "color-warning",
  52. onClick: function() {
  53. $.alert("你选择了“编辑”");
  54. }
  55. },
  56. {
  57. text: "删除",
  58. className: 'color-danger',
  59. onClick: function() {
  60. $.alert("你选择了“删除”");
  61. }
  62. }
  63. ]
  64. });
  65. });
  66. $(document).on("click", "#show-actions-bg", function() {
  67. $.actions({
  68. actions: [
  69. {
  70. text: "发布",
  71. className: "bg-primary",
  72. },
  73. {
  74. text: "编辑",
  75. className: "bg-warning",
  76. },
  77. {
  78. text: "删除",
  79. className: 'bg-danger',
  80. } ,{
  81. text: "删除",
  82. className: 'bg-success',
  83. }
  84. ]
  85. });
  86. });
  87. </script>
  88. </body>
  89. </html>