Introducción a la barra de progreso de JQuery

Las barras de progreso son un elemento jQueryUI. Mientras que sabemos que jQuery es una biblioteca de JavaScript, que se usa en código html y la razón para usar jQuery en un código html se usa para crear o desarrollar fácilmente componentes UI (interfaz de usuario) mediante javascript. Entonces, con la ayuda de jQuery, podemos hacer que nuestro sitio web no solo sea más atractivo y también más interactivo. La barra de progreso también es uno de los componentes de jQuery UI, que se utiliza para mostrar la tarea o el estado de finalización del proceso en porcentaje.

Podemos mostrar la barra de progreso en dos formas, como "barra de progreso determinada" y "barra de progreso indeterminada".

  1. Barra de progreso determinada: barra de progreso determinada que utilizamos en un escenario en el que podemos mostrar el progreso exacto o el estado de la tarea. Por ejemplo, número de archivos enviados, porcentaje de la copia de datos, porcentaje de descarga del archivo, etc. Como la barra de progreso Determinado puede mostrar el progreso en el porcentaje de número de formulario como 54%, o la línea llenó el formulario de izquierda a derecha.
  2. Barra de progreso indeterminada: barra de progreso indeterminada que utilizamos en un escenario en el que el progreso exacto o el estado de la tarea se desconocen o no se pueden determinar. Por ejemplo, no podemos determinar el progreso cuando la solicitud para conectar el servidor continúa.

Sintaxis del método progressbar ()

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

  • $ (elemento, cont.). método de barra de progreso (opción)
  • $ (elemento, cont.). método de barra de progreso ("acción", parámetros)

El elemento para el que necesitamos administrar el progreso, podemos aplicar $ (elemento, cont). método de barra de progreso (opt) en el elemento html y administrado en forma de barra de progreso. Mientras que la opción es un parámetro utilizado para pasar los diferentes valores para especificar cómo las barras de progreso serán el comportamiento y aparecerán. Por ejemplo, $ (“#elementid”) .progressbar ((valor: 30)), aquí el valor es una opción y 30 es el valor proporcionado para la opción de valor.

Del mismo modo, podemos pasar no solo una opción, sino que también podemos pasar más de una opción solo cada opción separada por la coma como se indica a continuación:

$ (selector, contexto) .progressbar ((opción1: valor1, opción2: valor2… ..));

Las diferentes opciones que podemos pasar a la barra de progreso se dan a continuación:

  • disabled: la opción desactivada, si se establece en true, desactiva las barras de progreso y false es el valor predeterminado de disabled.
  • max: la opción max establece el valor máximo para una barra de progreso. El valor predeterminado de max es 100.
  • valor: la opción de valor utilizada para establecer el valor inicial de la barra de progreso. El valor predeterminado del valor es 0.

Ejemplos de barra de progreso de JQuery

La funcionalidad predeterminada del método progressbar ():

A continuación, comencemos algunos de los ejemplos en la barra de progreso para comprender su funcionalidad. Primero, escribimos algunos ejemplos para ver la funcionalidad predeterminada de la barra de progreso sin pasar ningún parámetro al método progressbar (). Como la barra de progreso es un elemento de la interfaz de usuario jQuery, el primer paso es incluir los archivos externos jquery especificando el atributo src del elemento.

Programa Ejemplo # 1



My first jQuery UI Progress Bar example program

rel = "stylesheet">
.ui (
background: blue;
border: 2px solid #DDDDDD;
color: #333333;
font-weight: bold;
)

$(function() (
$( "#pbid" ).progressbar((
));
));

My first jQuery UI Progress Bar example program

rel = "stylesheet">
.ui (
background: blue;
border: 2px solid #DDDDDD;
color: #333333;
font-weight: bold;
)

$(function() (
$( "#pbid" ).progressbar((
));
));

Esta es la funcionalidad predeterminada de la barra de progreso.

Salida -

A continuación, usamos la opción de valor y la pasamos 40, lo que indica que el progreso del 40% en la barra de progreso como se indica en el siguiente código:

Programa Ejemplo # 2



My first jQuery UI Progress Bar example program

rel = "stylesheet">
.ui (
background: blue;
border: 2px solid #DDDDDD;
color: #333333;
font-weight: bold;
)

$(function() (
$( "#pbid" ).progressbar(( value : 40
));
));

My first jQuery UI Progress Bar example program

rel = "stylesheet">
.ui (
background: blue;
border: 2px solid #DDDDDD;
color: #333333;
font-weight: bold;
)

$(function() (
$( "#pbid" ).progressbar(( value : 40
));
));

Esta es la funcionalidad predeterminada de la barra de progreso.

Salida -

A continuación, establecemos las opciones max y value como 400 y 40% de valor respectivamente en el método de barra de progreso de JqueryUI.

Programa Ejemplo # 3


My first jQuery UI Progress Bar example program
rel = "stylesheet">

$(function() (
$( "#pbid" ).progressbar((
value: 40,
max:400
));
var pb = $( "#pbid" );
function progress() (
var v = pb.progressbar( "value" ) || 0;
pb.progressbar( "value", v + 1 );
if ( v < 99 ) (
setTimeout( progress, 100 );
)
)
setTimeout( progress, 4000 );
));

.ui(
background: blue;
color: #333333;
border: 2px solid #DDDDDD;
font-weight: bold;
)
My first jQuery UI Progress Bar example program
rel = "stylesheet">

$(function() (
$( "#pbid" ).progressbar((
value: 40,
max:400
));
var pb = $( "#pbid" );
function progress() (
var v = pb.progressbar( "value" ) || 0;
pb.progressbar( "value", v + 1 );
if ( v < 99 ) (
setTimeout( progress, 100 );
)
)
setTimeout( progress, 4000 );
));

.ui(
background: blue;
color: #333333;
border: 2px solid #DDDDDD;
font-weight: bold;
)

Este es el ejemplo de la barra de progreso para max = 400 y valores = 40%

Salida -

La barra de progreso comienza a llenarse de izquierda a derecha y se detiene cuando alcanza 400. Si ningún valor proporciona la opción máxima, el relleno se detiene solo en el extremo derecho.

El elemento para el cual necesitamos administrar el progreso, podemos aplicar el método $ (element, cont) .progressbar ("action", params) en el elemento html para administrar y realizar una acción en la barra de progreso. en forma de barra de progreso. La acción es un parámetro que se especifica como una cadena en el primer argumento. Por ejemplo $ (“#elementid”) .progressbar ('deshabilitar'), aquí la opción deshabilitar deshabilita la barra de progreso.

Algunas de las acciones que se pueden pasar, en el método $ (element, cont) .progressbar ("action", params) se detallan a continuación:

  • Destruir: la acción de destrucción que se utiliza para eliminar completamente la funcionalidad de la barra de progreso de un elemento y volver al estado previo al inicio de un elemento. Es un método de argumento cero.
  • disable: la acción de desactivación desactiva la funcionalidad de la barra de progreso del elemento. Es un método de argumento cero.
  • enable: la acción enable habilita la funcionalidad de la barra de progreso del elemento. Es un método de argumento cero.
  • opción (opción): la acción de opción (opción) se usa para obtener valor del elemento especificado. Acepta una opción de argumento, que es una cadena.
  • opción: la acción de opciones utilizada para obtener una opción de barra de progreso que tiene la forma de clave: pares de valores. Es un método de argumento cero.
  • opción (opción, valor): la acción opción (opción, valor) se utiliza para establecer el valor de la opción de la barra de progreso que está asociado con la opción especificada.
  • opción (opciones): la acción opción (opciones) se utiliza para establecer una o más opciones para las barras de progreso. Acepta una opción de argumento que es un mapa de pares de opciones-valores.
  • valor: la acción de valor utilizada para obtener el valor de las opciones. El valor indica el porcentaje de relleno en la barra de progreso.
  • valor (valor): la acción de valor (valor) se usa para establecer un nuevo valor para el porcentaje que se completará en la barra de progreso. Acepta un valor de argumento que es número.
  • widget: la acción del widget utilizada para obtener el elemento en el que se aplica la barra de progreso. Es un método de argumento cero.

A continuación, vemos algunos ejemplos de la barra de progreso con algunas acciones que se mencionan anteriormente. Veamos el siguiente programa para el método de barra de progreso () con la acción deshabilitar () y la opción (optionName, value).

Programa Ejemplo # 4



My first jQuery UI Progress Bar example program
rel = "stylesheet">

$(function() (
$( "#pbid1" ).progressbar((
value: 40
));
$( "#pbid1" ).progressbar('disable');
$( "#pbid2" ).progressbar((
value: 40
));
var pb = $( "#pbid2" );
$( "#pbid2" ).progressbar( "option", "max", 400 );
function progress() (
var v = pb.progressbar( "value" ) || 0;
pb.progressbar( "value", v + 1 );
if ( v < 99 ) (
setTimeout( progress, 100 );
)
)
setTimeout( progress, 400 );
));

.ui (
background: blue;
border: 1px solid #DDDDDD;
font-weight: bold;
color: #333333;
)

My first jQuery UI Progress Bar example program
rel = "stylesheet">

$(function() (
$( "#pbid1" ).progressbar((
value: 40
));
$( "#pbid1" ).progressbar('disable');
$( "#pbid2" ).progressbar((
value: 40
));
var pb = $( "#pbid2" );
$( "#pbid2" ).progressbar( "option", "max", 400 );
function progress() (
var v = pb.progressbar( "value" ) || 0;
pb.progressbar( "value", v + 1 );
if ( v < 99 ) (
setTimeout( progress, 100 );
)
)
setTimeout( progress, 400 );
));

.ui (
background: blue;
border: 1px solid #DDDDDD;
font-weight: bold;
color: #333333;
)

Este es el ejemplo de la barra de progreso para la acción Desactivar



Este es el ejemplo de la barra de progreso para la acción de valor máximo y

Salida -

La barra de progreso anterior está deshabilitada, es por eso que no muestra el progreso y la barra de progreso a continuación configura la opción de máximo y valor con algunos valores, por lo que el progreso en forma de relleno se muestra de izquierda a derecha.

Elemento de barra de progreso gestionar eventos -

Además de lo anterior, el evento también puede administrar la barra de progreso. La interfaz de usuario jQuery proporciona un método de evento, el evento se activa para un evento en particular. A continuación se detallan algunos de los eventos que se pueden usar para administrar la barra de progreso:

  • change (event, ui): cuando el valor de la barra de progreso cambia o el progreso cambia, se activa este evento.
  • complete (event, ui): cuando el progreso ar llega al final o alcanza el valor máximo que se genera este evento.
  • create (event, ui): cada vez que se crea la barra de progreso, este evento se activa.

A continuación, escriba algunos de los ejemplos de la acción del evento anterior. El siguiente ejemplo muestra el uso del método de evento durante la funcionalidad de la barra de progreso. Este ejemplo demuestra el uso de eventos para cambiar y completar.

Programa Ejemplo # 5



My first jQuery UI Progress Bar example program
rel = "stylesheet">

$(function() (
pl = $( ".pbc" );
var pb = $( "#pbid" );
$( "#pbid" ).progressbar((
value: false,
change: function() (
pl.text(
pb.progressbar( "value" ) + "%" );
),
complete: function() (
pl.text( "Loading Completed!" );
)
));
function progress() (
var v = pb.progressbar( "value" ) || 0;
pb.progressbar( "value", v + 1 );
if ( v < 99 ) (
setTimeout( progress, 100 );
)
)
setTimeout( progress, 3000 );
));

.ui-widget-header (
background: blue;
border: 2px solid #DDDDDD;
color: #333333;
font-weight: bold;
)
.progress-label (
position: absolute;
top: 13px;
left: 50%;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
)

My first jQuery UI Progress Bar example program
rel = "stylesheet">

$(function() (
pl = $( ".pbc" );
var pb = $( "#pbid" );
$( "#pbid" ).progressbar((
value: false,
change: function() (
pl.text(
pb.progressbar( "value" ) + "%" );
),
complete: function() (
pl.text( "Loading Completed!" );
)
));
function progress() (
var v = pb.progressbar( "value" ) || 0;
pb.progressbar( "value", v + 1 );
if ( v < 99 ) (
setTimeout( progress, 100 );
)
)
setTimeout( progress, 3000 );
));

.ui-widget-header (
background: blue;
border: 2px solid #DDDDDD;
color: #333333;
font-weight: bold;
)
.progress-label (
position: absolute;
top: 13px;
left: 50%;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
)

Este es el ejemplo de la barra de progreso con evento



Cargando…

La salida del programa anterior está en la secuencia de ejecución que se muestra a continuación:

La barra de progreso comienza a llenarse de izquierda a derecha y se detiene cuando llega al final.

Conclusión

1. Las barras de progreso son un elemento jQueryUI.

2. La barra de progreso se usa para mostrar la tarea o el estado de finalización del proceso en porcentaje.

3. El método progressbar () se puede usar de dos formas:

  • $ (elemento, cont.). método de barra de progreso (opción)
  • $ (elemento, cont.). método de barra de progreso ("acción", parámetros)

4. Las diferentes opciones que podemos pasar al método progressbar () son:

discapacitado

  • max
  • valor

5. Algunas de las acciones que se pueden pasar, en el método $ (element, cont) .progressbar ("action", params) son:

  • destruir
  • inhabilitar
  • habilitar
  • opción
  • opción (opción, valor)
  • opción (opciones)
  • valor
  • valor (valor)
  • widget

6. El evento que se puede usar para administrar la barra de progreso se muestra a continuación:

  • completo (evento, ui)
  • crear (evento, ui)
  • cambio (evento, ui)

Artículos recomendados

Esta es una guía de la barra de progreso de JQuery. Aquí discutimos los métodos y ejemplos de la barra de progreso de JQuery con la sintaxis y la salida. También puede echar un vistazo a los siguientes artículos para obtener más información:

  1. Atributos de jQuery
  2. Métodos jQuery Ajax
  3. Efectos jQuery
  4. Alternativas de jQuery
  5. Los 5 tipos principales de boostrap con código de muestra
  6. ¿Cómo crear una barra de progreso en JavaFX?

Categoría:

Desarrollo de software