【免费】步骤条Demo.zip_步骤条demo资源-CSDN文库

共3个文件

html：1个

js：1个

css：1个

需积分: 0 176 浏览量 2023-11-09 16:31:19 上传评论收藏 35KB ZIP 举报

在IT行业中，尤其是在网页开发领域，创建用户友好的界面是至关重要的。步骤条（Step Bar）是一种常见的设计元素，用于引导用户按照特定顺序完成一系列任务，如购物结账、表单填写等。在这个"步骤条Demo.zip"压缩包中，包含了一个html实现的竖直步骤条示例，这对于提升用户体验和简化复杂流程具有积极作用。我们要理解竖直步骤条与传统的水平步骤条的区别。传统的水平步骤条通常水平放置，而竖直步骤条则是垂直排列，更适合空间有限或需要强调垂直流程的应用场景。这种设计可以使页面布局更紧凑，同时清晰地展示步骤间的上下关系。在HTML实现步骤条的过程中，主要涉及以下几个关键知识点： 1. HTML结构：构建步骤条的基本元素通常包括`<div>`标签，用于创建每个步骤的容器，以及`<span>`或`<li>`来表示每个步骤的状态（如已完成、进行中、未开始）。每个步骤可以包含标题和描述，以提供更多的信息。 2. CSS样式：为了让步骤条具有视觉吸引力，我们需要使用CSS来定义样式。这可能包括背景颜色、边框、字体样式、间距等。对于竖直步骤条，CSS的`display: flex`属性可以帮助我们轻松实现元素的垂直排列。 3. JavaScript交互：为了动态更新步骤条的状态（如完成、跳过、错误），我们可能需要使用JavaScript。例如，当用户完成一个步骤时，对应的步骤图标或文字颜色会改变，表示已通过。这可以通过监听事件（如表单提交）并更新DOM来实现。 4. Accessibility（无障碍性）：在设计过程中，确保步骤条对所有用户友好，包括视力障碍者。利用`aria-*`属性来添加额外的信息，如`aria-current="step"`表示当前步骤，`aria-describedby`用于关联步骤描述，确保屏幕阅读器能够正确读取。 5. 响应式设计：为了适应不同设备和屏幕尺寸，步骤条应具备响应式设计。可以使用媒体查询（media queries）来调整在小屏幕设备上的布局，使其依然清晰易用。 6. 轮廓和焦点管理：在用户使用键盘导航时，确保步骤条中的每个步骤都能够获得焦点，并有明显的轮廓提示。这可以通过设置`tabindex`和调整`outline`属性来实现。在压缩包中的"步骤条Demo"文件中，我们可以看到这些概念的实际应用，包括HTML结构、CSS样式和可能的JavaScript交互。通过研究和修改这个示例，开发者可以更好地理解和掌握如何在自己的项目中实现类似的竖直步骤条功能，从而提升网页的用户体验。

资源推荐

资源详情

资源评论

收起资源包目录

步骤条Demo.zip （3个子文件）

步骤条Demo

jquery.min.js 94KB

img

css

myStyle.css 2KB

index.html 6KB

<!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" 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>

评论收藏

内容反馈