// 这里设置默认初始步骤
StepContentFn('.starBox', "已申请:杨博:2020/2/3:已申请审批意见, 已立项:杨博:2020/5/5:已立项审批意见, 实施中:张三:2020/5/9:实施中意见, 等待中:杨博:2020/6/6:等待中审批意见,已完结:杨博:2020/6/6:已完结审批意见,zzz:涂磊:2023/6/6:new添加", '等待中');
如有添加，在后面 按格式 ,zzz:涂磊:2023/6/6:new添加
即可
1.添加一个UniHTMLFrame1到窗口，设置 其HTML属性为
<!doctype html> <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> </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', "已申请:杨博:2020/2/3:已申请审批意见, 已立项:杨博:2020/5/5:已立项审批意见, 实施中:张三:2020/5/9:实施中意见, 等待中:杨博:2020/6/6:等待中审批意见,已完结:杨博:2020/6/6:已完结审批意见,zzz:涂磊:2023/6/6:new添加", '等待中'); </script> </body> </html>
2添加CSS
在ServerModule的
@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; }
内容来源于网络如有侵权请私信删除
文章来源: 博客园
- 还没有人评论，欢迎说说您的想法！
客服
