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/