JqueryUI - Barra de progreso

Las barras de progreso indican el porcentaje de finalización de una operación o proceso. Podemos categorizar la barra de progreso comodeterminate progress bar y indeterminate progress bar.

Determinate progress barsolo debe utilizarse en situaciones en las que el sistema pueda actualizar con precisión el estado actual. Una barra de progreso determinada nunca debe llenarse de izquierda a derecha y luego volver a estar vacía para un solo proceso.

Si no se puede calcular el estado real, se indeterminate progress bar debe utilizarse para proporcionar comentarios a los usuarios.

jQueryUI proporciona un widget de barra de progreso fácil de usar que podemos usar para que los usuarios sepan que nuestra aplicación está trabajando arduamente para realizar la operación solicitada. jQueryUI proporciona el método progressbar () para crear barras de progreso.

Sintaxis

los progressbar() El método se puede utilizar de dos formas:

$ (selector, contexto) .progressbar (opciones) Método

El método de la barra de progreso (opciones) declara que un elemento HTML se puede administrar en forma de barra de progreso. El parámetro de opciones es un objeto que especifica la apariencia y el comportamiento de las barras de progreso.

Sintaxis

$(selector, context).progressbar (options);

Puede proporcionar una o más opciones a la vez utilizando el objeto Javascript. Si hay más de una opción para proporcionar, las separará con una coma de la siguiente manera:

$(selector, context).progressbar({option1: value1, option2: value2..... });

La siguiente tabla enumera las diferentes opciones que se pueden utilizar con este método:

No Señor. Opción y descripción
1 discapacitado

Esta opción cuando se establece en verdadero deshabilita las barras de progreso. Por defecto su valor esfalse.

Option - disabled

Esta opción cuando se establece en verdadero deshabilita las barras de progreso. Por defecto su valor esfalse.

Syntax

$( ".selector" ).progressbar({ disabled: true });
2 max

Esta opción establece el valor máximo para una barra de progreso. Por defecto su valor es100.

Option - max

Esta opción establece el valor máximo para una barra de progreso. Por defecto su valor es100.

Syntax

$( ".selector" ).progressbar({ max: 500});
3 valor

Esta opción especifica el valor inicial de la barra de progreso. Por defecto su valor es0.

Option - value

Esta opción especifica el valor inicial de la barra de progreso. Por defecto su valor es0.

Syntax

$( ".selector" ).progressbar({ value: 20 });

La siguiente sección le mostrará algunos ejemplos prácticos de la funcionalidad de la barra de progreso.

Funcionalidad predeterminada

El siguiente ejemplo muestra un ejemplo simple de la funcionalidad de la barra de progreso, sin pasar parámetros al progressbar() método.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI ProgressBar functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .ui-widget-header {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
            font-weight: bold;
         }
      </style>
      
      <script>
         $(function() {
            $( "#progressbar-1" ).progressbar({
               value: 30
            });
         });
      </script>
   </head>
   
   <body> 
      <div id = "progressbar-1"></div> 
   </body>
</html>

Guardemos el código anterior en un archivo HTML. progressbarexample.htmy abrirlo en un navegador estándar que admita javascript, también debe ver el siguiente resultado. Ahora puedes jugar con el resultado:

Este ejemplo muestra la creación de una barra de progreso usando el método progressbar () . Esta es una barra de progreso determinada predeterminada.

Uso de max y value

El siguiente ejemplo demuestra el uso de dos opciones values y max en la función de la barra de progreso de JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI ProgressBar functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .ui-widget-header {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
            font-weight: bold;
         }
      </style>
      
      <script>
         $(function() {
            var progressbar = $( "#progressbar-2" );
            $( "#progressbar-2" ).progressbar({
               value: 30,
               max:300
            });
            function progress() {
               var val = progressbar.progressbar( "value" ) || 0;
               progressbar.progressbar( "value", val + 1 );
               if ( val < 99 ) {
                  setTimeout( progress, 100 );
               }
            }
            setTimeout( progress, 3000 );
         });
      </script>
   </head>
   
   <body>
      <div id = "progressbar-2"></div>
   </body>
</html>

Guardemos el código anterior en un archivo HTML. progressbarexample.htmy abrirlo en un navegador estándar que admita javascript, también debe ver el siguiente resultado. Ahora puedes jugar con el resultado:

Aquí puede ver que la barra de progreso se llena de derecha a izquierda y se detiene cuando el valor llega a 300.

$ (selector, context) .progressbar ("action", params) Método

El método de la barra de progreso ("acción", parámetros) puede realizar una acción en la barra de progreso, como cambiar el porcentaje de llenado. La acción se especifica como una cadena en el primer argumento (por ejemplo, "valor" para cambiar el porcentaje llenado). Consulte las acciones que se pueden aprobar en la siguiente tabla.

Sintaxis

$(selector, context).progressbar ("action", params);;

La siguiente tabla enumera las diferentes acciones que se pueden utilizar con este método:

No Señor. Acción Descripción
1 destruir

Esta acción elimina completamente la funcionalidad de la barra de progreso de un elemento. Los elementos vuelven a su estado previo al inicio. Este método no acepta argumentos.

Action - destroy

Esta acción elimina completamente la funcionalidad de la barra de progreso de un elemento. Los elementos vuelven a su estado previo al inicio. Este método no acepta argumentos.

Syntax

$( ".selector" ).progressbar("destroy");
2 destruir

Esta acción elimina completamente la funcionalidad de la barra de progreso de un elemento. Los elementos vuelven a su estado previo al inicio. Este método no acepta argumentos.

Action - destroy

Esta acción elimina completamente la funcionalidad de la barra de progreso de un elemento. Los elementos vuelven a su estado previo al inicio. Este método no acepta argumentos.

Syntax

$( ".selector" ).progressbar("destroy");
3 inhabilitar

Esta acción deshabilita la funcionalidad de la barra de progreso de un elemento. Este método no acepta argumentos.

Action - disable

Esta acción deshabilita la funcionalidad de la barra de progreso de un elemento. Este método no acepta argumentos.

Syntax

$( ".selector" ).progressbar("disable");
4 habilitar

Esta acción habilita la funcionalidad de la barra de progreso. Este método no acepta argumentos.

Action - enable

Esta acción habilita la funcionalidad de la barra de progreso. Este método no acepta argumentos.

Syntax

$( ".selector" ).progressbar("enable");
5 opción (optionName)

Esta acción recupera el valor asociado actualmente con el optionName especificado . Donde optionName es una cadena.

Action - option( optionName )

Esta acción recupera el valor asociado actualmente con el optionName especificado . Donde optionName es una cadena.

Syntax

var isDisabled = $( ".selector" ).progressbar( "option", "disabled" );
6 opción

Esta acción obtiene un objeto que contiene pares clave / valor que representan el hash de opciones de la barra de progreso actual. Este método no acepta argumentos.

Action - option

Esta acción obtiene un objeto que contiene pares clave / valor que representan el hash de opciones de la barra de progreso actual. Este método no acepta argumentos.

Syntax

var options = $( ".selector" ).progressbar( "option" );
7 opción (optionName, valor)

Esta acción establece el valor de la opción de la barra de progreso asociada con el optionName especificado .

Action - option( optionName, value )

Esta acción establece el valor de la opción de la barra de progreso asociada con el optionName especificado . El argumento optionName es el nombre de la opción que se va a establecer y value es el valor que se va a establecer para la opción.

Syntax

$( ".selector" ).progressbar( "option", "disabled", true );
8 opción (opciones)

Esta acción establece una o más opciones para las barras de progreso. Las opciones del argumento son un mapa de pares de opciones y valores que se establecerán.

Action - option( options )

Esta acción establece una o más opciones para las barras de progreso. Las opciones del argumento son un mapa de pares de opciones y valores que se establecerán.

Syntax

( ".selector" ).progressbar( "option", { disabled: true } );
9 valor

Esta acción recupera el valor actual de options.value , es decir, el porcentaje de relleno en la barra de progreso.

Action - value

Esta acción recupera el valor actual de options.value , es decir, el porcentaje de relleno en la barra de progreso.

Syntax

$( ".selector" ).progressbar("value");
10 valor (valor)

Esta acción especifica un nuevo valor para el porcentaje llenado en la barra de progreso. El valor del argumento puede ser un número o un booleano.

Action - value( value )

Esta acción especifica un nuevo valor para el porcentaje llenado en la barra de progreso. El valor del argumento puede ser un número o un booleano.

Syntax

$( ".selector" ).progressbar( "value", 50 );
11 widget

Esta acción devuelve un objeto jQuery que contiene la barra de progreso. Este método no acepta argumentos.

Action - widget

Esta acción devuelve un objeto jQuery que contiene la barra de progreso. Este método no acepta argumentos.

Syntax

$( ".selector" ).progressbar("widget");

Ejemplo

Ahora veamos un ejemplo usando las acciones de la tabla anterior. El siguiente ejemplo demuestra el uso de los métodos disable () y option (optionName, value) .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI ProgressBar functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .ui-widget-header {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
            font-weight: bold;
         }
      </style>
      
      <script>
         $(function() {
            $( "#progressbar-3" ).progressbar({
               value: 30
            });
            $( "#progressbar-3" ).progressbar('disable');
            $( "#progressbar-4" ).progressbar({
               value: 30
            });
            var progressbar = $( "#progressbar-4" );
            $( "#progressbar-4" ).progressbar( "option", "max", 1024 );
            function progress() {
               var val = progressbar.progressbar( "value" ) || 0;
               progressbar.progressbar( "value", val + 1 );
               if ( val < 99 ) {
                  setTimeout( progress, 100 );
               }
            }
            setTimeout( progress, 3000 );
         });
      </script>
   </head>
   
   <body>
      <h3>Disabled Progressbar</h3>
      <div id = "progressbar-3"></div><br>
      <h3>Progressbar with max value set</h3>
      <div id = "progressbar-4"></div>
   </body>
</html>

Guardemos el código anterior en un archivo HTML. progressbarexample.htm y ábralo en un navegador estándar que admita javascript, también debe ver el siguiente resultado:

Barra de progreso deshabilitada


Barra de progreso con valor máximo establecido