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>

여기서 사용된 방법은 처리 상태를 기반으로 합니다. 여기서는 $status입니다. 이에 따라 스타일 클래스 class="active"를 해당 <li> 태그에 추가하고 활성 스타일 클래스는 해당 위치 배경 이미지는 원래의 회색 프로세스 라인을 녹색 프로세스 라인으로 대체하는 것입니다. 즉, 교체 전후에 해당 CSS를 설정해야 합니다. 여기서 해당 CSS는 다음과 같습니다(assetsdefaultthreatrulesstyle.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; }

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

이렇게 설정한 후 $status 상태를 "대기"로 "Repair" 후 웹 페이지 프로세스는 다음과 같이 구현됩니다.

해당 웹 페이지 html 코드 보기:

해당 <li> 태그에 class="active"이 추가된 것을 볼 수 있습니다. 이제 설정이 성공적으로 완료되었으며 프로세스 진행 상황이 동적으로 표시됩니다.

위 내용은 JavaScript를 이용하여 심사과정 진행상태를 동적으로 표시하는 샘플코드 공유(그림)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!