Je veux utiliser la barre de progression de l'interface utilisateur JQuery pour montrer le PCT du total quotidien. Dans mon cas, vous pouvez réellement aller sur le total alloué. (Comme je montrais PCT complète d'une certaine distance et que vous pourriez réellement aller au-dessus de la distance requise. Cet outil prend-il en charge une valeur supérieure à 100% ou y a-t-il d'autres outils d'interface graphique pour faire ce genre de chose?
7 Réponses :
Vous ferez peut-être mieux de positionnement de deux barres de progression côte à côte, de la couleur du premier vert et du second rouge, et avez la barre de progression gauche 0-100% et le rouge 100-quel que soit le%
Vous aurez un bon effet alors.
Identique à Nero lorsque vous brûlez un CD avec trop d'espace alloué.
Ah, je pensais la même chose, sauf que je mettrais la seconde au sommet du premier, de sorte qu'il se chevauche. De plus, si vous faites ressembler le fond à un feu, puis le sommet ressemble à une chaîne de fil de fer barbelé, ce serait vraiment mauvais cul.
Je n'ai pas testé cela, mais la barre elle-même a sa propre classe, ou si vous vouliez l'animer: P > ui-progresseur-valeur code>. Donc, si vous mettez la barre de progression dans un DIV mydiv code>, vous pouvez probablement régler la largeur manuellement comme ceci: $('#myDiv .ui-progressbar-value').animate({width:'120%'}, 'fast')
Cette taille de 120% est de 120% de la taille de son parent, et non de sa propre taille actuelle, alors tout en le redimensionnant comme cela pourrait fonctionner (je ne sais pas), votre échantillon exact redimensionnera à une taille sans rapport.
@Jasper Je suis sûr que c'est comment le widget est censé fonctionner. .ui-ProgressBar-Valeur est à l'intérieur .ui-Progressbar, de sorte qu'il devrait fonctionner parfaitement. Désolé si cela n'était pas clair dans ma réponse. Le bit MyDIV est juste pour que vous puissiez sélectionner la bonne zone de progression.
Je vois maintenant, vous avez absolument raison et j'étais juste tort, je suis désolé
La mise en œuvre actuelle de JQuery de la barre de progression ne permet pas de valoriser les valeurs en dehors de la plage de 0 à 100. Je travaille sur une implémentation de remplacement pour ledit plugin, qui peut être trouvée à
Selon le nombre impliqué, qu'en est-il de modifier l'échelle pour ne pas être linéaire et la rendant par exemple, logarithmique? Vous vous retrouvez ensuite avec une barre qui se déplace à différentes vitesses en fonction de la taille de la valeur ... Si vous définissez tout ce qui est 100% comme 2/3 de la barre, vous pouvez voir un dépassement, mais toujours dans les limites de la barre de progression. Si vous dépassez les dimensions de la barre de progression, elle rend l'interface utilisateur difficile à concevoir et à entretenir ...
Il y a probablement un moyen de le faire, mais vous devriez modifier JQuery, ce que je ne le recommanderais pas. Au lieu de cela, je recommanderais d'essayer de "faire semblant" un résultat similaire. Une option serait - comme la SLC mentionnée - simplement mettre deux progressistes à côté de l'autre.
Cependant, je pense que je vais aller avec une superposition à la place. Par exemple, vous avez d'abord une barre de progression avec un fond blanc et une barre verte, mais pour afficher 120%, vous utilisez simplement une barre de progression avec un fond vert et une barre rouge à 20%. Un exemple de code sera peut-être plus clair: P>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
var val = 40;
$(document).ready(function() {
$("#progressbar").progressbar({ value: val });
$("#plusTen").bind("click", function ()
{
setValue($( "#progressbar" ), val + 10 );
val += 10;
});
$("#minusTen").bind("click", function ()
{
setValue($( "#progressbar" ), val - 10 );
val -= 10;
});
});
function setValue(bar, value)
{
if (value > 100)
{
value -= 100;
bar.removeClass("belowMax");
bar.addClass("aboveMax");
}
else
{
bar.removeClass("aboveMax");
bar.addClass("belowMax");
}
bar.progressbar( "option", "value", value);
}
</script>
<style type='text/css'>
#progressbar.aboveMax.ui-progressbar
{
background-image: none;
background-color: #00FF00;
}
#progressbar.aboveMax .ui-progressbar-value
{
background-image: none;
background-color: #FF0000;
}
#progressbar.belowMax.ui-progressbar
{
background-image: none;
background-color: #FFFFFF;
}
#progressbar.belowMax .ui-progressbar-value
{
background-image: none;
background-color: #00FF00;
}
</style>
</head>
<body style="font-size:62.5%;">
<div id='progressbar' class='belowMax'></div>
<br />
<input type='button' value='+10' id='plusTen' />
<input type='button' value='-10' id='minusTen' />
</body>
</html>
Personnellement, je voudrais simplement rouler le mien ... Celui-ci est entièrement basé sur la CSS et je n'utilise que le curseur Ui JQuery UI pour La démo .
html (Remarque: les classes ajoutées pour correspondre aux classes d'interface utilisateur JQuery, mais il n'y a pas de css UI-ProgressBar-Text classe, que je connaisse). < / p>
Ohh mec tu es un génie. Comment puis-je donner +10? J'ai modifié votre violon un peu pour sauvegarder l'espace jsfiddle.net/z6k3c/86
Une barre de progression est une bonne idée lorsque vous pouvez prédire quand une tâche se terminera.
Par exemple, télécharger un fichier à l'aide d'octets.
Compte tenu de votre cas a une distance requise et réelle, je recommande d'utiliser une zone de texte formatée à la place de votre barre de progression.
Voici deux exemples:
Distance réelle: 3.4 sur 4.5
Distance réelle: 4.7 sur 4.5
Vous pouvez jouer avec la couleur ou ajouter des icônes pour indiquer lorsque vous dépassez la distance requise.
Ceux-ci vont à 11. C'est un plus fort, innit?