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/