123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134 |
- <!DOCTYPE html>
- <html>
- <head>
- <title>ystep流程、步骤插件 —— Powerd By YangYuan</title>
- <meta name="keywords" content="ystep,jQuery流程、步骤插件"/>
- <meta name="description" content="ystep,jQuery流程、步骤插件"/>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <!-- 引入ystep样式 -->
- <link rel="stylesheet" href="css/ystep.css">
- </head>
- <body>
-
- <br><br><br><br><br>
- <!-- ystep容器 -->
- <div class="ystep1"></div>
-
- <br><br><br><br><br>
-
- <div class="ystep2"></div>
-
- <br><br><br><br><br>
-
- <div class="ystep3"></div>
-
- <br><br><br><br><br>
-
- <div class="ystep4"></div>
-
- <!-- 引入jquery -->
- <script src="js/jquery.min.js"></script>
- <!-- 引入ystep插件 -->
- <script src="js/ystep.js"></script>
- <script>
- //根据jQuery选择器找到需要加载ystep的容器
- //loadStep 方法可以初始化ystep
- $(".ystep1").loadStep({
- //ystep的外观大小
- //可选值:small,large
- size: "small",
- //ystep配色方案
- //可选值:green,blue
- color: "green",
- //ystep中包含的步骤
- steps: [{
- //步骤名称
- title: "发起",
- //步骤内容(鼠标移动到本步骤节点时,会提示该内容)
- content: "实名用户/公益组织发起项目"
- },{
- title: "审核",
- content: "乐捐平台工作人员审核项目"
- },{
- title: "募款",
- content: "乐捐项目上线接受公众募款"
- },{
- title: "执行",
- content: "项目执行者线下开展救护行动"
- },{
- title: "结项",
- content: "项目执行者公示善款使用报告"
- }]
- });
- $(".ystep2").loadStep({
- size: "large",
- color: "green",
- steps: [{
- title: "发起",
- content: "实名用户/公益组织发起项目"
- },{
- title: "审核",
- content: "乐捐平台工作人员审核项目"
- },{
- title: "募款",
- content: "乐捐项目上线接受公众募款"
- },{
- title: "执行",
- content: "项目执行者线下开展救护行动"
- },{
- title: "结项",
- content: "项目执行者公示善款使用报告"
- }]
- });
-
- $(".ystep3").loadStep({
- size: "small",
- color: "blue",
- steps: [{
- title: "发起",
- content: "实名用户/公益组织发起项目"
- },{
- title: "审核",
- content: "乐捐平台工作人员审核项目"
- },{
- title: "募款",
- content: "乐捐项目上线接受公众募款"
- },{
- title: "执行",
- content: "项目执行者线下开展救护行动"
- },{
- title: "结项",
- content: "项目执行者公示善款使用报告"
- }]
- });
-
- $(".ystep4").loadStep({
- size: "large",
- color: "blue",
- steps: [{
- title: "发起",
- content: "实名用户/公益组织发起项目"
- },{
- title: "审核",
- content: "乐捐平台工作人员审核项目"
- },{
- title: "募款",
- content: "乐捐项目上线接受公众募款"
- },{
- title: "执行",
- content: "项目执行者线下开展救护行动"
- },{
- title: "结项",
- content: "项目执行者公示善款使用报告"
- }]
- });
-
- $(".ystep1").setStep(2);
- $(".ystep2").setStep(5);
- $(".ystep3").setStep(3);
-
- </script>
- </body>
- </html>
|