집 >웹 프론트엔드 >JS 튜토리얼 >js를 통해 프로세스의 동적 표시 구현

js를 통해 프로세스의 동적 표시 구현

jacklove원래의: 2018-06-15 15:20:012038검색

프로세스가 많은 경우 프로세스 막대를 사용하여 아래와 같이 여러 단계에 따라 표시할 수 있기를 바랍니다.

위 기능에 해당하는 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>

The 여기서 사용되는 방법은 처리 상태를 기반으로 합니다. 여기서는 $status입니다. 이에 따라 스타일 클래스 class="active"를 해당 25edfb22a4f469ecb59f1190150159c6 태그에 추가하고 스타일 클래스 active에서 구현되는 것은 배경을 바꾸는 것입니다. 해당 위치의 이미지, 즉 원본 회색 프로세스 라인을 녹색 프로세스 라인으로 교체합니다. 즉, 교체 후 및 교체 전에 해당 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; }

사용된 jpg 리소스 링크: https://download.csdn .net /download/u012063507/10280748

해당 CSS를 설정한 후 다음 단계는 js를 작성하는 것입니다. $status 값에 따라 해당 25edfb22a4f469ecb59f1190150159c6에 클래스를 추가하면 이 기능을 구현할 수 있습니다.

<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 보기 코드:

해당 25edfb22a4f469ecb59f1190150159c6Class="active"가 태그에 추가된 것을 볼 수 있습니다. 이제 설정이 성공적으로 완료되었으며 프로세스 진행 상황이 동적으로 표시됩니다.
이 글에서는 js 구현 프로세스의 동적 표시를 소개합니다. 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트를 참고하세요.

js를 통해 프로세스의 동적 표시 구현

관련 기사