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/