¿Hay alguna forma de mostrar la barra de progreso de jquery ui vertical?

Question

quiero una barra de progreso para mostrar el porcentaje de llenado pero quiero hacerlo vertical como un termómetro como este a continuación. ¿Es esto posible con una opción en la barra de progreso de Jquery UI? Quiero algo que se parece a this http://magellanband.files.wordpress.com/2009/05/fundraiser-goal-thermometer-thumb7625364.jpg

Answer 1

Hay a plugin, pero no lo he usado, así que no sé si lo puedes adaptar.

O bien, puede simplemente hacer su propia usando HTML & CSS. Hice a demo here donde agregué un control deslizante jQuery UI para controlar el aspecto de la barra. Aquí está el código básico (sólo para la barra)

HTML

<div class="progressbar"> 
<span class="progressbar-value"> 
    <em class="progressbar-cover"></em> 
</span> 
</div> 

CSS

.progressbar { 
width: 25px; 
height: 215px; 
position: relative; 
background: transparent url(http://i48.tinypic.com/290tvnk.png) no-repeat; 
} 
.progressbar-value { 
position: absolute; 
display: block; 
margin: 0; 
border: 0; 
width: 15px; 
height: 200px; 
top: 7px; 
left: 5px; 
overflow: hidden; 
text-indent: -30px; 
background: #0f0 url(http://i45.tinypic.com/minc5g.png) center center; 
} 
.progressbar-cover { 
position: absolute; 
display: block; 
width: 15px; 
height: 200px; 
border: 0; 
left: 0; 
bottom: 0%; 
background: transparent url(http://i49.tinypic.com/1zwge3s.png) repeat-x 0 0; 
} 

Answer 2

Actualmente no hay ninguna opción, pero sería fácil modificar el widget para hacer lo que quiera. El progressbar source es claro, simplemente modifique la función _refreshValue() en la parte inferior y toque un poco el CSS. ¡Buena suerte!

Answer 3

He encontrado que esto plugin. Permite orientación vertical y horizontal. Hice algunas modificaciones para el código con el fin de estar más cerca de su imagen. Aquí es cómo se puede usar:

1. HTML

   <div class="percentBar jProgressBar_Red"></div>

2. CSS

   .jProgressBar_Red .border {
background-color: #000000;
}
.jProgressBar_Red .border .background {
background-color: red;
}
.jProgressBar_Red .border .background .bar {
background-color: #ffffff;
}

3. jQuery

Debe incluir el Plugin y luego el script que usa el resto del personal. He modificado el demo que se proporciona en el sitio del complemento para que sea rojo, vertical y se detiene en el 100%. Estos son los cambios:

Para detener el progreso no para restablecer el uso de este:

function incPercent() { 
    percentDone = percentDone + 1; 
    if (percentDone > 100) { 
     percentDone = 100; 
    } 
    setPercent(); 
} 

La versión original está llenando la barra de progreso, de arriba abajo, así que invertí así:

function setPercent() { 

    bar.setPercent(100-percentDone); //set the progress 
    percentText.text(100-percentDone); //set the text (i.e. "xx%") 

    //make the bar gradually "whiter" as it approches 100%  
    var lr = Math.floor((255-r)* 0.8 * percentDone/100 + r); 
    var lg = Math.floor((255-g)* 0.8 * percentDone/100 + g); 
    var lb = Math.floor((255-b)* 0.8 * percentDone/100 + b); 

    //change the bar color of the bottom bar 
    //note: calling jProgressBar here simply casts the jQuery object as a jProgressBar object 
    bar.eq(1).jProgressBar().setBarColor("#" + lr.toString(16) + lg.toString(16) + lb.toString(16)); 
} 

También puede echar un vistazo al código y encontrar una manera mucho más agradable para esto. Las variables lr, lg, lb se usan para poner un degradado del color de relleno. Si desea usar eso, debe cambiar los valores de las variables r, g, b en el archivo default.js para que sea el color inicial. Si desea que la barra de progreso se vea con una forma diferente, por ejemplo un termómetro como en la imagen que proporcionó, puede colocar el termómetro vacío como fondo y encima el div que se va a llenar.

Answer 4

Necesita cambiar el código fuente de la barra de progreso de jquery ui, incluyendo CSS/JS, si usa jquery ui 1.8, se puede hacer referencia a esta demo aquí:

http://www.gbtags.com/gb/demoviewer/2001/e6a59fd7-c183-46cc-af2c-e3792c1c7f34/index.html.htm

Si usando otra versión de jQuery UI, es necesario modificar el código en consecuencia