js1.html 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  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="../style/weui.css"/>
  8. <link rel="stylesheet" href="../style/weui2.css"/>
  9. <link rel="stylesheet" href="../style/weui3.css"/>
  10. <script src="../zepto.min.js"></script>
  11. <script>
  12. $(function(){
  13. });
  14. </script>
  15. </head>
  16. <body ontouchstart style="background-color: #f8f8f8;">
  17. <div class="page-hd">
  18. <h1 class="page-hd-title">
  19. js组件
  20. </h1>
  21. <p class="page-hd-desc"></p>
  22. </div>
  23. <div class="page-bd-15">
  24. <a href="javascript:;" class="weui_btn weui_btn_primary" id="showToast">Toast 成功</a>
  25. <a href="javascript:;" class="weui_btn weui_btn_primary" id="show-toast-cancel">Toast 取消</a>
  26. <a href="javascript:;" class="weui_btn weui_btn_primary" id="show-toast-3">Toast 警告</a>
  27. <a href="javascript:;" class="weui_btn weui_btn_primary" id="showLoading">Toast Loading </a>
  28. <a href="javascript:;" class="weui_btn weui_btn_primary" id="sd1">Dialog alert</a>
  29. <a href="javascript:;" class="weui_btn weui_btn_primary" id="sd2">Dialog confirm</a>
  30. <a href="javascript:;" class="weui_btn weui_btn_primary" id="sd3">Dialog prompt</a>
  31. <a href="javascript:;" class="weui_btn weui_btn_primary" id="sd4">Dialog 自定义</a>
  32. <a href="javascript:;" class="weui_btn weui_btn_primary" id="sd5">toptips默认</a>
  33. <a href="javascript:;" class="weui_btn weui_btn_primary" onclick="$.toptips('我是绿色提示','ok')">toptips ok或success</a>
  34. <a href="javascript:;" class="weui_btn weui_btn_primary" onclick="$.toptips('我是黑色提示','info')">toptips info</a>
  35. <a href="javascript:;" class="weui_btn weui_btn_primary" onclick="$.toptips('我是橙色提示','warning')">toptips warning</a>
  36. </div>
  37. <script>
  38. $(document).on("click", "#showToast", function() {
  39. $.toast("操作成功");
  40. });
  41. $(document).on("click", "#show-toast-cancel", function() {
  42. $.toast("取消操作", "cancel");
  43. });
  44. $(document).on("click", "#show-toast-3", function() {
  45. $.toast("禁止操作", "forbidden");
  46. });
  47. $(document).on("click", "#showLoading", function() {
  48. $.showLoading();
  49. setTimeout(function() {
  50. $.hideLoading();
  51. }, 3000)
  52. });
  53. $(document).on("click", "#sd1", function() {
  54. $.alert("弹出对话框就是好", "标题");
  55. });
  56. $(document).on("click", "#sd2", function() {
  57. $.confirm("您确定要删除吗?", "确认删除?", function() {
  58. $.toast("删除成功!");
  59. }, function() {
  60. //取消操作
  61. });
  62. });
  63. $(document).on("click", "#sd3", function() {
  64. $.prompt("输入昵称看看", "你的昵称", function(text) {
  65. $.alert("您的昵称是:"+text, "哦");
  66. }, function() {
  67. //取消操作
  68. });
  69. });
  70. $(document).on("tap", "#sd4", function() {
  71. $.modal({
  72. title: "支付方式",
  73. text: "选择你的支付方式",
  74. buttons: [
  75. { text: "支付宝", onClick: function(){ $.alert("你选择了支付宝"); } },
  76. { text: "微信支付", onClick: function(){ $.alert("你选择了微信支付"); } },
  77. { text: "取消", className: "default"},
  78. ]
  79. });
  80. });
  81. $(function(){
  82. $(document).on("click", "#sd5", function() {
  83. $.toptips("错误提示");
  84. });
  85. })
  86. </script>
  87. </body>
  88. </html>