JavaScript实现审核流程状态的动态显示进度条


Posted in Javascript onMarch 15, 2017

对于有很多流程的东西,我们希望能够根据不同的阶段,用流程条对应地进行显示,如下所示:

JavaScript实现审核流程状态的动态显示进度条

以上功能对应的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 = '<?php echo $status;?>'; 
 switch(status){ 
   case '1': //待确认 
     addClass(step2.parentNode, 'active'); //parentNode即为包含step2的外一层标签,此处即为<li>标签 
     break; 
   case '2': //待修复 
      addClass(step2.parentNode, 'active'); 
      addClass(step3.parentNode, 'active'); 
     break; 
   case '3'://已关闭 
     addClass(step2.parentNode, 'active'); 
     addClass(step3.parentNode, 'active'); 
     addClass(step4.parentNode, 'active'); 
     break; 
   case '4': //已公开 
     addClass(step2.parentNode, 'active'); 
     addClass(step3.parentNode, 'active'); 
     addClass(step4.parentNode, 'active'); 
     addClass(step5.parentNode, 'end bottom-active'); 
     break; 
 } 
</script>

这样设置之后,更改$status的状态,为“待修复”后,网页流程实现如下:

JavaScript实现审核流程状态的动态显示进度条

查看对应的网页html代码:

JavaScript实现审核流程状态的动态显示进度条

可以看到在对应的<li>标签中添加了class="active",至此设置成功,实现动态显示流程进度。

以上所述是小编给大家介绍的JavaScript实现审核流程状态的动态显示进度条,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
自动完成JS类(纯JS, Ajax模式)
Mar 12 Javascript
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
Jan 06 Javascript
jquery如何实现锚点链接之间的平滑滚动
Dec 02 Javascript
javascript中call和apply的用法示例分析
Apr 02 Javascript
深入理解JavaScript 函数
Jun 06 Javascript
js实现单张图片平移切换效果
Oct 11 Javascript
webpack源码之loader机制详解
Apr 06 Javascript
vue2.0学习之axios的封装与vuex介绍
May 28 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
Jun 27 Javascript
javascript json对象小技巧之键名作为变量用法分析
Nov 11 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
Feb 04 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
Apr 13 Javascript
js实现自定义进度条效果
Mar 15 #Javascript
yii form 表单提交之前JS在提交按钮的验证方法
Mar 15 #Javascript
jQuery模拟窗口抖动效果
Mar 15 #Javascript
利用jQuery实现一个简单的表格上下翻页效果
Mar 14 #Javascript
基于React实现表单数据的添加和删除详解
Mar 14 #Javascript
Node.js 中exports 和 module.exports 的区别
Mar 14 #Javascript
JS检测数组类型的方法小结
Mar 14 #Javascript
You might like
如何使用PHP计算上一个月的今天
2013/05/23 PHP
ThinkPHP的L方法使用简介
2014/06/18 PHP
通过实例解析PHP数据类型转换方法
2020/07/11 PHP
vs2003 js文件编码问题的解决方法
2010/03/20 Javascript
js和C# 时间日期格式转换的简单实例
2016/05/28 Javascript
基于Angularjs实现分页功能
2016/05/30 Javascript
jQuery1.9+中删除了live以后的替代方法
2016/06/17 Javascript
jQuery动态生成表格及右键菜单功能示例
2017/01/13 Javascript
基于JQuery的购物车添加删除以及结算功能示例
2017/03/08 Javascript
javascript+jQuery实现360开机时间显示效果
2017/11/03 jQuery
javascript数组拍平方法总结
2018/01/20 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
2018/10/09 Javascript
利用不到200行代码写一款属于你自己的js类库
2019/07/08 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
2020/05/10 Javascript
vue实现整屏滚动切换
2020/06/29 Javascript
解决vue字符串换行问题(绝对管用)
2020/08/06 Javascript
[31:00]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS iG
2014/05/25 DOTA
理解python正则表达式
2016/01/15 Python
python实现求最长回文子串长度
2018/01/22 Python
Python并发之多进程的方法实例代码
2018/08/15 Python
Python实现针对json中某个关键字段进行排序操作示例
2018/12/25 Python
python实现猜拳小游戏
2020/04/05 Python
Python算法的时间复杂度和空间复杂度(实例解析)
2019/11/19 Python
利用4行Python代码监测每一行程序的运行时间和空间消耗
2020/04/22 Python
python except异常处理之后不退出,解决异常继续执行的实现
2020/04/25 Python
基于python实现复制文件并重命名
2020/09/16 Python
Canvas系列之滤镜效果
2019/02/12 HTML / CSS
职专应届生求职信
2013/11/16 职场文书
成绩单公证书
2014/04/10 职场文书
初中优秀班集体申报材料
2014/05/01 职场文书
法制宣传教育方案
2014/05/09 职场文书
雷人标语集锦
2014/06/19 职场文书
祖国在我心中演讲稿(小学生)
2014/09/23 职场文书
未中标通知书
2015/04/17 职场文书
安全承诺书格式范本
2015/04/28 职场文书
2015年企业员工工作总结范文
2015/05/21 职场文书