jQuery UI : Comment changer la couleur d'une barre de progression ?

Question

J'ai mis en place une simple barre de progression jQueryUI :

<script type="text/javascript">
            $(function() {
                    $("#progressbar").progressbar({
                            value: 35
                    });
            });
            </script>
<div id="progressbar">  </div>

J'aimerais maintenant colorer la barre en fonction de sa valeur (par exemple, <10 rouge, <50 jaune, >50 vert). Comment puis-je faire cela ?

Remarque : Il existe questions similaires mais les réponses n'étaient pas assez claires pour m'aider à faire avancer les choses. J'espère que quelqu'un pourra m'indiquer une méthode plus simple ou me fournir des instructions plus détaillées. Merci.

Answer 1

J'ai bricolé avec et voici ce que j'ai trouvé. En utilisant jQuery UI v1.8rc3, je peux remplacer les couleurs du thème pour la barre de progression.

Voici comment : Lorsque vous ajoutez un widget de barre de progression à un div, avec quelque chose comme :

$("#mydiv").progressbar({value:0});

...la barre de progression jQuery UI crée une div à l'intérieur de votre div ; cette div interne représente la barre de valeur. Pour définir la couleur de la barre, définissez l'arrière-plan de la div enfant (interne). la div enfant (intérieure).

Vous pouvez également définir la couleur de l'espace vide de la barre de progression, l'espace situé à droite de la barre de valeur. Pour ce faire, définissez l'arrière-plan de la division externe.

Dans les deux cas, vous pouvez utiliser des couleurs plates ou des images. Si vous utilisez des images, veillez à définir le paramètre repeat-x. Le code pour le faire ressemble à ceci :

html :

<div id='mainObj' class="inputDiv">
  <div id='pbar0' style="height: 20px;"></div>
  <div id='pbar1' style="height: 20px;"></div>
  <div id='pbar2' style="height: 20px;"></div>
  <div id='pbar3' style="height: 20px;"></div>
</div>

js :

function init(){
    // four progress bars
    $("#pbar0").progressbar({ "value": 63 });
    $("#pbar1").progressbar({ "value": 47 });
    $("#pbar2").progressbar({ "value": 33 });
    $("#pbar3").progressbar({ "value": 21 });

    // the zero'th progressbar gets the default theme

    // set colors for progressbar #1
    $("#pbar1").css({ 'background': 'url(images/white-40x100.png) #ffffff repeat-x 50% 50%;' });
    $("#pbar1 > div").css({ 'background': 'url(images/lime-1x100.png) #cccccc repeat-x 50% 50%;' });

    // set colors for progressbar #2
    $("#pbar2").css({ 'background': 'url(images/lt-blue-40x100.png) #ffffff repeat-x 50% 50%' });
    $("#pbar2 > div").css({ 'background': 'url(images/dustyblue-1x100.png) #cccccc repeat-x 50% 50%' });

    // set colors for progressbar #3
    $("#pbar3").css({ 'background': 'LightYellow' });
    $("#pbar3 > div").css({ 'background': 'Orange' });
}

ok, cela permet de régler les couleurs. Maintenant, si vous voulez définir dynamiquement la couleur de la barre lorsque la valeur change, vous accrochez l'événement progressbarchange, comme ceci :

    $("#pbar0").bind('progressbarchange', function(event, ui) {
        var selector = "#" + this.id + " > div";
        var value = this.getAttribute( "aria-valuenow" );
        if (value < 10){
            $(selector).css({ 'background': 'Red' });
        } else if (value < 30){
            $(selector).css({ 'background': 'Orange' });
        } else if (value < 50){
            $(selector).css({ 'background': 'Yellow' });
        } else{
            $(selector).css({ 'background': 'LightGreen' });
        }
    });

Démonstration de travail : http://jsbin.com/atiwe3/3

---

Note :

Si vous voulez remplacer les couleurs pour toutes les barres de progression les classes css à utiliser sont ui-widget-content pour la division "background" ou extérieure, et ui-widget-header pour la barre actuelle (correspondant au div interne). Comme ceci :

  .ui-progressbar.ui-widget-content {
     background: url(images/white-40x100.png) #ffffff repeat-x 50% 50%;
  }

  .ui-progressbar.ui-widget-header {
     color: Blue;
     background: url(images/lime-1x100.png) #cccccc repeat-x 50% 50%;
  }

Si vous éliminez le .ui-progressbar il remplacera les couleurs de tous les widgets de l'interface utilisateur, y compris les barres de progression.

Answer 2

Utilisez le code suivant :

$( "#nahilaga" ).progressbar({
     value: 20,
     create: function(event, ui) {$(this).find('.ui-widget-header').css({'background-color':'red'})}
   });

Answer 3

JQuery Progressbar utilise des CSS et des images.

Votre réponse à Stackoverflow dit la même chose :

il y a une entrée css appelée .ui-widget-overlay qui fait référence à l'image ui-bg_diagonals-thick_20_666666_40x40.png, qui, je pense, est l'image qui fait réellement fonctionner la barre de progression. Vous devrez modifier la CSS pour pouvoir ajouter une nouvelle classe qui fait référence à votre nouvelle image dans l'autre barre de progression ; je n'ai pas encore trouvé comment le faire.

Pour changer la couleur, il faudrait modifier l'image png.

Ou comme écrit ci-dessus, vous pouvez copier l'image, ajouter une deuxième classe et les ajouter en utilisant jquery :

$(progressBar).addClass('secondImage');

Answer 4

Une chose simple serait que lorsque vous initialisez la barre de progression avec des valeurs dans votre js vous fassiez :

$(progressBarId).children().css('backgroud',) ;

Puisque vous voulez des couleurs différentes pour les différentes barres de progression, vous pouvez faire :

if($(progressBarId).value() <10 )
//set a color
if (..)
//set another color

J'espère que cela répond à votre question. J'ai essayé de faire ce que le gars a dit dans la première réponse, mais je n'ai pas réussi à le faire fonctionner, alors j'ai essayé ceci et ça a commencé à fonctionner.