首頁  >  文章  >  web前端  >  透過js實現流程動態顯示

透過js實現流程動態顯示

jacklove
jacklove原創
2018-06-15 15:20:011983瀏覽

對於有很多流程的東西,我們希望能夠根據不同的階段,用流程條對應地進行顯示,如下所示:

以上功能對應的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,對應的在對應的

  • 的標籤中增加樣式類別 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的值,在對應的

  • 中加入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程式碼:

    透過js實現流程動態顯示本文介紹了js實作流程動態顯示,更多相關內容請關注php中文網。

    相關推薦:

    particlesJS使用簡介相關內容

    JS中運算子i 與i的詳細分析

    Bootstrap jq jqajax php 資料庫增刪改查原始碼
    #

  • 以上是透過js實現流程動態顯示的詳細內容。更多資訊請關注PHP中文網其他相關文章!

    陳述:
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    上一篇:vue做一個菜單下一篇:vue做一個菜單