JQuery的進度條 - 添加文字和改變背景顏色

我想使用jQuery進度條來顯示用戶在課程方面取得的進展。JQuery的進度條 - 添加文字和改變背景顏色

在進度條，我想顯示文本課程進度70％
我想改變進度條的默認灰色

這是我已經這樣做了遠 - 這讓我在進度條的中心添加文本：

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


<div style="width:600px;" id="progressbar"> 
    <div style="float:left;color:black;text-align:center;width:100%;padding-top:3px;">Course Progress 
</div>

但我無法弄清楚如何改變顏色。它沒有動態地改變 - 只是一種顏色是不花白:)

感謝

來源

2012-05-26 Gublooo

假設你正在使用jQueryUI的，進度條的背景由CSS屬性控制 - 這是一個堅實的圖像。

style屬性是.ui-widget-header，所以你要更改背景圖片爲。在文檔的頭部，（或者，如果你沒有進入頭部，然後身體會做）把下面的，如果你想要一個奇特的背景圖片：

<style type='text/css'> 
    .ui-widget-header { 
     background-image: url('link-to-a-new-gradient-bar-here.png') !important; 
    } 
</style>

或替代，一個簡單的單色背景：

<style type='text/css'> 
    .ui-widget-header { 
     background-image: none !important; 
     background-color: #FF0000 !important; //Any colour can go here 
    } 
</style>

的!important是必要的，以確保新的樣式將覆蓋現有的CSS。

而且，你錯過了你的進度條HTML結束標記。

來源

2012-05-26 12:24:02 Death

工作就像一個魅力 - 感謝一大堆:) – Gublooo

你好工作演示簡單的爲您的需要:) http://jsfiddle.net/Y9c3R/1/

這裏很好閱讀：http://docs.jquery.com/UI/Progressbar

許多精心製作的一個的在這裏駐留：http://jsfiddle.net/ZQrnC/ = Dynamically change the color of jQuery Progress Bar

，如果你想讀進一步：jQuery UI: How to change the color of a ProgressBar?

jQuery代碼

var $progressbar = $("#progressbar").progressbar({ value: 70 }).addClass("beginning");

CSS

.ui-progressbar.beginning .ui-progressbar-value { background: red; }

來源

2012-05-26 12:35:44

JQuery的進度條 - 添加文字和改變背景顏色

回答

相關問題