html实现竖直步骤条

最新推荐文章于 2024-03-12 10:36:50 发布
最新推荐文章于 2024-03-12 10:36:50 发布
阅读量662 收藏 2
点赞数
分类专栏： 工作 前端 文章标签： html 前端 jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42032770/article/details/134314847
版权

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 

金斗潼关
关注
专栏目录
【HTML】步骤进度条组件实现
Minuhy
04-09 2929
简单实现一个简约风格的进度条组件
纯HTML流程步骤条
12-08
纯HTML自适应流程步骤条，根据需求定制修改，下载即可用
HTML步骤条引导效果
05-03
SUI里面实现的步骤导航效果，纯css实现。
HTML制作任务步骤条,步骤进度条 源代码
01-06
HTML制作任务步骤条,步骤进度条 源代码 第一步,第二步,...
html、css、js实现步骤条(学习篇)
skyblue_afan的博客
03-07 3652
html，css，js实现步骤条
html步骤条,css步骤条（两种方法）
weixin_34827430的博客
06-16 1118
css步骤条/*方法一*/.stepDiv{width:1100px;height:50px;margin:0 auto;}.stepOne{width:150px;font-size:0;position:relative;float:left;}.stepOne div{background:#ff5837;width:125px;height:50px;vertical-align:text...
HTML竖直步骤条实现教程Demo
通过以上步骤和方法，开发者可以实现一个功能完善且用户体验良好的竖直步骤条组件。这样的组件在网站中常用于表单提交、注册流程、多步骤操作界面等场景，帮助用户更好地理解和完成一系列的操作。
layui-步骤条step-源码-导入即用
10-16
layui步骤条step是一款基于layui框架...将这些文件引入到你的项目中，根据需求调整配置和样式，即可轻松实现功能丰富的步骤条效果。对于前端开发者来说，layui-步骤条step是一个高效且美观的工具，大大提升了开发效率。
JS实现数据动态渲染的竖向步骤条
01-19
本文实例为大家分享了JS实现数据动态渲染竖向步骤条的具体代码，供大家参考，具体内容如下 实现以下效果： 运用的知识点主要是html的伪元素。然后步骤条通过js动态渲染。最后一条数据的状态颜色状态为高亮状态。 ...
HTML5 Canvas竖直线条视差特效特效代码
03-20
2. 创建线条：利用`beginPath`、`moveTo`和`lineTo`画出多条竖直线条，每条线可以有不同的颜色和位置。 3. 存储线条信息：将线条的起始位置、颜色等信息存储在一个数组中，以便后续处理。 4. 监听滚动事件：使用`...
HTML制作任务步骤进度条.zip
01-06
HTML制作任务步骤进度条.zip 第一步,第二步,...
简单HTML流程状态条
04-21
NULL 博文链接：https://antlove.iteye.com/blog/1930135
步骤条Demo.zip
11-09
在这个"步骤条Demo.zip"压缩包中，包含了一个html实现的竖直步骤条示例，这对于提升用户体验和简化复杂流程具有积极作用。 首先，我们要理解竖直步骤条与传统的水平步骤条的区别。传统的水平步骤条通常水平放置，而...
html实现多种风格步骤条
全栈工程师，博主正在等你，有合作、疑惑请私信博主。
06-20 2411
html实现多种风格步骤条，好看的步骤条源码，源码下载，格子风步骤条，花式风步骤条，进度风步骤条，线性风步骤条四种步骤条，代码独立，可以直接使用。也可直接预览效果。
制作html css 步骤进度条（完整代码）
WordPress主题大全
03-20 3190
在这个例子中，步骤进度条由一个进度条和一系列用文本表示的步骤组成。进度条将根据当前活动的步骤改变宽度，步骤的外观将根据它们是否处于活动状态而改变。您可以根据需要调整宽度、颜色和字体大小值，以自定义步骤进度条的外观。这将创建一个带有进度条和圆圈元素的基本步骤条来表示每个步骤。上一个和下一个按钮可用于在步骤之间导航，步骤栏的外观将根据当前活动步骤动态更新。
原生步骤条（html+css）支持拓展开发
最新发布
呼啦啦啦啦啦的博客
03-12 623
原生步骤条
使用 HTML、CSS 和 JavaScript 编写响应式步骤进度条
我的博客，不一样的自我表达
05-24 253
这就是本教程的全部内容，您现在应该有一个有效的响应式步骤进度条，您可以轻松地对其进行自定义以满足您的个人需求。与往常一样，您可以在Github上找到本教程中使用的完整工作源代码。触发时，eventListener它会根据单击的按钮增加或减少活动计数。在本教程中，我们将创建一个响应式步骤进度条。当一个大的表格被分成几个步骤时，这些通常被使用。这设置了进度条的基本样式，我们通过 JavaScript 切换它的宽度。将进度条宽度设置为基于活动步数和总步数的百分比。设置活动步骤边框和背景颜色的样式以匹配进度条。
原生html 步骤条 bootstrap样式
aa731679676的博客
05-05 1649
接手一基于bootstrap的老html项目 需要一款符合模型的步骤条 废话不多说 直接上代码 html代码： <div class="steps"> <div class="step step-success"> <div class="step-show"> <div class="step-circle"></div> <div class="step-line"></div> </div&
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

金斗潼关

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值