• html实现竖直步骤条

    1、问题描述

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

    2、我的代码

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

            index.html

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8" />
    5. 		<title>title>
    6. 	head>
    7. 	<script type="text/javascript" src="./js/jquery.min.js">script>
    8. 	<link rel="stylesheet" href="./css/myStyle.css" />
    9. 	<body>
    10. 		<script type="text/javascript">
    11. 			$(document).ready(function() {
    12. 				// $("body").append(drawLine($("#step1"), $("#step2"),"black"));
    13. 				// $("body").append(drawLine($("#step2"), $("#step3"),"black"));
    14. 				// $("body").append(drawLine($("#step3"), $("#step4"),"black"));
    15. 				var arrStep = [];
    16. 				var index = 0;
    17. 				$(".step").each(function() {
    18. 					console.log($(this).attr("id"));
    19. 					arrStep[index++] = $(this).attr("id");
    20. 				})
    21. 				for (var i = 0; i < arrStep.length - 1; i++) {
    22. 					$("body").append(drawLine($("#" + arrStep[i]), $("#" + arrStep[i + 1]), "#DDDDDD"));
    23. 				}
    24. 				$("#step1").addClass("is-ready");
    25. 				//$("body").append(drawLine($("#step1"),$("#"+finalStepId),"#DDDDDD"));
    26.  
    27. 				$(".btnApprove").click(function() {
    28. 					var id = $(this).attr("id");
    29. 					var num = id.substr(id.length - 1, 1);
    30. 					var bAllow = true;
    31. 					// console.log(num)
    32. 					//如果当前步已完成，则直接退出函数
    33. 					if ($("#step" + num).hasClass("is-finish")) {
    34. 						return;
    35. 					}
    36. 					if (num > 1) {
    37. 						//第一步之后，只有当下一步未完成且当前步未完成时，上一步已完成，才可以点审批
    38. 						if ((!$("#step" + (Number(num) + 1)).hasClass("is-finish")) && ($("#step" + (Number(
    39. 								num) - 1)).hasClass("is-finish"))) {
    40. 							// console.log("num="+num)
    41. 							// console.log("bAllow="+bAllow)
    42. 							bAllow = true;
    43. 						} else {
    44. 							bAllow = false;
    45. 						}
    46. 					}
    47. 					if (bAllow) {
    48. 						console.log("step" + num)
    49. 						$("#step" + num).removeClass("is-ready");
    50. 						$("#step" + num).addClass("is-finish");
    51. 						if (document.getElementById("step" + (Number(num) + 1))) {
    52. 							$("#step" + (Number(num) + 1)).addClass("is-ready");
    53. 						}
    54. 						$("body").append(drawLine($("#step" + num), $("#step" + (Number(num) + 1)), "#4995FA"));
    55. 					}
    56.  
    57. 				});
    58.  
    59. 				$(".btnRefuse").click(function() {
    60. 					var id = $(this).attr("id");
    61. 					var num = id.substr(id.length - 1, 1);
    62. 					//如果当前步已完成，则直接退出函数
    63. 					if ($("#step" + num).hasClass("is-finish")) {
    64. 						return;
    65. 					}
    66. 					$("#step" + (Number(num) - 1)).removeClass("is-finish");
    67. 					$("#step" + (Number(num) - 1)).addClass("is-ready");
    68. 					$("#step" + num).removeClass("is-ready");
    69. 					$("#step-bar" + (Number(num) - 1) + "1").remove();
    70. 				})
    71. 			})
    72.  
    73. 			//type:1同意，0拒绝
    74. 			function drawLine(start, end, colorCode) {
    75. 				if (document.getElementById(start.attr("id")) && document.getElementById(end.attr("id"))) {
    76. 					var startId = start.attr("id");
    77. 					var endId = end.attr("id");
    78. 					var startNum = startId.substr(startId.length - 1, 1);
    79. 					var endNum = endId.substr(endId.length - 1, 1);
    80. 					var startObj = start.offset();
    81. 					var endObj = end.offset();
    82. 					var returnStr = ""
    83. 					if (colorCode == "#DDDDDD") {
    84. 						return `
      `
    85. 					}
    86. 					returnStr = returnStr +
    87. 						`
      `
    88. 					console.log(returnStr)
    89. 					return returnStr;
    90. 				}
    91. 			}
    92. 		script>
    93. 		<div class="step" id="step1">
    94. 			<div class="point" id="point1">div>
    95. 			<div class="content">步骤一div>
    96. 			<button class="btnApprove" id="btnApprove1">同意button>
    97. 			<button class="btnRefuse" id="btnRefuse1">拒绝button>
    98. 		div>
    99. 		
    100. 		<div class="step" id="step2">
    101. 			<div class="point" id="point2">div>
    102. 			<div class="content">步骤二div>
    103. 			<button class="btnApprove" id="btnApprove2">同意button>
    104. 			<button class="btnRefuse" id="btnRefuse2">拒绝button>
    105. 		div>
    106.  
    107. 		<div class="step" id="step3">
    108. 			<div class="point" id="point3">div>
    109. 			<div class="content">步骤三div>
    110. 			<button class="btnApprove" id="btnApprove3">同意button>
    111. 			<button class="btnRefuse" id="btnRefuse3">拒绝button>
    112. 		div>
    113.  
    114. 		<div class="step" id="step4">
    115. 			<div class="point" id="point4">div>
    116. 			<div class="content">步骤四div>
    117. 			<button class="btnApprove" id="btnApprove4">同意button>
    118. 			<button class="btnRefuse" id="btnRefuse4">拒绝button>
    119. 		div>
    120.  
    121. 		<div class="step" id="step5">
    122. 			<div class="point" id="point5">div>
    123. 			<div class="content">步骤五div>
    124. 			<button class="btnApprove" id="btnApprove5">同意button>
    125. 			<button class="btnRefuse" id="btnRefuse5">拒绝button>
    126. 		div>
    127.  
    128. 		<div class="step" id="step6">
    129. 			<div class="point" id="point6">div>
    130. 			<div class="content">步骤六div>
    131. 			<button class="btnApprove" id="btnApprove6">同意button>
    132. 			<button class="btnRefuse" id="btnRefuse6">拒绝button>
    133. 		div>
    134.  
    135. 		<div class="step" id="step7">
    136. 			<div class="point" id="point7">div>
    137. 			<div class="content">步骤七div>
    138. 			<button class="btnApprove" id="btnApprove7">同意button>
    139. 			<button class="btnRefuse" id="btnRefuse7">拒绝button>
    140. 		div>
    141.  
    142. 		<div class="step" id="step8">
    143. 			<div class="point" id="point8">div>
    144. 			<div class="content">步骤八div>
    145. 			<button class="btnApprove" id="btnApprove8">同意button>
    146. 			<button class="btnRefuse" id="btnRefuse8">拒绝button>
    147. 		div>
    148. 	body>
    149. html>

            myStyle.css

    1. .step {
    2. 	display: table;
    3. 	height: 100px;
    4. 	.point {
    5. 		display: table-cell;
    6. 		width: 10px;
    7. 		height: 10px;
    8. 		border-radius: 50%;
    9. 		/* background-color: #B4CFEC; */
    10. 		/* position: relative; */
    11. 		background-color:#DDDDDD;
    12. 		float: left;
    13. 		margin: 10px;
    14. 	}
    15.  
    16. 	.content {
    17. 		display: table-cell;
    18. 		position: relative;
    19. 		float: right;
    20. 		margin-left: 10px;
    21. 	}
    22. }
    23.  
    24. .step.is-finish{
    25. 	display: table;
    26. 	height: 100px;
    27. 	.point {
    28. 		display: table-cell;
    29. 		width: 10px;
    30. 		height: 10px;
    31. 		border-radius: 50%;
    32. 		/* background-color: #0E098B; */
    33. 		/* position: relative; */
    34. 		background-color:#B4CFEC;
    35. 		float: left;
    36. 		margin: 10px;
    37. 	}
    38. 	
    39. 	.content {
    40. 		display: table-cell;
    41. 		position: relative;
    42. 		float: right;
    43. 		margin-left: 10px;
    44. 	}
    45. }
    46.  
    47. .step.is-ready{
    48. 	display: table;
    49. 	height: 100px;
    50. 	.point {
    51. 		display: table-cell;
    52. 		width: 10px;
    53. 		height: 10px;
    54. 		border-radius: 50%;
    55. 		background-color: #0E098B;
    56. 		/* position: relative; */
    57. 		/* background-color:#B4CFEC; */
    58. 		float: left;
    59. 		margin: 10px;
    60. 	}
    61. 	
    62. 	.content {
    63. 		display: table-cell;
    64. 		position: relative;
    65. 		float: right;
    66. 		margin-left: 10px;
    67. 	}
    68. }
    69.  
    70. .step-bar {
    71. 	width: 1px;
    72. 	background-color: #4995FA;
    73. 	display: inline-block;
    74. 	position: absolute;
    75. 	z-index: 1;
    76. 	/*这里设置大于2，即可看到真正连线的其实是两个元素的中心坐标*/
    77. }
    78.  
    79. .btnApprove {
    80. 	background-color: aquamarine;
    81. 	position:absolute;
    82. 	margin-left: 100px;
    83. }
    84.  
    85. .btnRefuse {
    86. 	background-color:greenyellow;
    87. 	position:absolute;
    88. 	margin-left: 150px;
    89. }
    90.

    3、效果

    4、总结

            无

    5、参考资料

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

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

    模板字符串 - JavaScript | MDN 

  • 相关阅读:
    关于setInteval定时器在不同浏览器下表现差异
    最小栈（C++解法）
    NGINX缓存详解之服务端缓存
    QT SIGSEGV Segmentation fault
    C语言 指针进阶 贰
    【数据分享】2022年全国各城市公交线路与站点数据
    【Node.js】大前端技能最通俗易懂的讲解 快速入门必看
    序章 调度系统架构设计总述
    Pair RDD的操作
    蓝桥杯（日期问题纯暴力）
  • 原文地址：https://blog.csdn.net/weixin_42032770/article/details/134314847