Question

我这里有一个引导进度条：

<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-warning six-sec-ease-in-out" role="progressbar" data-transitiongoal="100" aria-label="0"></div>
</div>

六秒安逸的课程就是为了延长过渡期，而且代码已经结束了:(不确定它是否会影响到这一点 - 不要认为这样做）

.six-sec-ease-in-out {
  -webkit-transition: width 6s ease-in-out;
  -moz-transition: width 6s ease-in-out;
  -ms-transition: width 6s ease-in-out;
  -o-transition: width 6s ease-in-out;
  transition: width 6s ease-in-out;
}

这是我的JS只是为了保持文本的中心：

<script>
    $(document).ready(function () {
        $('.progress .progress-bar').progressbar({ display_text: 'center' });    
    });
</script>

我的问题：

如果转换完成后（如果已完成100％），如何将进度文本从百分比更改为“任务已完成”？

我假设我使用javascript来执行此操作，但我不知道应该使用哪种方法。我目前正在使用最新的bootstrap进度条，即v0.8.5，使用bootstrap 3.3.4。

修改1：

根据要求，这是一个JSFiddle示例：https://jsfiddle.net/DTcHh/12460/ （不太熟悉使用JSFiddle）

编辑2：

广告请求，这是我正在使用的插件的链接：http://www.minddust.com/project/bootstrap-progressbar/

Answer 1

DEMO 和 Doc

您可以使用done选项，callback function更新text，如下所示：

$(document).ready(function () {
   $('.progress .progress-bar').progressbar({
       display_text: 'center',
       done:function(){ //use this option
        setTimeout(function(){
            $(".progressbar-front-text").text("The task is completed");
        },100);//small amount of time to render html 100ms infact
       }
   });    
});

Bootstrap 3进度条设置转换完成后的文本

1 个答案: