動態更改jQuery進度條的顏色

Question

我有一個JQuery進度條，我想主題（文檔here）動態顯示：它會從紅色開始，然後隨着進度變爲黃色，最後變爲綠色。看起來這只是設置樣式顏色屬性的問題，但我似乎無法找到合適的屬性。

Answer 1

jQuery UI進度條沒有明確設置的顏色;相反，它會從UI主題繼承「小部件標題」背景圖像。然後，改變顏色的最簡單方法是設置覆蓋背景的樣式。例如：

.ui-progressbar.beginning .ui-progressbar-value { background: red; } 
.ui-progressbar.middle .ui-progressbar-value { background: yellow; } 
.ui-progressbar.end .ui-progressbar-value { background: green; } 

（或者，您也可以使用不同的背景影像。）然後，只需設置它的值時更改進度條的類：

function updateProgressbar(current, target) { 
    var value = parseInt(current/target * 100); 

    $progressbar 
     .progressbar("value", value) 
     .removeClass("beginning middle end") 
     .addClass(value < 40 ? "beginning" : value < 80 ? "middle" : "end"); 
} 

Working example.