4

Jquery プログレス バーを使用して、ユーザーがコースで行った進行状況を表示することを考えています。

  • 進行状況バー内に、コースの進行状況 70% というテキストを表示したい
  • そして、プログレスバーのデフォルトの灰色を変更したい

これは私がこれまで行ってきたことです - これにより、プログレスバーの中央にテキストを追加できます:

$(関数() {
    $( "#progressbar" ).progressbar({
        値: 70
    });
);


<div style="width:600px;" id="プログレスバー">
    <div style="float:left;color:black;text-align:center;width:100%;padding-top:3px;">コースの進行状況
</div>

しかし、色を変更する方法がわかりません。動的に変更する必要はありません-灰色ではない1つの色だけです:)

ありがとう

4

2 に答える 2

7

CSS属性によって制御されるプログレスバーの背景であるjQueryUIを使用していると仮定すると、これはソリッドイメージです。

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>

新しいスタイルが既存の!importantCSSを上書きすることを確認するために必要です。

また、プログレスバーのHTMLに終了タグがありません。

于 2012-05-26T12:24:02.663 に答える
3

あなたのニーズに合わせて簡単な動作デモ:) http://jsfiddle.net/Y9c3R/1/

ここでよく読んでください：http://docs.jquery.com/UI/Progressbar

ここに非常に精巧なものがあります: http://jsfiddle.net/ZQrnC/ = jQuery プログレス バーの色を動的に変更します。

さらに読みたい場合: 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-26T12:35:44.843 に答える