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

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

4年前 (2021-11-17)JQuery816

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>


版权声明:本文由 LzxBlog 发布,如需转载请注明出处。

本文链接:https://www.liuzhixi.cn/html/221.html

标签: jQuery

相关文章

jq scroll()和resize() 的优化

jq scroll()和resize() 的优化

在最近的一个项目中我使用到了jq中的scroll()和resize()方法来检测用户滚动/调整浏览器窗口并运行相关代码。可以注意到scroll()、resize...

jquery获取图片真实宽高

jquery获取图片真实宽高

jQuery有没有获取图片实际尺寸的方法? 就是图片文件的实际尺寸,而不是添加了css样式之后的尺寸。$(function(){   &...

基于jQuery的拖拽效果

基于jQuery的拖拽效果

描述:基于jQuery实现的拖拽插件,简单好用<head>     <meta chars...

jQuery仿百度搜索引擎

jQuery仿百度搜索引擎

静态搜索引擎,内置ajax动态查询默认参数:{     width: "200px",&...

jQuery响应式工作室类网站模板

jQuery响应式工作室类网站模板

简洁创意的jQuery响应式工作室类网站模板下载链接:https://pan.baidu.com/s/17qCoDvqTAt98mygA4b4jCQ ...

jQuery html5背景视频插件

jQuery html5背景视频插件

vidbacking是一款响应式的,跨平台的html5视频背景插件。该视频背景插件允许你在页面中的某个div后整个页面中使用HTML5视频作为背景使用方法在页面...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。