一款JQuery流程步骤工具可点击切换的特效代码,鼠标悬停在每一步骤时有对应的信息提示,点击任意步骤会自动跳至点击步骤,也可以通过“上一步”或“下一步”来实现步骤切换,自由度还时挺高的,喜欢的童鞋请收下吧。
页面的head部分,仅需引入一个CSS样式,代码如下:
<link type="text/css" rel="stylesheet" href="css/ystep.css">
页面的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库和一个JS插件,然后对每个流程设置相关的参数,代码如下:
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- 引入ystep插件 -->
<script type="text/javascript" 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>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791