index.html 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>ystep流程、步骤插件 —— Powerd By YangYuan</title>
  5. <meta name="keywords" content="ystep,jQuery流程、步骤插件"/>
  6. <meta name="description" content="ystep,jQuery流程、步骤插件"/>
  7. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9. <!-- 引入ystep样式 -->
  10. <link rel="stylesheet" href="css/ystep.css">
  11. </head>
  12. <body>
  13. <br><br><br><br><br>
  14. <!-- ystep容器 -->
  15. <div class="ystep1"></div>
  16. <br><br><br><br><br>
  17. <div class="ystep2"></div>
  18. <br><br><br><br><br>
  19. <div class="ystep3"></div>
  20. <br><br><br><br><br>
  21. <div class="ystep4"></div>
  22. <!-- 引入jquery -->
  23. <script src="js/jquery.min.js"></script>
  24. <!-- 引入ystep插件 -->
  25. <script src="js/ystep.js"></script>
  26. <script>
  27. //根据jQuery选择器找到需要加载ystep的容器
  28. //loadStep 方法可以初始化ystep
  29. $(".ystep1").loadStep({
  30. //ystep的外观大小
  31. //可选值:small,large
  32. size: "small",
  33. //ystep配色方案
  34. //可选值:green,blue
  35. color: "green",
  36. //ystep中包含的步骤
  37. steps: [{
  38. //步骤名称
  39. title: "发起",
  40. //步骤内容(鼠标移动到本步骤节点时,会提示该内容)
  41. content: "实名用户/公益组织发起项目"
  42. },{
  43. title: "审核",
  44. content: "乐捐平台工作人员审核项目"
  45. },{
  46. title: "募款",
  47. content: "乐捐项目上线接受公众募款"
  48. },{
  49. title: "执行",
  50. content: "项目执行者线下开展救护行动"
  51. },{
  52. title: "结项",
  53. content: "项目执行者公示善款使用报告"
  54. }]
  55. });
  56. $(".ystep2").loadStep({
  57. size: "large",
  58. color: "green",
  59. steps: [{
  60. title: "发起",
  61. content: "实名用户/公益组织发起项目"
  62. },{
  63. title: "审核",
  64. content: "乐捐平台工作人员审核项目"
  65. },{
  66. title: "募款",
  67. content: "乐捐项目上线接受公众募款"
  68. },{
  69. title: "执行",
  70. content: "项目执行者线下开展救护行动"
  71. },{
  72. title: "结项",
  73. content: "项目执行者公示善款使用报告"
  74. }]
  75. });
  76. $(".ystep3").loadStep({
  77. size: "small",
  78. color: "blue",
  79. steps: [{
  80. title: "发起",
  81. content: "实名用户/公益组织发起项目"
  82. },{
  83. title: "审核",
  84. content: "乐捐平台工作人员审核项目"
  85. },{
  86. title: "募款",
  87. content: "乐捐项目上线接受公众募款"
  88. },{
  89. title: "执行",
  90. content: "项目执行者线下开展救护行动"
  91. },{
  92. title: "结项",
  93. content: "项目执行者公示善款使用报告"
  94. }]
  95. });
  96. $(".ystep4").loadStep({
  97. size: "large",
  98. color: "blue",
  99. steps: [{
  100. title: "发起",
  101. content: "实名用户/公益组织发起项目"
  102. },{
  103. title: "审核",
  104. content: "乐捐平台工作人员审核项目"
  105. },{
  106. title: "募款",
  107. content: "乐捐项目上线接受公众募款"
  108. },{
  109. title: "执行",
  110. content: "项目执行者线下开展救护行动"
  111. },{
  112. title: "结项",
  113. content: "项目执行者公示善款使用报告"
  114. }]
  115. });
  116. $(".ystep1").setStep(2);
  117. $(".ystep2").setStep(5);
  118. $(".ystep3").setStep(3);
  119. </script>
  120. </body>
  121. </html>