informaticaPC

Tutorial de JQuery

Creando una barra de progreso


Regístrate

Tus datos no serán compartidos, solo nosotros te enviaremos información y novedades

Progressbar (barra de progreso)

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>

Ejemplo

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.
Más información

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

Primera página Página anterior Siguiente Última página
Usamos cookies para ofrecerte una experiencia mejorada, el continuar navegando supone que aceptas su uso