Rumah > hujung hadapan web > tutorial js > JavaScript实现审核流程状态的动态显示进度条的示例代码分享(图)

JavaScript实现审核流程状态的动态显示进度条的示例代码分享(图)

黄舟
Lepaskan: 2017-03-20 14:44:07
asal
3958 orang telah melayarinya

对于有很多流程的东西,我们希望能够根据不同的阶段,用流程条对应地进行显示,非常直观,给用户带来极好的用户体验,下面小编给大家分享JavaScript实现审核流程状态的动态显示进度条功能,需要的的朋友参考下

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

JavaScript实现审核流程状态的动态显示进度条的示例代码分享(图)

以上功能对应的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>
Salin selepas log masuk

这里采用的方法是根据处理的状态,这里是$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; }
Salin selepas log masuk

设置好对应的css后,下一步就是编写js,根据$status的值,在对应的<li>中添加class即可,实现此功能的js代码如下:

<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>
Salin selepas log masuk

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

JavaScript实现审核流程状态的动态显示进度条的示例代码分享(图)

查看对应的网页html代码:

JavaScript实现审核流程状态的动态显示进度条的示例代码分享(图)

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

Atas ialah kandungan terperinci JavaScript实现审核流程状态的动态显示进度条的示例代码分享(图). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan