<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>jQuery动态数据步骤条特效</title>
<script src="js/jquery.min.js"></script>
<link type="text/css" href="css/style.css" rel="stylesheet" />
</head>
<body>
<div class="starBox"></div>
<script type="text/javascript">
//步骤条控件
function StepContentFn(tag, stepContent, status) {
var descriptionValue = stepContent.indexOf(",") == -1 ? $(stepContent).val() : stepContent;
if (descriptionValue) {
var desplit = descriptionValue.split(",");
var temp = -1;
var isActiveValue = "is_finish"
var applyStatus = $(status).val() ? $(status).val() : status;
var mainStep = "<div class='control_processSteps'>";
for (let i = 0; i < desplit.length; i++) {
var desplitItem = desplit[i].split(":");
if ($.trim(desplitItem[0]) == $.trim(applyStatus)) {
temp = i;
}
mainStep += "<div class='processStep'><div class='step_head'><div class='step_line'></div><div class='step_icon_inner'>" + (i + 1) + "</div></div><div class='step_main'><div class='step_title'>" + desplitItem[0] + "</div><div class='step_description'><div>审批人:" + desplitItem[1] + "</div><div>审批时间:" + desplitItem[2] + "</div><div>审批意见:" + desplitItem[3] + "</div></div></div></div>"
}
mainStep += "</div>"
$(tag).prepend(mainStep);
for (i = 0; i < desplit.length; i++) {
if (temp >= i) {
isActiveValue = "is_finish";
$(".processStep").eq(i).find(".step_line").addClass("step_line_active");
} else if (temp == i - 1) {
isActiveValue = "is_process";
} else if (temp < i - 1) {
isActiveValue = "is_wait";
}
$(".processStep").eq(i).find(".step_head").addClass(isActiveValue);
$(".processStep").eq(i).find(".step_main>div").addClass(isActiveValue);
}
}
}
// 这里设置默认初始步骤
StepContentFn('.starBox', "已申请:杨博:2020/2/3:已申请审批意见, 已立项:杨博:2020/5/5:已立项审批意见, 实施中:张三:2020/5/9:实施中意见, 等待中:杨博:2020/6/6:等待中审批意见,已完结:杨博:2020/6/6:已完结审批意见", '实施中');
</script>
</body>
</html>