jsによる動的プロセス表示を実現

プロセスが多いものについては、以下に示すように、プロセス バーを使用して、さまざまな段階に応じてプロセスを表示したいと考えています:

上記の関数に対応する 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 は次のとおりです (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 を設定したら、次のステップは、$status の値に従って、この関数を実装するためのクラスを対応する

に追加することです。

<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 のステータスを「修復保留中」に変更すると、Web ページのプロセスが次のように実装されます:

対応する Web ページの HTML を表示するコード:

対応する

class="active" がタグに追加されたことがわかります。設定が成功し、プロセスの進行状況が動的に表示されます。
この記事では、js 実装プロセスの動的表示について紹介します。関連コンテンツについては、php 中国語 Web サイトを参照してください。

関連する推奨事項:

ParticlesJSの使い方紹介関連コンテンツ

JSの演算子i++と++iの詳細な分析

Bootstrap+jq+jqajax+php+データベースの追加、削除、変更、確認ソースコード

以上がjsによる動的プロセス表示を実現の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。