当前位置：首页 > 技术博客 > JQuery > jQuery动态数据流程步骤条特效

jQuery动态数据流程步骤条特效

4年前 (2021-11-17)JQuery1006

jQuery动态数据流程步骤条特效，事先设置好需要走的流程步骤，然后根据状态进行判断走到哪一步，审批意见是什么，支持动态数据配置。

<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="https://code.jquery.com/jquery-3.1.1.min.js"></script>    
<style>
@charset "utf-8";
.starBox{margin:100px auto;width:630px;}
.control_processSteps {
	display: flex;
	white-space: nowrap;
}

.processStep {
	display: inline-block;
	position: relative;
	flex-shrink: 1;
	flex-basis: 50%;
	margin-right: 0px;
}

.step_main {
	position: relative;
	white-space: normal;
	text-align: left;
}
/* 线条 */

.step_line {
	position: absolute;
	height: 4px;
	top: 10px;
	left: 0;
	right: 0;
	border-color: inherit;
	background-color: #c0c4cc;
}

.processStep:last-of-type .step_line {
	display: none;
}

.step_icon_inner {
	position: relative;
	z-index: 1;
	display: inline-flex;
	justify-content: center;
	width: 24px;
	height: 24px;
	box-sizing: border-box;
	border: 2px solid;
	border-radius: 50%;
	text-align: center;
	font-weight: 700;
	align-items: center;
	font-size: 14px;
	background: #fff;
}

.step_title {
	font-size: 16px;
	line-height: 38px;
	cursor: pointer;
}

.step_description {
	display: none;
	position: absolute;
	margin-top: -5px;
	font-size: 12px;
	line-height: 20px;
	font-weight: 400;
	background: #fff;
	box-shadow: 0px 4px 4px #ccc;
	border-radius: 5px;
	padding: 10px;
	z-index: 99;
}

.step_line_active {
	background-color: #409eff;
}
/* 已完结状态 */

.is_finish {
	color: #409eff;
	border-color: #409eff;
}

.is_process {
	color: #303133;
	border-color: #303133;
}

.is_wait {
	color: #c0c4cc;
	border-color: #c0c4cc;
}

.step_main:hover .step_title+.is_finish {
	display: inline-block;
}
</style>
</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', "已申请:杨博:2021/2/3:已申请审批意见, 已立项:杨博:2021/5/5:已立项审批意见, 实施中:张三:2021/5/9:实施中意见, 等待中:杨博:2021/6/6:等待中审批意见,已完结:杨博:2021/6/6:已完结审批意见", '实施中');    
</script>    
</body>    
</html>