Question

是否有一些调整为进度条控件添加标题？我希望设置一个显示当前百分比的居中标题。

THX

Answer 1

这是一个CSS问题。我已经将标签直接置于进度条上方。我这样做的方法是：

将您的进度条代码包含在div中，并在容器末尾添加清除div。然后，将您的标签添加到容器中，并将float添加到左侧。在标签中添加一些空格，使其不会触及进度条的一侧：

<div id='pb_container'>
    <div style='float: left' id='label'>&nbsp;&nbsp;&nbsp;My Label</div>
    <div id='pb'></div>
    <div style="clear: both;"></div>
</div>

实例化进度条，标签应该在进度条中浮动，向左侧稍微浮动一下。您将必须使用填充和元素的宽度/高度来使其浮动到您想要的位置。（例如，像酒吧的中心）

Try it here。从我的CSS代码中可以看出，它需要一点点摆弄才能使它正确居中，但它看起来不错。

Answer 2

您只需添加一个带有某些样式的<div>即可获得下方的中心标题，如下所示：

$("#progressbar").progressbar({
    value: 37
}).append("<div class='caption'>37%</div>");

还有一些CSS：

#progressbar .caption { width: 50px; margin: 0 auto; }

You can give it a try here，只需使用$("#progressbar .caption").html(value)进行更新即可。

Answer 3

试试这个，很简单：

<div id="progressBar" class="progressBar">
    <span class="progressBarText">In Progress</span>
</div>

CSS：

.progressBar {
width:80%;
margin:auto;
position:relative;
height:50px;
line-height:50px;
text-align:center;
}
.progressBarText {
    color: white;
    position: absolute;
    width: 50%;
    left:25%;
}
<script>
$('#progressBar').progressbar(
            {
                value: 80

            });
</script>

jQuery：将文本添加到进度条

3 个答案: