Question

我想基于前进和后退来实现部分进度条动画

考虑我有四个部分，每个部分都有前进和后退按钮，在第1部分填充详细信息后点击下一个增加进度条25％，现在进入第2部分后填充点击下一步它应该增加50％。< / p>

在第2节的同一个案例中我有前进和后退按钮如果我从第2部分向后点击它同时进入第1部分进度条也需要减少25％这种情况是否有任何预定义的库可用或有更好的方法来处理这个

 <div class="row hidden-xs name-progress-bar" style="margin-top:-15px">
                    <div class="col-md-12">
                        <div class="progress" id="progress1">
                            <div class="progress-bar" data-progress1 = "0" id="myBar" role="progressbar"  aria-valuemin="0" aria-valuemax="100">
                            </div>
                        </div>
                        <div class="progress" id="progress2">
                            <div class="progress-bar2" data-progress2 = "0" id="myBar2" role="progressbar"  aria-valuemin="0" aria-valuemax="100">
                            </div>
                        </div>
                    </div>
                    <div class="progress-group col-md-12">
                        <div class="custom-name-progress-bar" [style.width.%]="constWidth" *ngFor="let configData of progressBarConfig | objectToArray">
                            <button class="progress-button">{{configData.name}}</button>
                        </div>
                    </div>
                </div>

jQuery的：

 static activeProgressBar(){
        var total = 4;
        var current = parseInt(jQuery('.page-heading-mobile').attr('data-step'));
        var average  = (current/total)*100
        //var average = (100/totalSection);
        var active= parseInt(jQuery('.progress-bar').attr('data-progress1'));
        active = active + average;
        var activePercent = active + '%';
        var progress = jQuery('.progress-bar');
        jQuery('.progress-bar').attr('data-progress1',active);
        progress.css('width',activePercent);
    }

    static completedProgressBar(){
        var total = 4;    
        var current = parseInt(jQuery('.page-heading-mobile').attr('data-step'));
        var average  = (current/total)*100
        //var average = (100/totalSection);
        var active = parseInt(jQuery('.progress-bar2').attr('data-progress2'));
        active = active + average;
        var activePercent = active + '%';
        var progress = jQuery('.progress-bar2');
        jQuery('.progress-bar2').attr('data-progress2',active);
        progress.css('width',activePercent);
    }

我有两个进度条是活跃的，并且有两种不同颜色的竞争

返回并继续

Answer 1

//HTML    

<progress max="100" value="0" id="progressBar"></progress>
    <div id="tabs">
    <ul>
      <li><a href="#tabs-1">Nunc tincidunt</a></li>
      <li><a href="#tabs-2">Proin dolor</a></li>
      <li><a href="#tabs-3">Aenean lacinia</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>

    </ul>
    <div id="tabs-1">
      <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
    </div>
    <div id="tabs-2">
      <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
    </div>
    <div id="tabs-3">
      <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>

    </div>
    <div id="tabs-4">
      <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>

    </div>

    <div class="button-container">
      <button id="back">Back</button>
      <button id="saveContinue">Save &amp; Continue</button>
    </div>
    </div>

//Script

$(function() {
  $("#tabs").tabs();
  var countOfTabs = $("#tabs li").length;
  var slotValue = 100/countOfTabs;

  $("#saveContinue").on("click", function() {
    var currentTab = $("#tabs").tabs('option', 'active');
    currentTab++;
    $("#tabs").tabs({
          active: currentTab 
      });

       if(currentTab==0){
            currentTab = 1;
          }
      for(i=1;i<=currentTab;i++){
        if(i==currentTab){

          var finalVal = slotValue*i;
            $("#progressBar").attr("value", finalVal);
        }
      }

  });

  $("#back").on("click", function() {
  var currentTab = $("#tabs").tabs('option', 'active');

      if(currentTab==0){
        $("#progressBar").attr("value", "0");
      }else{
        $("#tabs").tabs({
          active: currentTab - 1
        });
      }
        for(i=1;i<=currentTab;i++){
        if(i==currentTab){
         i--;
          var finalVal = slotValue*i;
            $("#progressBar").attr("value", finalVal);
            break;
        }
      }

  });



});

//CSS

  .button-container{text-align: center;}
#progressBar{
  width: 100%;
}

如何在html5中处理向导进度条？

1 个答案: