Rumah >hujung hadapan web >tutorial js >通过js实现流程动态显示

通过js实现流程动态显示

jacklove
jackloveasal
2018-06-15 15:20:012039semak imbas

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

以上功能对应的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,对应的在相应的25edfb22a4f469ecb59f1190150159c6的标签中增加样式类  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; }

其中用到的jpg资源链接:https://download.csdn.net/download/u012063507/10280748

设置好对应的css后,下一步就是编写js,根据$status的值,在对应的25edfb22a4f469ecb59f1190150159c6中添加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>

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


查看对应的网页html代码:


可以看到在对应的25edfb22a4f469ecb59f1190150159c6标签中添加了class="active",至此设置成功,实现动态显示流程进度。
本文介绍了js实现流程动态显示,更多相关内容请关注php中文网。

相关推荐:

particlesJS使用简介相关内容

JS中运算符i++与++i的详细分析

Bootstrap+jq+jqajax+php+数据库增删改查源码

Atas ialah kandungan terperinci 通过js实现流程动态显示. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
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
Artikel sebelumnya:vue做一个菜单Artikel seterusnya:Web表单的JS插件(精品推荐)