我这里有一个 Bootstrap 进度条:
<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 进度条,它是使用 Bootstrap 3.3.4 的 v0.8.5。
编辑 1:
根据要求,这是一个 JSFiddle 示例:https://jsfiddle.net/DTcHh/12460/ (不太熟悉使用 JSFiddle)
编辑 2:
请求广告,这是我正在使用的插件的链接:http://www.minddust.com/project/bootstrap-progressbar/
最佳答案
您可以使用 done
选项,您可以使用 回调函数
来更新 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
}
});
});
关于javascript - Bootstrap 3 进度条在转换完成时设置文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32762236/