web-dev-qa-db-fra.com

jQuery UI: Comment changer la couleur d'un ProgressBar?

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>

Maintenant, j'aimerais colorer la barre en fonction de sa valeur (par exemple, <10 rouges, <50 jaunes,> 50 verts). Comment puis-je faire cela?

Remarque: Il y a des questions similaires , mais les réponses n'étaient pas assez claires pour m'aider à faire avancer les choses. Espérons que quelqu'un puisse indiquer un moyen plus simple ou fournir des instructions plus détaillées. Merci.

jqueryjquery-uiprogress-bar
35
Thorsten

Je l'ai tripotée et voici ce que j'ai trouvé. Avec jQuery UI v1.8rc3, je peux remplacer les couleurs de thème pour la barre de progression.

alt text http://i42.tinypic.com/mt5v6p.jpg

Voici comment: Lorsque vous ajoutez un widget Progressbar à un div, avec quelque chose comme: 

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

... la barre de progression de jQuery UI crée un div au sein 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 The child (inner) div. 

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

Pour l’un ou l’autre, vous pouvez utiliser des couleurs plates ou des images. Si vous utilisez des images, veillez à définir le 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, ça prend soin de mettre les couleurs. Maintenant, si vous voulez définir de façon dynamique la couleur de la barre lorsque la valeur change, vous raccrochez 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

Remarque:

Si vous souhaitez remplacer les couleurs de toutes les barres de progression, les classes css à utiliser sont ui-widget-content, pour le "fond" ou div externe, et ui-widget-header pour la barre réelle (correspondant à la div interne). Comme ça: 

  .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 supprimez le préfixe .ui-progressbar, il remplacera les couleurs de tous les widgets de l'interface utilisateur, y compris les barres de progression. 

80
Cheeso

Utilisez le code suivant:

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

jQuery Progressbar utilise CSS et les 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 pilote réellement la barre de progression. Vous devrez pirater le fichier css pour pouvoir ajouter une nouvelle classe faisant référence à votre nouvelle image dans l'autre barre de progression. Je n'ai pas encore compris comment faire cela.

Afin de changer la couleur, vous devez modifier l'image png.

Ou, comme écrit plus haut, vous pouvez copier l’image, ajouter une seconde classe et les ajouter en utilisant jquery:

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

Comme l'exemple de travail sur les réponses acceptées ne semble pas fonctionner, je laisse celui-ci basé sur sa réponse au cas où quelqu'un le trouverait utile.

https://jsfiddle.net/benjamintorr/a1h9dtkf/

$(function() {
  $( ".progressbar" ).each(function(i, obj) {
    $( this ).progressbar({
     value: false
    });
    $( this ).bind('progressbarchange', function(event, ui) {
     updateColors( this );
    });
   });
  $( "button" ).on("click", function(event) {
    $( ".progressbar" ).each(function(i, obj) {
      $( this ).progressbar("option", {
        value: Math.floor(Math.random() * 100)
      });
    });
  });
});

function updateColors( progressBar ) {
  var value = $( progressBar ).progressbar("value");
  if ( value > 50 ) {
    progressColor = "green";
  } else if (value > 10) {
    progressColor = "#FF9900";
  } else {
    progressColor = "red";
  }
  $( progressBar ).find(".ui-progressbar-value").css("background", progressColor);
}
0
Benjamin Torres

Une chose simple serait lorsque vous initialisez la barre de progression avec les valeurs de votre js que vous faites:

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

Puisque vous voulez différentes couleurs pour 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 ne pouvais pas le faire fonctionner, alors j'ai essayé et cela a commencé à fonctionner.

0
user590849