javascript - How do I show step description on the progress bar? - Stack Overflow

admin管理员组

文章数量:1427301

I currently have this, a bootstrap progress bar:

<div class="progress">
   <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="8" style="width: 20%;">
      Step 1 of 8
   </div>
</div>

The I have some tabs and each time one is active, i run this:

jQuery('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
  var step = jQuery(e.target).data('step');
  var percent = (parseInt(step) / 8) * 100;
  jQuery('.progress-bar').css({width: percent + '%'});
  jQuery('.progress-bar').text("Step " + step + " di 8");
});

That's fine and it works but how about having the description of each step on top?

UPDATE

This is a jsFiddle

Something along those lines

I currently have this, a bootstrap progress bar:

<div class="progress">
   <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="8" style="width: 20%;">
      Step 1 of 8
   </div>
</div>

The I have some tabs and each time one is active, i run this:

jQuery('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
  var step = jQuery(e.target).data('step');
  var percent = (parseInt(step) / 8) * 100;
  jQuery('.progress-bar').css({width: percent + '%'});
  jQuery('.progress-bar').text("Step " + step + " di 8");
});

That's fine and it works but how about having the description of each step on top?

UPDATE

This is a jsFiddle

Something along those lines

• javascript
• jquery
• css
• twitter-bootstrap

Share Improve this question Follow edited Apr 19, 2017 at 15:29 Roberto Marras asked Apr 19, 2017 at 15:17 Roberto MarrasRoberto Marras 15322 silver badges1111 bronze badges 24

• 2 Please provide a Minimal, Complete, and Verifiable example of your attempt. – andreas Commented Apr 19, 2017 at 15:19
• 1 @andreas building a jsFiddle, will update – Roberto Marras Commented Apr 19, 2017 at 15:19
• question has been updated with a jsfiddle/b2eyxgf9/3 @andreas – Roberto Marras Commented Apr 19, 2017 at 15:21
• Ok, what do you mean with "details on top"? – andreas Commented Apr 19, 2017 at 15:21
• 1 Where is the description in your fiddle? You need to be more clearer about what you try to achieve... – andreas Commented Apr 19, 2017 at 15:24

 |  Show 19 more ments

2 Answers 2

Sorted by: Reset to default 4

Here's a way of doing this with flexbox, nice and simple:

jQuery('a[data-toggle="tab"]').on('show.bs.tab', function(e) {
    var step = jQuery(e.target).data('step');
    var percent = (parseInt(step) / 8) * 100;
    jQuery('.progress-bar').css({
        width: percent + '%'
    });
    jQuery('.progress-bar').text("Step " + step + " di 8");
});

#wiz_menu {
    display: flex;
    flex-direction: row;
}

#wiz_menu li {
    width: 100%;
    float: none;
    text-align: center;
}

<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="8" style="width: 20%;">
        Step 1 of 8
    </div>
</div>

<ul id="wiz_menu" class="nav nav-tabs">
    <li class="active"><a href="#step1" data-toggle="tab" data-step="1">Your Details</a></li>
    <li><a href="#step2" data-toggle="tab" data-step="2">Bank Details</a></li>
    <li><a href="#step3" data-toggle="tab" data-step="3">Another step</a></li>
    <li><a href="#step4" data-toggle="tab" data-step="4">Step 4</a></li>
    <li><a href="#step5" data-toggle="tab" data-step="5">Step 5</a></li>
    <li><a href="#step6" data-toggle="tab" data-step="6">Step 6</a></li>
    <li><a href="#step7" data-toggle="tab" data-step="7">Step 7</a></li>
    <li><a href="#step8" data-toggle="tab" data-step="8">Step 8</a></li>
</ul>

Just added some code to your jsfiddle, hope this helps. You have to amend it as per your requirement.

    var maxProgressBarWidth = 0;
    jQuery('.nav li').each(function() {
    	maxProgressBarWidth += jQuery(this).outerWidth();
    });
    jQuery('.progress').width(maxProgressBarWidth);
    jQuery('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
      var step = jQuery(e.target).data('step');
      var percent = (parseInt(step) / 8) * 100;
      jQuery('.tab-desc').removeClass('active').filter('[data-step=' + step + ']').addClass('active');
      jQuery('.progress-bar').css({width: percent + '%'});
      jQuery('.progress-bar').text("Step " + step + " di 8");
    });

.tab-desc {
  display: none;
}
.tab-desc.active {
  display: block;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="progress">
   <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="8" style="width: 20%;">
      Step 1 of 8
   </div>
</div>

<ul id="wiz_menu" class="nav nav-tabs">
                   <li class="active"><a href="#step1" data-toggle="tab" data-step="1">Step 1</a></li>
                   <li><a href="#step2" data-toggle="tab" data-step="2">Step 2</a></li>
                   <li><a href="#step3" data-toggle="tab" data-step="3">Step 3</a></li>
                   <li><a href="#step4" data-toggle="tab" data-step="4">Step 4</a></li>
                   <li><a href="#step5" data-toggle="tab" data-step="5">Step 5</a></li>
                   <li><a href="#step6" data-toggle="tab" data-step="6">Step 6</a></li>
                   <li><a href="#step7" data-toggle="tab" data-step="7">Step 7</a></li>
                   <li><a href="#step8" data-toggle="tab" data-step="8">Step 8</a></li>
                </ul>
                
<div class="tab-desc active" data-step="1">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo quia explicabo deserunt a, quod repellat necessitatibus quisquam perferendis unde quo! Quibusdam officia impedit quam, odio vero suscipit voluptatibus, neque ex!
</div>
<div class="tab-desc" data-step="2">
  ecessitatibus quisquam perferendis unde quo! Quibusdam officia impedit quam, odio vero suscipit voluptatibus, neque ex!
</div>
<div class="tab-desc" data-step="3">
  Lorem ipsum dolor sit amet, consectetur Quibusdam officia impedit quam, odio vero suscipit voluptatibus, neque ex!
</div>
<div class="tab-desc" data-step="4">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo quia explicabo deserunt a, quod repellat necessitatibus quisquam perferendis unde quo! Quibusdam officia impedit quam, odio vero suscipit voluptatibus, neque ex!
</div>
<div class="tab-desc" data-step="5">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo quia explicabo deserunt a, quod repellat necessitatibus quisquam perferendis unde quo! 
</div>
<div class="tab-desc" data-step="6">
   Quibusdam officia impedit quam, odio vero suscipit voluptatibus, neque ex!
</div>
<div class="tab-desc" data-step="7">
  Illo quia explicabo deserunt a, quod repellat necessitatibus quisquam perferendis unde quo! Quibusdam officia impedit quam, odio vero suscipit voluptatibus, neque ex!
</div>
<div class="tab-desc" data-step="8">
  Lorem ipsum dolor sit amet, consectetur 
</div>

EDIT: You can move the markup (html) above the steps tab list and amend/style it as per your screenshot.

Update js to calculate the width of the tabs and set it to progress div

本文标签： javascriptHow do I show step description on the progress barStack Overflow