jq步骤条 java,jQuery流程步骤进度条插件代码

特效描述：jQuery 流程步骤进度条。jQuery流程步骤进度条插件代码

代码结构

1. 引入CSS

2. 引入JS

3. HTML代码

//根据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);