2

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

谢谢

4

3 回答 3

3

这更像是一个 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>

实例化进度条，标签应该浮动在进度条中，向左一点。您将不得不使用元素的填充和宽度/高度以使其浮动到您想要的位置。（比如酒吧的中心）

在这里试试。正如你从我的 CSS 代码中看到的那样，它需要一些小技巧才能将其居中，但它看起来不错。

于 2010-09-07T22:19:34.683 回答
3

您可以添加<div>带有一些样式的 a 以在下方获得居中的标题，如下所示：

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

还有一些 CSS：

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

你可以在这里试一试，只是$("#progressbar .caption").html(value)用来更新它。

于 2010-09-07T22:20:13.327 回答
0

试试这个，很简单：

<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>
于 2017-07-15T03:41:03.940 回答