Otra de las facilidades que nos ofrece JQuery es la creación de barras de progreso, siendo las propiedades de este widget:
- disabled: desactiva la barra de progreso.
- max: establece el valor máximo admitido.
- value: permite establecer y obtener el valor actual.
En cuanto a sus métodos, entre otros disponemos de:
- destroy(): elimina la barra de progreso.
- enable() / disable(): activar/desactivar la barra de progreso.
- value(): devuelve o establece el valor actual.
Estudia ahora el siguiente código de ejemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>InformaticaPC | Barra de progreso con JQuery UI</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body { background-color:lightyellow;font-family:Arial;font-size:10pt; }
#progreso { width:200px; }
#porcentaje { text-align:center; }
</style>
<!-- Observa que agregamos también la librería JQuery UI -->
<script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../lib/jquery-ui-1.10.1.custom.min.js"></script>
<!-- Agregamos también el archivo CSS del theme que usemos -->
<link type="text/css" rel="stylesheet" href="../lib/css/smoothness/jquery-ui-1.10.1.custom.css" />
<script type="text/javascript">
$(document).ready(function()
{
// Creamos la barra de progreso
$("#progreso").progressbar( {max:1000, value:800} );
// Al hacer clic en el botón le asignamos el valor introducido
$("#boton").click(function() {
var porcentaje = parseInt( $("#porcentaje").val(), 10);
$("#progreso").progressbar("value", porcentaje);
})
});
</script>
</head>
<body>
<div id="progreso"></div>
<p>Introduce un número del 1 al 1000 y pulsa el botón:</p>
<input type="text" id="porcentaje" size="3" value="500" />
<input type="button" id="boton" value="Actualizar" />
</body>
</html>
EXPLICACIÓN:
- Insertar una barra de progreso es tan simple como crear un 'DIV' y llamar al método progressbar() (en este caso hemos establecido un valor máximo de 1000 y un valor actual de 800 para la misma).
- Observa cómo al hacer clic en el botón le asignamos el valor que hayamos escrito en el cuadro de texto.

Vea también: [ Progressbar ] - [ Progressbar (ejemplo) ]