base18.html 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  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>
  11. $(function(){
  12. $('#a').click(function(){
  13. $("#s1").show();
  14. $('#s2,#s3').hide()
  15. })
  16. $('#b').click(function(){
  17. $("#s2").show();
  18. $('#s1,#s3').hide()
  19. })
  20. $('#c').click(function(){
  21. $("#s3").show();
  22. $('#s1,#s2').hide()
  23. })
  24. });
  25. </script>
  26. </head>
  27. <body ontouchstart>
  28. <div class="page-hd">
  29. <h1 class="page-hd-title">
  30. Msg提示页
  31. </h1>
  32. <p class="page-hd-desc"></p>
  33. </div>
  34. <div class="page-bd-15">
  35. <a href="javascript:;" class="weui-btn weui-btn_primary" id="a">成功</a>
  36. <a href="javascript:;" class="weui-btn weui-btn_primary" id="b">失败</a>
  37. <a href="javascript:;" class="weui-btn weui-btn_primary" id="c">提示页</a>
  38. </div>
  39. <div class="weui-msg" style="display:none;" id="s1">
  40. <div class="weui-msg__icon-area"><i class="weui-icon-success weui-icon_msg"></i></div>
  41. <div class="weui-msg__text-area">
  42. <h2 class="weui-msg__title">操作成功</h2>
  43. <p class="weui-msg__desc">内容详情,可根据实际需要安排,如果换行则不超过规定长度,居中展现<a href="javascript:void(0);">文字链接</a></p>
  44. </div>
  45. <div class="weui-msg__opr-area">
  46. <p class="weui-btn-area">
  47. <a href="javascript:;" class="weui-btn weui-btn_primary">推荐操作</a>
  48. <a href="javascript:;" class="weui-btn weui-btn_default">辅助操作</a>
  49. </p>
  50. </div>
  51. <div class="weui-msg__extra-area">
  52. </div>
  53. </div>
  54. <div class="weui-msgbox" style="display:none;" id="s3">
  55. <p>
  56. <i class="weui-icon-info-circle"></i>暂无数据
  57. </p>
  58. </div>
  59. <div class="weui-msg" style="display:none;" id="s2">
  60. <div class="weui-msg__icon-area"><i class="weui-icon-warn weui-icon_msg"></i></div>
  61. <div class="weui-msg__text-area">
  62. <h2 class="weui-msg__title">操作失败</h2>
  63. <p class="weui-msg__desc">内容详情,可根据实际需要安排,如果换行则不超过规定长度,居中展现<a href="javascript:void(0);">文字链接</a></p>
  64. </div>
  65. <div class="weui-msg__opr-area">
  66. <p class="weui-btn-area">
  67. <a href="javascript:;" class="weui-btn weui-btn_primary">推荐操作</a>
  68. <a href="javascript:;" class="weui-btn weui-btn_default">辅助操作</a>
  69. </p>
  70. </div>
  71. <div class="weui-msg__extra-area">
  72. </div>
  73. </div>
  74. <br>
  75. <br>
  76. <div class="weui-footer weui-footer_fixed-bottom">
  77. <p class="weui-footer__links">
  78. <a href="../index.html" class="weui-footer__link">WeUI首页</a>
  79. </p>
  80. <p class="weui-footer__text">Copyright &copy; Yoby</p>
  81. </div>
  82. </body>
  83. </html>