2011-06-01 20 views
6

Tengo una barra de progreso en una celda de tabla html. Parece expandirse al ancho de la celda de la tabla, pero quiero especificar explícitamente el alto de la barra de progreso.¿Es posible cambiar la altura en una barra de progreso de jquery ui?

¿Es posible especificar el alto de una barra de progreso de jQuery?

$(this).progressbar({ 
     value: parseInt($(this).attr("rel")) 
    }); 

Respuesta

12

Por supuesto que sí. Incluso hay un resizable progress bar demo.

¿Demasiado elegante para usted? Sólo tiene que utilizar .height():

$('#progressbar').height(400); 

Demostración: http://jsfiddle.net/mattball/N5AVv/

+1

i no quiero que mis usuarios cambiar el tamaño. Quiero especificar la altura programáticamente. No veo esta opción – leora

+0

y simplemente uso la altura: esa es la opción programática – Dann

+0

No funciona para mí. La demostración jsfiddle da un resultado vacío. También en mi página web el progreso de la parte inferior derecha se corta –

1

Usted tendrá que editar el archivo CSS jQuery UI. Se verá algo como

jquery-ui-1.8.17.custom.css 

Vaya a la parte inferior (~ línea 564) y su verá el siguiente atributo CSS:

.ui-progressbar (...); 

cambiar la altura del valor del atributo a lo que quieras, guardar el archivo y subirlo a su servidor. Actualice su navegador y tenga su barra de progreso personalizada.

2

también se puede utilizar esta función, que funciona para todos los attribures css

$("#progressbar").css("maxWidth", "200%"); 
Cuestiones relacionadas