在jQueryUI ProgressBar中显示值

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(jQuery用户界面设置一个的情况下display: none在元件上时的值是0).

如果您查看演示的来源,您会注意到<div class="ui-progressbar-value">添加了a .您可以在自己的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