Question

我已经设置了一个简单的jQuery UI ProgressBar：

<script type="text/javascript">
    $(function() {
        $("#progressbar").progressbar({
                value: 35
        });
    });
</script>
<div id="progressbar">  </div>

除此之外，我还想在进度条中显示一些文字（对于初学者，我只是使用“值”）。

我似乎无法让它发挥作用。

奖金问题：如何格式化显示的文本（例如颜色，对齐方式）？

Answer 1

不要引入另一个元素（span）和新风格，而是利用已经存在的内容：

var myPer = 35;
$("#progressbar")
    .progressbar({ value: myPer })
    .children('.ui-progressbar-value')
    .html(myPer.toPrecision(3) + '%')
    .css("display", "block");

css("display", "block")用于处理值为0的情况（当值为0时，jQuery UI在元素上设置display: none。

如果您查看The demo的来源，您会发现添加了<div class="ui-progressbar-value">。您可以在自己的CSS中简单地覆盖此类，例如：

.ui-progressbar-value {
    font-size: 13px;
    font-weight: normal;
    line-height: 18px;
    padding-left: 10px;
}

Answer 2

我这样做的方式是：

<div class="progressbar"><span style="position:absolute; margin-left:10px; margin-top:2px>45% or whatever text you want to put in here</span></div>

您可以调整margin-top和margin-left，使文本位于进度条的中心。然后在页面的javascript部分中为具有类进度条的元素应用progressbar插件

希望这个帮助

Answer 3

在根据这里的答案摆弄一些解决方案后，我最终得到了这个：

HTML：

<div id="progress"><span class="caption">Loading...please wait</span></div>

JS：

$("#progress").children('span.caption').html(percentage + '%');

（要在更新进度条值的函数内调用）

CSS：

#progress {
  height: 18px;
}

#progress .ui-progressbar {
  position: relative;
}

#progress .ui-progressbar-value {
  margin-top: -20px;
}

#progress span.caption {
  display: block;
  position: static;
  text-align: center;
}

优点：

标题居中，没有编码定位（如果标题宽度改变，则需要）
没有JS奇怪的操纵
简单而简约的CSS

Answer 4

此解决方案允许基于文本的灵活宽度以及文本居中，样式文本等。在兼容模式下在Chrome，FF，IE8和IE8中工作。没有测试IE6。

HTML：

 <div class="progress"><span>70%</span></div>

脚本：

$(".progress").each(function() {
    $(this).progressbar({
        value: 70
    }).children("span").appendTo(this);
});

CSS：

.progress.ui-progressbar {position:relative;height:2em;}
.progress span {position:static;margin-top:-2em;text-align:center;display:block;line-height:2em;padding-left:10px;padding-right:10px;}
.progress[aria-valuenow="0"] span {margin-top:0px;}

工作样本：http://jsfiddle.net/hasYK/

Answer 5

我用过这个：

<div id="progressbar" style="margin: 0px 0px 16px 0px; "><span style="position: absolute;text-align: center;width: 269px;margin: 7px 0 0 0; ">My %</span></div>

在jQueryUI ProgressBar中显示值

5 个答案: