Beispielcode-Sharing zur dynamischen Anzeige des Fortschrittsbalkens des Überprüfungsprozessstatus mithilfe von JavaScript (Bild)

Für Dinge mit vielen Prozessen hoffen wir, Prozessbalken zu verwenden, um sie entsprechend den verschiedenen Phasen anzuzeigen, was sehr intuitiv ist und den Benutzern ein hervorragendes Benutzererlebnis bietet. Im Folgenden werde ich JavaScript mit Ihnen teilen Implementieren Sie die Funktion Überprüfung Prozess dynamische Anzeige des Status Fortschrittsbalken . Freunde, die sie benötigen, können sich für Dinge mit vielen Prozessen an uns wenden Ich hoffe, die Prozessleiste entsprechend den verschiedenen Phasen anzeigen zu können, wie unten gezeigt:

Der den oben genannten Funktionen entsprechende HTML-Code lautet wie folgt:

Die hier verwendete Methode basiert auf dem Verarbeitungsstatus, hier ist

<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>

, und die entsprechende Stilklasse

wird zum entsprechenden <li>-Tag hinzugefügt und die Stilklasse aktiv wird implementiert Im entsprechenden Positionsersatz-Hintergrundbild werden die ursprünglichen grauen Prozesslinien durch grüne Prozesslinien ersetzt. Das heißt, Sie müssen das entsprechende CSS nach und vor dem Ersetzen festlegen. Das entsprechende CSS lautet hier wie folgt (Teil von assetdefaultthreatrulesstyle.css): $status class="active"

Nach dem Festlegen des entsprechenden CSS besteht der nächste Schritt darin Schreiben Sie js, entsprechend Für den Wert von $status fügen Sie einfach

.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; }

class

zum entsprechenden <li> hinzu. Der js-Code zum Implementieren dieser Funktion lautet wie folgt:

Nachher Wenn Sie eine solche Einstellung vornehmen, ändern Sie den Status von $status. Nachdem er „zu reparieren“ ist, wird der Webseitenprozess wie folgt implementiert:

<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>

Zeigen Sie den entsprechenden Webseiten-HTML-Code an :

Sie können sehen, dass

zum entsprechenden

-Tag hinzugefügt wurde. Die Einstellung ist nun erfolgreich und der Prozessfortschritt wird dynamisch angezeigt. <li>

Das obige ist der detaillierte Inhalt vonBeispielcode-Sharing zur dynamischen Anzeige des Fortschrittsbalkens des Überprüfungsprozessstatus mithilfe von JavaScript (Bild). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!