html实现竖直步骤条

1、问题描述

        最近碰到一个需求,要把审批流程改为竖直步骤条的形式。本来想直接抄网上的,但是网上给的要么是水平步骤条,要么是集成在框架里的,要么就是人家写的太复杂了,js,css一大堆。

2、我的代码

        代码下载:【免费】步骤条Demo.zip资源-CSDN文库

        index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<script type="text/javascript" src="./js/jquery.min.js"></script>
	<link rel="stylesheet" href="./css/myStyle.css" />
	<body>
		<script type="text/javascript">
			$(document).ready(function() {
				// $("body").append(drawLine($("#step1"), $("#step2"),"black"));
				// $("body").append(drawLine($("#step2"), $("#step3"),"black"));
				// $("body").append(drawLine($("#step3"), $("#step4"),"black"));
				var arrStep = [];
				var index = 0;
				$(".step").each(function() {
					console.log($(this).attr("id"));
					arrStep[index++] = $(this).attr("id");
				})
				for (var i = 0; i < arrStep.length - 1; i++) {
					$("body").append(drawLine($("#" + arrStep[i]), $("#" + arrStep[i + 1]), "#DDDDDD"));
				}
				$("#step1").addClass("is-ready");
				//$("body").append(drawLine($("#step1"),$("#"+finalStepId),"#DDDDDD"));

				$(".btnApprove").click(function() {
					var id = $(this).attr("id");
					var num = id.substr(id.length - 1, 1);
					var bAllow = true;
					// console.log(num)
					//如果当前步已完成,则直接退出函数
					if ($("#step" + num).hasClass("is-finish")) {
						return;
					}
					if (num > 1) {
						//第一步之后,只有当下一步未完成且当前步未完成时,上一步已完成,才可以点审批
						if ((!$("#step" + (Number(num) + 1)).hasClass("is-finish")) && ($("#step" + (Number(
								num) - 1)).hasClass("is-finish"))) {
							// console.log("num="+num)
							// console.log("bAllow="+bAllow)
							bAllow = true;
						} else {
							bAllow = false;
						}
					}
					if (bAllow) {
						console.log("step" + num)
						$("#step" + num).removeClass("is-ready");
						$("#step" + num).addClass("is-finish");
						if (document.getElementById("step" + (Number(num) + 1))) {
							$("#step" + (Number(num) + 1)).addClass("is-ready");
						}
						$("body").append(drawLine($("#step" + num), $("#step" + (Number(num) + 1)), "#4995FA"));
					}

				});

				$(".btnRefuse").click(function() {
					var id = $(this).attr("id");
					var num = id.substr(id.length - 1, 1);
					//如果当前步已完成,则直接退出函数
					if ($("#step" + num).hasClass("is-finish")) {
						return;
					}
					$("#step" + (Number(num) - 1)).removeClass("is-finish");
					$("#step" + (Number(num) - 1)).addClass("is-ready");
					$("#step" + num).removeClass("is-ready");
					$("#step-bar" + (Number(num) - 1) + "1").remove();
				})
			})

			//type:1同意,0拒绝
			function drawLine(start, end, colorCode) {
				if (document.getElementById(start.attr("id")) && document.getElementById(end.attr("id"))) {
					var startId = start.attr("id");
					var endId = end.attr("id");
					var startNum = startId.substr(startId.length - 1, 1);
					var endNum = endId.substr(endId.length - 1, 1);
					var startObj = start.offset();
					var endObj = end.offset();
					var returnStr = ""
					if (colorCode == "#DDDDDD") {
						return `<div class='step-bar' style='top:${startObj.top+20}px;left:${startObj.left+15}px;height:${endObj.top-startObj.top-10}px;background-color:${colorCode};'></div>`
					}
					returnStr = returnStr +
						`<div class='step-bar' id='step-bar${startNum}1' style='top:${startObj.top+20}px;left:${startObj.left+15}px;height:${endObj.top-startObj.top-10}px;background-color:${colorCode};'></div>`
					console.log(returnStr)
					return returnStr;
				}
			}
		</script>
		<div class="step" id="step1">
			<div class="point" id="point1"></div>
			<div class="content">步骤一</div>
			<button class="btnApprove" id="btnApprove1">同意</button>
			<button class="btnRefuse" id="btnRefuse1">拒绝</button>
		</div>
		<!-- <div class="step-bar"></div> -->
		<div class="step" id="step2">
			<div class="point" id="point2"></div>
			<div class="content">步骤二</div>
			<button class="btnApprove" id="btnApprove2">同意</button>
			<button class="btnRefuse" id="btnRefuse2">拒绝</button>
		</div>

		<div class="step" id="step3">
			<div class="point" id="point3"></div>
			<div class="content">步骤三</div>
			<button class="btnApprove" id="btnApprove3">同意</button>
			<button class="btnRefuse" id="btnRefuse3">拒绝</button>
		</div>

		<div class="step" id="step4">
			<div class="point" id="point4"></div>
			<div class="content">步骤四</div>
			<button class="btnApprove" id="btnApprove4">同意</button>
			<button class="btnRefuse" id="btnRefuse4">拒绝</button>
		</div>

		<div class="step" id="step5">
			<div class="point" id="point5"></div>
			<div class="content">步骤五</div>
			<button class="btnApprove" id="btnApprove5">同意</button>
			<button class="btnRefuse" id="btnRefuse5">拒绝</button>
		</div>

		<div class="step" id="step6">
			<div class="point" id="point6"></div>
			<div class="content">步骤六</div>
			<button class="btnApprove" id="btnApprove6">同意</button>
			<button class="btnRefuse" id="btnRefuse6">拒绝</button>
		</div>

		<div class="step" id="step7">
			<div class="point" id="point7"></div>
			<div class="content">步骤七</div>
			<button class="btnApprove" id="btnApprove7">同意</button>
			<button class="btnRefuse" id="btnRefuse7">拒绝</button>
		</div>

		<div class="step" id="step8">
			<div class="point" id="point8"></div>
			<div class="content">步骤八</div>
			<button class="btnApprove" id="btnApprove8">同意</button>
			<button class="btnRefuse" id="btnRefuse8">拒绝</button>
		</div>
	</body>
</html>

        myStyle.css

.step {
	display: table;
	height: 100px;
	.point {
		display: table-cell;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		/* background-color: #B4CFEC; */
		/* position: relative; */
		background-color:#DDDDDD;
		float: left;
		margin: 10px;
	}

	.content {
		display: table-cell;
		position: relative;
		float: right;
		margin-left: 10px;
	}
}

.step.is-finish{
	display: table;
	height: 100px;
	.point {
		display: table-cell;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		/* background-color: #0E098B; */
		/* position: relative; */
		background-color:#B4CFEC;
		float: left;
		margin: 10px;
	}
	
	.content {
		display: table-cell;
		position: relative;
		float: right;
		margin-left: 10px;
	}
}

.step.is-ready{
	display: table;
	height: 100px;
	.point {
		display: table-cell;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background-color: #0E098B;
		/* position: relative; */
		/* background-color:#B4CFEC; */
		float: left;
		margin: 10px;
	}
	
	.content {
		display: table-cell;
		position: relative;
		float: right;
		margin-left: 10px;
	}
}

.step-bar {
	width: 1px;
	background-color: #4995FA;
	display: inline-block;
	position: absolute;
	z-index: 1;
	/*这里设置大于2,即可看到真正连线的其实是两个元素的中心坐标*/
}

.btnApprove {
	background-color: aquamarine;
	position:absolute;
	margin-left: 100px;
}

.btnRefuse {
	background-color:greenyellow;
	position:absolute;
	margin-left: 150px;
}

3、效果

4、总结

        无

5、参考资料

jquery获取当前元素的坐标_jq获取元素坐标-CSDN博客

js+css实现两个dom元素之间的连线_js 连线-CSDN博客 

模板字符串 - JavaScript | MDN 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/124329.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

技术分享 | app自动化测试(Android)-- 特殊控件 Toast 识别

Toast 是 Android 系统中的一种消息框类型&#xff0c;它属于一种轻量级的消息提示&#xff0c;常常以小弹框的形式出现&#xff0c;一般出现 1 到 2 秒会自动消失&#xff0c;可以出现在屏幕上中下任意位置。它不同于 Dialog&#xff0c;它没有焦点。Toast 的设计思想是尽可能…

效率提升75%!要做矩阵号,更要做好矩阵号管理

在如今的信息数字化时代&#xff0c;面对竞争日趋激烈的市场&#xff0c;数字化转型成为了企业提高效率和竞争力、实现可持续发展的重要手段。 这一两年来&#xff0c;我们也发现&#xff0c;越来越多的品牌企业开始探索数字化转型的实践&#xff0c;通过使用自建或者采买的数据…

【Linux网络】2分钟学习centos7永久修改网卡名称

目录 第一步&#xff0c;先查看网卡名称 第二步&#xff1a;先修改配置文件/etc/default/grub&#xff0c;添加net.ifnemes0 第三步&#xff1a;重新加载内核配置grub2-mkconfig -o /boot/grub2/grub.cfg 第四步&#xff1a;重启电脑 第五步&#xff1a;查看网卡名称&…

第三届 “鹏城杯”(初赛)

第三届 “鹏城杯”&#xff08;初赛&#xff09; WEB Web-web1 反序列化tostring打Hack类 Payload:O%3A1%3A%22H%22%3A1%3A%7Bs%3A8%3A%22username%22%3BO%3A6%3A%22Hacker%22%3A2%3A%7Bs%3A11%3A%22%00Hacker%00exp%22%3BN%3Bs%3A11%3A%22%00Hacker%00cmd%22%3BN%3B%7D%7D…

计算机丢失mfc140.dll是什么意思?附送修复教程

mfc140.dll是Microsoft Foundation Classes&#xff08;MFC&#xff09;库的一部分&#xff0c;是一种动态链接库&#xff08;DLL&#xff09;文件。MFC库是Microsoft提供的一种C编程框架&#xff0c;它为开发者提供了许多方便的工具和类&#xff0c;以简化Windows应用程序的开…

K8S知识点(七)

&#xff08;1&#xff09;实战入门-Namespace kubernets&#xff1a;系统创建的资源在这个命名空间里 &#xff0c;集群组件资源 kubrnets组件也是以pod的形式运行的 命令行方式操作 查看namespace和详情&#xff1a; 创建和查看和删除&#xff1a; 使用过配置文件操作&am…

云贝教育 |【PostgreSQL PGCA】pg15安装pg_hint_plan扩展包

pg15安装pg_hint_plan扩展包 pg当前是支持HINT固定执行计划&#xff0c;需要通过扩展包pg_hint_plan来实现 一、扩展包下载&#xff1a; Releases ossc-db/pg_hint_plan GitHub 二、选择v15版本 pg_hint_plan15 1.5.1 is released pg_hint_plan15 1.5.1 is released. This…

计算机网络第4章-通用转发和SDN

引子&#xff1a; 在前面&#xff0c;我们将基于目的地转发的特征总结为两个步骤&#xff1a; 查找目的IP地址&#xff08;匹配&#xff09;&#xff0c;然后将分组发送到有特定输出端口的交换结构&#xff08;“动作”&#xff09;。 但是这种转发特征会带来许多问题&#…

软件测试面试会问哪些问题?

软件测试面试&#xff0c;一般会被问到下面这九类问题。 1、基础问题 2、Linux命令 3、数据库 4、功能测试 5、Python基础 6、接口测试 7、自动化测试 8、性能测试 9、人事问题 接下来&#xff0c;以上9类问题&#xff0c;我都会分别结合2个案例&#xff0c;附上答案&#xff0…

【gltf-pipeline】安装gltf-pipeline 进行文件格式转换

问题 想使用gltf-pipeline进行gltf和glb格式转换。简单记录一下安装过程。 解决 1、安装Node.js Node.js下载路径&#xff1a;https://nodejs.org/en 建议默认设置安装。 添加系统环境变量&#xff1a; 测试安装是否成功&#xff1a; 在cmd.exe中运行&#xff1a; no…

self.register_buffer方法使用解析(pytorch)

self.register_buffer就是pytorch框架用来保存不更新参数的方法。 列子如下&#xff1a; self.register_buffer("position_emb", torch.randn((5, 3)))第一个参数position_emb传入一个字符串&#xff0c;表示这组参数的名字&#xff0c;第二个就是tensor形式的参数…

虚拟机网络没有有效的ip配置

虚拟机网络没有有效的ip配置&#xff1a; 原因猜测&#xff1a;或许是之前使用的操作系统把网络给占了。 解决方法&#xff1a;点击虚拟机的 遍历->网络编辑器->移除不要的网络&#xff0c;然后添加网络。&#xff08;下面的图就是我把虚拟网络全部移除&#xff0c;然后…

png怎么转jpg?这款图片转格式工具一学就会用

虽然png图片格式是一种无损压缩格式&#xff0c;但是png图片的内存大小也是比较大的&#xff0c;而且兼容性上也没有jpg图片好&#xff0c;许多平台推荐的也都是jpg格式&#xff0c;所以当我们需要把png转jpg格式的时候&#xff0c;就需要用到图片格式转换器&#xff0c;今天推…

【Qt绘制小猪】以建造者模式绘制小猪

效果 学以致用&#xff0c;使用设计模式之建造者模式绘制小猪。 代码 接口&#xff1a;申明绘制的步骤 PigBuilder.h #ifndef PIGBUILDER_H #define PIGBUILDER_H#include <QObject> #include <QPainter>class PigBuilder : public QObject {Q_OBJECT public:ex…

解密Elasticsearch:深入探究这款搜索和分析引擎

•开篇 最近使用Elasticsearch实现画像系统&#xff0c;实现的dmp的数据中台能力。同时调研了竞品的架构选型。以及重温了redis原理等。特此做一次es的总结和回顾。网上没看到有人用Elasticsearch来完成画像的。我来做第一次尝试。 背景说完&#xff0c;我们先思考一件事&…

计算机中丢失mfc140u.dll怎么解决

mfc140u.dll是一个Microsoft Visual C库文件&#xff0c;主要用于MFC&#xff08;Microsoft Foundation Class&#xff09;应用程序的开发。它包含了MFC应用程序所需的一些常用功能&#xff0c;如对话框、窗口、菜单等。当mfc140u.dll丢失时&#xff0c;可能会导致MFC应用程序无…

Android MotionLayout

MotionLayout exends ConstraintLayout(动画框架 过渡) View动画 API1 属性动画API11 过渡动画API18 root.width RootViewWidth TransitionManager.beginDelayedTransition(view) 过渡动画 可以改变其大小和流畅性 Fade 可以改变透明度 通过TrasitinManager管理 Go:动态替…

vue前端实现多个url下载并合并为zip文件

一、安装 npm install jszip npm install file-saver 二、引入 import axios from axios import JSZip from "jszip"; import FileSaver from "file-saver"; 三、核心代码 videoData:[/video/26519f026fc012521605563015227403.mp4,/video/f7b9cdae14…

数字通信和fpga概述——杜勇版本学习笔记

1数字通信处理流程 脉冲调制是每个数字通信系统中间必不可少的环节&#xff0c;通常是使用升余弦滚降滤波器来实现。 超外差接收机原理是利用本地产生的振荡波与输入信号混频&#xff0c;将输入信号频率变换为某个预先确定的频率的方法。超外差原理最早是由E.H.阿姆斯特朗于1…

2023年云计算发展趋势:生活的智能未来

目录 引言1 智能家居的崭新时代2 无人驾驶的崭新时代3 虚拟现实的扩展与改进4 人工智能的综合应用5 云计算的可持续性结语 引言 时光荏苒&#xff0c;科技的飞速发展已经成为当今社会的标志之一。在这个数字化时代&#xff0c;云计算已经成为推动技术革新和生活方式改变的关键…