Sample code sharing for dynamically displaying the progress bar of the review process status using JavaScript (picture)

For things with many processes, we hope to display them correspondingly with process bars according to different stages, which is very intuitive and brings an excellent user experience to users. The editor will share with you below JavaScriptImplementationAuditProcessDynamic display of statusProgress bar function, friends who need it can refer to it

For things with many processes, We hope to use the process bar to display accordingly according to different stages, as shown below:

The html code corresponding to the above functions is as follows:

<p class="col-md-12 col-lg-3"> 
   <p class="panel panel-default"> 
    <p class="tit06"> 
     <h3 id="漏洞处理状态">漏洞处理状态</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>

The method used here is based on the processing status, here is $status, correspondingly add a style class to the corresponding

<li> tag class="active" , and what is implemented in the style class active is to replace the background image at the corresponding position, that is, replace the original gray process lines with green process lines. That is, you need to set the corresponding css after and before replacement. The corresponding css here are as follows (part of \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; }

After setting the corresponding css, next step Just write js. According to the value of $status, add class to the corresponding

<li>. The js code to achieve this function is as follows:

<script type="text/javascript"> 
/*根据处理状态，添加或删除对应的样式名*/ 
function addClass(elem, className){ //增加类名 
  if(!elem.className){ 
      elem.className = className; 
      return; 
  } 
  var clazz = &#39; &#39; + elem.className + &#39; &#39;; 
  if(clazz.indexOf(&#39; &#39; + className + &#39; &#39;) === -1){ 
      elem.className = elem.className + &#39; &#39; + className; 
  } 
} 
 var step1 = document.getElementById(&#39;tab_step1&#39;), 
   step2 = document.getElementById(&#39;tab_step2&#39;), 
   step3 = document.getElementById(&#39;tab_step3&#39;) , 
   step4 = document.getElementById(&#39;tab_step4&#39;), 
   step5 = document.getElementById(&#39;tab_step5&#39;); 
 var status = &#39;<?php echo $status;?>&#39;; 
 switch(status){ 
   case &#39;1&#39;: //待确认 
     addClass(step2.parentNode, &#39;active&#39;); //parentNode即为包含step2的外一层标签，此处即为<li>标签 
     break; 
   case &#39;2&#39;: //待修复 
      addClass(step2.parentNode, &#39;active&#39;); 
      addClass(step3.parentNode, &#39;active&#39;); 
     break; 
   case &#39;3&#39;://已关闭 
     addClass(step2.parentNode, &#39;active&#39;); 
     addClass(step3.parentNode, &#39;active&#39;); 
     addClass(step4.parentNode, &#39;active&#39;); 
     break; 
   case &#39;4&#39;: //已公开 
     addClass(step2.parentNode, &#39;active&#39;); 
     addClass(step3.parentNode, &#39;active&#39;); 
     addClass(step4.parentNode, &#39;active&#39;); 
     addClass(step5.parentNode, &#39;end bottom-active&#39;); 
     break; 
 } 
</script>

After setting like this, change $ status is "to be repaired", the web page process is implemented as follows:

View the corresponding web page html code:

You can see that class="active" has been added to the corresponding <li> tag. At this point, the setting is successful and the process progress is dynamically displayed.

The above is the detailed content of Sample code sharing for dynamically displaying the progress bar of the review process status using JavaScript (picture). For more information, please follow other related articles on the PHP Chinese website!