jQuery-UI ProgressBar

Question

我想要一个用于密码强度的progressbar，所以有没有一种方法可以在进度栏中写入文本。我已经尝试了很多方法，但都没有找到，有没有人可以帮我用事件处理程序来控制。我的代码是....

$( "#progressbar" ).progressbar({
        value: score
    });

outputResult($( "#progressbar" ), score);

$("#inputPassword").bind("keyup", checkVal);

function outputResult(selecter, value)
{

    selecter.progressbar( "option", "value", value);
        var selector = "#progressbar > div";
        $(selector).css({ 'background': 'Red' });
        $(selecter).text(value + ' %');

}

Answer 1

您可以创建一个内部span元素来包含文本：

<div id="progressbar">
    <span class="text">
    </span>
</div>

然后为该元素定义适当的样式：

.text { 
    color: white; 
    position: absolute;
}

然后在你的outputResult函数中：

$("#progressbar").progressbar("option", "value", value);
$("#progressbar span.text").text(value + "%");

下面是一个有效的示例：http://jsfiddle.net/v48eP/