Introdução à barra de progresso do JQuery

Barras de progresso são um elemento jQueryUI. Considerando que sabemos que o jQuery é uma biblioteca JavaScript, usada no código html, e o motivo do uso do jQuery em um código html é usado para criar ou desenvolver facilmente componentes da interface do usuário por javascript. Portanto, com a ajuda do jQuery, podemos tornar nosso site não apenas mais atraente e também mais interativo. A barra Progresso também é um dos componentes da interface do usuário do jQuery, que é usado para mostrar o estado de conclusão da tarefa ou do processo em porcentagem.

Podemos mostrar a barra de progresso de duas formas, como “barra de progresso determinada” e “barra de progresso indeterminada”.

  1. Barra de progresso determinada - Barra de progresso determinada que usamos em um cenário em que podemos mostrar o progresso ou status exato da tarefa. Por exemplo, número de arquivos enviados, porcentagem da cópia de dados, porcentagem do download do arquivo etc. Como a barra Determinar progresso pode mostrar o progresso na porcentagem do número do formulário, como 54%, ou a linha preencheu o formulário da esquerda para a direita.
  2. Barra de progresso indeterminado - barra de progresso indeterminado que usamos em um cenário em que o progresso ou status exato da tarefa é desconhecido ou não pode ser determinado. Por exemplo, não podemos determinar o progresso quando a solicitação para conectar o servidor prosseguir.

Sintaxe do método progressbar ()

O método progressbar () pode ser usado de duas formas -

  • $ (elemento, cont.) método progressbar (opção)
  • $ (elemento, cont.) método progressbar (“action”, params)

O elemento para o qual precisamos gerenciar o progresso, podemos aplicar $ (elemento, cont). progressbar (opt) no elemento html e gerenciado na forma de uma barra de progresso. Considerando que opção é um parâmetro usado para passar os diferentes valores para especificar como as barras de progresso devem ser o comportamento e a aparência. Por exemplo $ ("#elementid") .progressbar ((value: 30)), aqui value é uma opção e 30 é o valor fornecido para a opção value.

Da mesma forma, podemos passar não apenas uma opção, mas também podemos passar mais de uma opção, apenas cada opção separada pela vírgula, conforme indicado abaixo -

$ (seletor, contexto) .progressbar ((opção1: valor1, opção2: valor2… ..));

As diferentes opções que podemos passar para a barra de progresso são apresentadas abaixo -

  • desabilitado - a opção desabilitada se configurada como true, desabilita as barras de progresso e false é um valor padrão de desabilitado.
  • max - A opção max define o valor máximo para uma barra de progresso. O valor padrão do máximo é 100.
  • valor - A opção de valor usada para definir o valor inicial da barra de progresso. O valor padrão do valor é 0.

Exemplos de barra de progresso do JQuery

A funcionalidade padrão do método progressbar () -

Em seguida, vamos começar alguns exemplos na barra de progresso para entender sua funcionalidade. Primeiro, escrevemos alguns exemplos para ver a funcionalidade padrão da barra de progresso sem passar nenhum parâmetro para o método progressbar (). Como a barra de progresso é um elemento do ui jQuery, a primeira etapa é incluir os arquivos externos do jquery especificando o atributo src do elemento.

Exemplo de Programa # 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((
));
));

Essa é a funcionalidade padrão da barra de progresso

Resultado -

Em seguida, usamos a opção value e passamos 40, o que indica que o progresso é de 40% na barra de progresso, conforme indicado no código abaixo -

Exemplo de programa # 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
));
));

Essa é a funcionalidade padrão da barra de progresso

Resultado -

Em seguida, configuramos as opções max e value como 400 e 40%, respectivamente, no método progressbar do JqueryUI.

Exemplo de Programa # 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 é o exemplo da barra de progresso para max = 400 e valores = 40%

Resultado -

A barra de progresso inicia o preenchimento da esquerda para a direita e para quando atinge 400. Se nenhum valor fornecer a opção max, o preenchimento será interrompido apenas na extremidade direita.

O elemento para o qual precisamos gerenciar o progresso, podemos aplicar o método $ (element, cont) .progressbar (“action”, params) no elemento html para gerenciar e executar uma ação na barra de progresso. na forma de uma barra de progresso. A ação é um parâmetro especificado como uma sequência no primeiro argumento. Por exemplo $ ("#elementid") .progressbar ('disable'), aqui desativar opção desativar a barra de progresso.

Algumas das ações que podem ser passadas, no método $ (element, cont) .progressbar ("action", params) são fornecidas abaixo -

  • destroy - A ação de destruição a ser usada para remover completamente a funcionalidade da barra de progresso de um elemento e retornar ao estado pré-init de um elemento. É um método de argumento zero.
  • desativar - A ação desativar desativa a funcionalidade da barra de progresso do elemento. É um método de argumento zero.
  • enable - A ação enable habilita a funcionalidade da barra de progresso do elemento. É um método de argumento zero.
  • opção (opção) - A ação da opção (opção) é usada para obter valor do elemento especificado. Ele aceita uma opção de argumento, que é uma String.
  • opção - A ação de opções usada para obter uma opção da barra de progresso na forma de pares chave: valor. É um método de argumento zero.
  • opção (opção, valor) - A ação opção (opção, valor) usa para definir o valor da opção da barra de progresso que está associado à opção especificada.
  • opção (opções) - A ação opção (opções) usa para definir uma ou mais opções para as barras de progresso. Ele aceita uma opção de argumento que é um mapa para pares de opção e valor.
  • valor - a ação de valor usada para obter o valor das opções. O valor indica a porcentagem de preenchimento na barra de progresso.
  • value (value) - A ação value (value) usada para definir um novo valor para a porcentagem a ser preenchida na barra de progresso. Ele aceita um valor de argumento que é number.
  • widget - A ação do widget usada para obter o elemento no qual a barra de progresso é aplicada. É um método de argumento zero.

A seguir, vemos alguns exemplos da barra de progresso com alguma ação mencionada acima. Vamos ver o programa abaixo para o método progressbar () com a ação disable () e a opção (optionName, value).

Exemplo de Programa # 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 é o exemplo da barra de progresso da ação Desativar



Este é o exemplo da barra de progresso para a ação max e value

Resultado -

A barra de progresso acima está desabilitada e é por isso que não está aparecendo o progresso. A barra de progresso abaixo configura a opção max e value com alguns valores; portanto, o progresso no formulário de preenchimento é exibido da esquerda para a direita.

Elemento da barra de progresso gerenciar eventos -

Além do acima, a barra de progresso também pode ser gerenciada pelo evento. A interface do usuário do jQuery fornece o método de evento, o evento é acionado para um evento específico. Alguns dos eventos que podem ser usados ​​para gerenciar a barra de progresso são apresentados abaixo -

  • change (event, ui) - Sempre que o valor da barra de progresso muda ou o progresso muda, esse evento é acionado.
  • complete (event, ui) - Quando o progresso ar chega ao fim ou atinge o valor máximo que esse evento é gerado.
  • create (event, ui) - Sempre que a barra de progresso é criada, esse evento é acionado.

Em seguida, escreva alguns dos exemplos da ação do evento acima. O exemplo a seguir demonstra o uso do método de evento durante a funcionalidade da barra de progresso. Este exemplo demonstra o uso de eventos para alterar e concluir.

Exemplo de Programa # 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 é o exemplo da barra de progresso com evento



Carregando…

A saída do programa acima está na sequência de execução mostrada abaixo -

A barra de progresso começa a ser preenchida da esquerda para a direita e para quando chega ao fim.

Conclusão

1. Barras de progresso são um elemento jQueryUI.

2. A barra de progresso é usada para mostrar o estado de conclusão da tarefa ou processo em porcentagem.

3. O método progressbar () pode ser usado de duas formas -

  • $ (elemento, cont.) método progressbar (opção)
  • $ (elemento, cont.) método progressbar (“action”, params)

4. As diferentes opções que podemos passar para o método progressbar () são -

Desativado

  • max
  • valor

5. Algumas das ações que podem ser passadas, no método $ (element, cont) .progressbar (“action”, params) são:

  • destruir
  • desabilitar
  • habilitar
  • opção
  • opção (opção, valor)
  • opção (opções)
  • valor
  • valor (valor)
  • ferramenta

6. O evento que pode ser usado para gerenciar a barra de progresso é apresentado abaixo -

  • complete (evento, interface do usuário)
  • criar (evento, interface do usuário)
  • mudança (evento, interface do usuário)

Artigos recomendados

Este é um guia para a barra de progresso do JQuery. Aqui discutimos os métodos e exemplos da barra de progresso do JQuery com a sintaxe e a saída. Você também pode consultar os seguintes artigos para saber mais -

  1. Atributos do jQuery
  2. Métodos Ajax do jQuery
  3. Efeitos jQuery
  4. Alternativas ao jQuery
  5. Os 5 principais tipos de Boostrap com código de exemplo
  6. Como criar uma ProgressBar no JavaFX?

Categoria:

Desenvolvimento de software