informaticaPC

Tutorial de JQuery

Creando una barra de progreso

Regístrate

Los datos recopilados tienen como finalidad el envío de novedades sobre contenidos formativos propios (tanto en modalidad gratuita como de pago) y de terceros en calidad de afiliado, así como también noticias, información y otros contenidos relacionados con la informática y las nuevas tecnologías, siendo responsable de dicha información Francisco Javier Medina Medina (propietario de InformaticaPC.com).
Al obtener tu consentimiento los datos serán almacenados en el proveedor de E-Mail marketing MailRelay.
Por supuesto, en cualquier momento podrás hacer uso de tus derechos para acceder, rectificar, limitar y suprimir dichos datos.

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