时间:2021-07-01 10:21:17 帮助过:177人阅读
对于有很多流程的东西,我们希望能够根据不同的阶段,用流程条对应地进行显示,如下所示:
以上功能对应的html代码如下:
<p class="col-md-12 col-lg-3"> <p class="panel panel-default"> <p class="tit06"> <h3>漏洞处理状态</h3> </p> <p class="status"> <ul> <li name="tab_step1_pub" class="top active"> <p class="info" id="tab_step1"> <h4> <p class="heading"></p> 待审阅</h4> <p class="text" >漏洞已提交,等待厂商审阅</p> </p> </li> <li name="tab_step2_pub" > <p class="info" id="tab_step2"> <h4> <p class="heading"></p> 待确认</h4> <p class="text" >漏洞已开始审阅,等待厂商确认</p> </p> </li> <li name="tab_step3_pub"> <p class="info" id="tab_step3"> <h4> <p class="heading"></p> 待修复</h4> <p class="text" >漏洞已被确认,等待厂商修复</p> </p> </li> <li name="tab_step4_pub"> <p class="info" id="tab_step4"> <h4> <p class="heading"></p> 已关闭</h4> <p class="text" >漏洞修复完毕,厂商关闭漏洞</p> </p> </li> <li name="tab_step5_pub" > <p class="info" id="tab_step5"> <h4> <p class="heading"></p> 已公开</h4> <p class="text" >厂商同意公开此漏洞</p> </p> </li> </ul> </p> </p> </p>
这里采用的方法是根据处理的状态,这里是$status
,对应的在相应的<li>的标签中增加样式类 class="active"
,而样式类active中实现的是在对应位置替换背景图片,即将原来的灰色流程线条替换成绿色的流程线条。即需要设置对应的替换后和替换前的css,这里对应的css如下(\assets\default\threatrules\style.css中的一部分):
设置好对应的css后,下一步就是编写js,根据$status的值,在对应的<li>中添加class即可,实现此功能的js代码如下:
这样设置之后,更改$status的状态,为“待修复”后,网页流程实现如下:
查看对应的网页html代码:
可以看到在对应的<li>
标签中添加了class="active"
,至此设置成功,实现动态显示流程进度。
以上就是JavaScript实现审核流程状态的动态显示进度条的示例代码分享(图)的详细内容,更多请关注Gxl网其它相关文章!