quiero usar la barra de progreso de jquery ui para mostrar el pct del total diario. En mi caso, puedes repasar el total asignado. (Como estoy mostrando el PCT completo de una cierta distancia, y usted podría realmente ir por encima de la distancia requerida. ¿Admite esta herramienta tener un valor superior al 100% o hay otras herramientas GUI para hacer este tipo de cosas?cómo mostraría la barra de progreso mayor que 100%
Dependiendo del número involucrado, ¿qué hay de cambiar la escala para que no sea lineal y, por ejemplo, logarythmic? Yout luego termina con una barra que se mueve a diferentes velocidades dependiendo del tamaño del valor ... Si define lo que es 100% como 2/3 de la barra, puede ver un rebasamiento, pero aún estar dentro de los límites del barra de progreso. Si excede las dimensiones de la barra de progreso, entonces la interfaz de usuario es difícil de diseñar y mantener ...
Puede que sea mejor posicionar dos barras de progreso una al lado de la otra, colorear la primera verde y la segunda roja, y tener la barra de progreso izquierda 0-100% y la roja 100-lo que sea%
You ' Obtendré un buen efecto, entonces.
Igual que Nero cuando graba un CD con demasiado espacio asignado. – labilbe
Ah, estaba pensando lo mismo, excepto que pondría el segundo sobre el primero, por lo que se superpone. Además, si haces que la parte inferior parezca fuego y luego la superior parezca una sarta de alambre de púas, eso sería muy malo. –
No he probado esto, pero la barra en sí tiene su propia clase, ui-progressbar-value. Por lo tanto, si coloca la barra de progreso en un div myDiv, probablemente pueda configurar el ancho manualmente así:
$('#myDiv .ui-progressbar-value').width('120%')
o si desea animar:
$('#myDiv .ui-progressbar-value').animate({width:'120%'}, 'fast')
En el ejemplo aquí: http://jqueryui.com/demos/progressbar/#theming, el ancho es de 37%, así que creo que eso funcionaría.
que el 120% es el 120% del tamaño de sus padres, no de su propio tamaño actual, por lo que aunque cambiar el tamaño de esa manera podría funcionar (no sé), su muestra exacta cambiará de tamaño a un tamaño no relacionado. – Jasper
@Jasper Estoy bastante seguro de que así es como se supone que funciona el widget. .ui-progressbar-value está dentro de .ui-progressbar, por lo que debería funcionar perfectamente. Lo siento si eso no estaba claro en mi respuesta. El bit myDiv es solo para que pueda seleccionar la barra de progreso correcta. – colinmarc
Veo ahora, tiene toda la razón y me equivoqué, lo siento – Jasper
La implementación actual de jQuery de la barra de progreso no permite valores fuera del rango que va de 0 a 100. He estado trabajando en una implementación de reemplazo para dicho complemento, que se puede encontrar en http://github.com/azatoth/jquery-ui/tree/progressbar pero aún no he implementado cualquier funcionalidad para visualizar rangos fuera del 100%, pero es una buena idea y podría implementar una opción para mostrar diferentes rangos. en este momento, cualquier rango de entrada se recalcula para estar dentro del rango del 100%.
Probablemente haya alguna manera de hacerlo, pero tendría que modificar jquery, que es algo que no lo recomiendo En cambio, recomendaría tratar de "falsificar" un resultado similar. Una opción sería, como lo mencionó SLC, simplemente colocar dos barras de progreso una al lado de la otra.
Sin embargo, creo que iría con una superposición en su lugar. Por ejemplo, primero tiene una barra de progreso con un fondo blanco y una barra verde, pero para mostrar el 120%, solo usa una barra de progreso con un fondo verde y una barra roja al 20%. Tal vez un ejemplo de código será más claro:
<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>
En lo personal, me acaba de rodar mi propia ... éste está enteramente basado en CSS y yo sólo estoy usando el control deslizante jQuery UI para the demo.
HTML (Nota: las clases se han agregado para que coincidan con las clases de jquery ui, pero no existe la clase ui-progressbar-text, que yo sepa).
<div id="progressbar" class="ui-progressbar ui-widget ui-widget-content ui-corner-all">
<div class="ui-progressbar-value ui-widget-header ui-corner-left">
<span class="ui-progressbar-text">10%</span>
</div>
</div>
CSS
.ui-progressbar {
height: 20px;
width: 50%;
border: silver 4px solid;
margin: 0;
padding: 0;
}
.ui-progressbar-value {
height: 20px;
margin: 0;
padding: 0;
text-align: right;
background: #080;
width: 10%;
}
.ui-progressbar-text {
position: relative;
top: -3px;
left: 0;
padding: 0 5px;
font-size: 14px;
font-weight: bold;
color: #000;
}
una barra de progreso es una buena idea cuando se puede predecir cuando una tarea va a terminar.
Por ejemplo, descargar un archivo usando bytes.
Dado que su caso tiene una distancia requerida y real, le recomiendo usar un cuadro de texto formateado en lugar de su barra de progreso.
He aquí dos ejemplos:
distancia real: 3.4 de 4.5
Distancia real: 4,7 de 4,5
se puede jugar con el color o añadir iconos para indicar cuando se excede la distancia requerida.
estos van a 11. eso es uno más fuerte, ¿verdad? –