对于有很多流程的东西,我们希望能够根据不同的阶段,用流程条对应地进行显示,如下所示:
以上功能对应的html代码如下:
<div class="col-md-12 col-lg-3"> <div class="panel panel-default"> <div class="tit06"> <h3>漏洞处理状态</h3> </div> <div class="status"> <ul> <li name="__tab_step1_pub" class="top active"> <div class="info" id="tab_step1"> <h4> <div class="heading"></div> 待审阅</h4> <p class="text" >漏洞已提交,等待厂商审阅</p> </div> </li> <li name="__tab_step2_pub" > <div class="info" id="tab_step2"> <h4> <div class="heading"></div> 待确认</h4> <p class="text" >漏洞已开始审阅,等待厂商确认</p> </div> </li> <li name="__tab_step3_pub"> <div class="info" id="tab_step3"> <h4> <div class="heading"></div> 待修复</h4> <p class="text" >漏洞已被确认,等待厂商修复</p> </div> </li> <li name="__tab_step4_pub"> <div class="info" id="tab_step4"> <h4> <div class="heading"></div> 已关闭</h4> <p class="text" >漏洞修复完毕,厂商关闭漏洞</p> </div> </li> <li name="__tab_step5_pub" > <div class="info" id="tab_step5"> <h4> <div class="heading"></div> 已公开</h4> <p class="text" >厂商同意公开此漏洞</p> </div> </li> </ul> </div> </div> </div>
这里采用的方法是根据处理的状态,这里是$status
,对应的在相应的<li>的标签中增加样式类 class="active"
,而样式类active中实现的是在对应位置替换背景图片,即将原来的灰色流程线条替换成绿色的流程线条。即需要设置对应的替换后和替换前的css,这里对应的css如下(\assets\default\threatrules\style.css中的一部分):
.status ul { padding: 15px; } .status ul li { overflow: hidden; background: url("../threatrules/steps-line.jpg") repeat-y -3px 0px; padding: 26px 0 0px; } .status .active { background: url("../threatrules/steps-line-over.jpg") repeat-y -3px 0px; } .status .end { background: url("../threatrules/steps-line-over.jpg") repeat-y -3px 0px; } .status .end .heading { background: url("../threatrules/steps-over.jpg") no-repeat 0px 0px; } .status .bottom { background: url("../threatrules/steps-line.jpg") repeat-y -3px 0px; } .status .skip { background: url("../threatrules/steps-line-skip.jpg") repeat-y -3px 0px; } .status .skip .heading { background: url("../threatrules/steps-skip.jpg") no-repeat 0px 0px; } .status .active .heading { background: url("../threatrules/steps-over.jpg") no-repeat 0px 0px; } .status .heading { float: left; width: 20px; height: 20px; background: url("../threatrules/steps.jpg") no-repeat 0px 0px; margin-right: 5px; } .status .top { padding-top: 0px; } .status .bottom { background: url("../threatrules/steps-line-b1.jpg") no-repeat 0px 0px; } .status .bottom-active { background: url("../threatrules/steps-line-b2.jpg") no-repeat 0px 0px; }
设置好对应的css后,下一步就是编写js,根据$status的值,在对应的<li>中添加class即可,实现此功能的js代码如下:
<script type="text/javascript"> /*根据处理状态,添加或删除对应的样式名*/ function addClass(elem, className){ //增加类名 if(!elem.className){ elem.className = className; return; } var clazz = ' ' + elem.className + ' '; if(clazz.indexOf(' ' + className + ' ') === -1){ elem.className = elem.className + ' ' + className; } } var step1 = document.getElementById('tab_step1'), step2 = document.getElementById('tab_step2'), step3 = document.getElementById('tab_step3') , step4 = document.getElementById('tab_step4'), step5 = document.getElementById('tab_step5'); var status = '<"text-align: center">查看对应的网页html代码:
可以看到在对应的
<li>
标签中添加了class="active"
,至此设置成功,实现动态显示流程进度。以上所述是小编给大家介绍的JavaScript实现审核流程状态的动态显示进度条,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年09月21日
2024年09月21日
- 命运圣契2024公测最新兑换码大全 命运圣契开服可用兑换码汇总
- 银霞.1979-《回答·兰花草》新加坡限量复黑版[WAV+CUE]
- 王菲.1996-《乐乐精逊SACD日本限量版[WAV+CUE]
- 王菲.1996-《乐乐精逊SACD日本限量版[WAV+CUE]
- 不止黑神话!杭州给原创企业真金白银扶持 打造“杭州游戏”品牌
- 很有多样性:《战锤》首次引入非二元性别角色
- 《少女前线2:追放》项目组将裁员 官方:进一步优化组织结构
- 陈慧琳.2002-闪亮每一天新歌+精选2CD【正东】【WAV+CUE】
- 袁培华.1992-有缘【歌林】【WAV+CUE】
- 王瑞霞.1996-是我太软心【名冠】【WAV+CUE】
- 《谭维维 30首经典流行歌曲精选辑 2CD》[WAV/分轨][1.1GB]
- 《赵传 出道三十年全新大碟 你过得还好吗》[WAV/分轨][460MB]
- 《发烧四大天王 磁性男声HiFi发烧碟 2CD》[WAV/分轨][1GB]
- 黑神话悟空上品鼠司空精魄获取方法一览|上品鼠司空精魄收集攻略
- 《真三国无双:起源》新情报将于9月26日公开,实机演示亮相!