JqueryUI - Progressbar

Barras de progresso indicam a porcentagem de conclusão de uma operação ou processo. Podemos categorizar a barra de progresso comodeterminate progress bar e indeterminate progress bar.

Determinate progress barsó deve ser usado em situações em que o sistema pode atualizar com precisão o status atual. Uma determinada barra de progresso nunca deve ser preenchida da esquerda para a direita e, em seguida, retornar ao vazio para um único processo.

Se o status real não puder ser calculado, um indeterminate progress bar deve ser usado para fornecer feedback do usuário.

O jQueryUI fornece um widget de barra de progresso fácil de usar que podemos usar para permitir que os usuários saibam que nosso aplicativo está trabalhando duro para executar a operação solicitada. jQueryUI fornece o método progressbar () para criar barras de progresso.

Sintaxe

o progressbar() método pode ser usado em duas formas -

Método $ (seletor, contexto) .progressbar (opções)
$ (seletor, contexto) .progressbar ("action", params) Método

Método $ (seletor, contexto) .progressbar (opções)

O método progressbar (options) declara que um elemento HTML pode ser gerenciado na forma de uma barra de progresso. O parâmetro options é um objeto que especifica a aparência e o comportamento das barras de progresso.

Sintaxe

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

Você pode fornecer uma ou mais opções por vez usando o objeto Javascript. Se houver mais de uma opção a ser fornecida, você irá separá-las usando uma vírgula da seguinte forma -

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

A tabela a seguir lista as diferentes opções que podem ser usadas com este método -

Sr. Não.	Opção e descrição
1	Desativado Esta opção, quando definida como verdadeira, desativa as barras de progresso. Por padrão, seu valor éfalse. Option - disabled Esta opção, quando definida como verdadeira, desativa as barras de progresso. Por padrão, seu valor éfalse. Syntax `$( ".selector" ).progressbar({ disabled: true });`
2	max Esta opção define o valor máximo para uma barra de progresso. Por padrão, seu valor é100. Option - max Esta opção define o valor máximo para uma barra de progresso. Por padrão, seu valor é100. Syntax `$( ".selector" ).progressbar({ max: 500});`
3	valor Esta opção especifica o valor inicial da barra de progresso. Por padrão, seu valor é0. Option - value Esta opção especifica o valor inicial da barra de progresso. Por padrão, seu valor é0. Syntax `$( ".selector" ).progressbar({ value: 20 });`

A seção a seguir mostrará alguns exemplos de funcionamento da funcionalidade da barra de progresso.

Funcionalidade padrão

O exemplo a seguir demonstra um exemplo simples de funcionalidade da barra de progresso, sem passar parâmetros para o 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>

Vamos salvar o código acima em um arquivo HTML progressbarexample.htme abri-lo em um navegador padrão que suporte javascript, você também deve ver a seguinte saída. Agora, você pode brincar com o resultado -

Este exemplo mostra a criação da barra de progresso usando o método progressbar () . Esta é uma barra de progresso determinada padrão.

Uso de max e valor

O exemplo a seguir demonstra o uso de duas opções values e max na função de barra de progresso do 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>

Aqui você pode ver que a barra de progresso é preenchida da direita para a esquerda e para quando o valor atinge 300.

$ (seletor, contexto) .progressbar ("action", params) Método

O método da barra de progresso ("ação", parâmetros) pode executar uma ação na barra de progresso, como alterar a porcentagem preenchida. A ação é especificada como uma string no primeiro argumento (por exemplo, "valor" para alterar a porcentagem preenchida). Confira as ações que podem ser aprovadas, na tabela a seguir.

Sintaxe

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

A tabela a seguir lista as diferentes ações que podem ser usadas com este método -


$( ".selector" ).progressbar("destroy");
$( ".selector" ).progressbar("destroy");
$( ".selector" ).progressbar("disable");
$( ".selector" ).progressbar("enable");
var isDisabled = $( ".selector" ).progressbar( "option", "disabled" );
var options = $( ".selector" ).progressbar( "option" );
$( ".selector" ).progressbar( "option", "disabled", true );
( ".selector" ).progressbar( "option", { disabled: true } );
$( ".selector" ).progressbar("value");
$( ".selector" ).progressbar( "value", 50 );
$( ".selector" ).progressbar("widget");

Sr. Não.	Ação e Descrição
1	destruir Esta ação remove completamente a funcionalidade da barra de progresso de um elemento. Os elementos retornam ao seu estado pré-inicial. Este método não aceita nenhum argumento. Action - destroy Esta ação remove completamente a funcionalidade da barra de progresso de um elemento. Os elementos retornam ao seu estado pré-inicial. Este método não aceita nenhum argumento. Syntax `$( ".selector" ).progressbar("destroy");`
2	destruir Esta ação remove completamente a funcionalidade da barra de progresso de um elemento. Os elementos retornam ao seu estado pré-inicial. Este método não aceita nenhum argumento. Action - destroy Esta ação remove completamente a funcionalidade da barra de progresso de um elemento. Os elementos retornam ao seu estado pré-inicial. Este método não aceita nenhum argumento. Syntax `$( ".selector" ).progressbar("destroy");`
3	desabilitar Esta ação desativa a funcionalidade da barra de progresso de um elemento. Este método não aceita nenhum argumento. Action - disable Esta ação desativa a funcionalidade da barra de progresso de um elemento. Este método não aceita nenhum argumento. Syntax `$( ".selector" ).progressbar("disable");`
4	habilitar Esta ação ativa a funcionalidade da barra de progresso. Este método não aceita nenhum argumento. Action - enable Esta ação ativa a funcionalidade da barra de progresso. Este método não aceita nenhum argumento. Syntax `$( ".selector" ).progressbar("enable");`
5	opção (optionName) Esta ação recupera o valor atualmente associado ao optionName especificado . Onde optionName é uma String. Action - option( optionName ) Esta ação recupera o valor atualmente associado ao optionName especificado . Onde optionName é uma String. Syntax `var isDisabled = $( ".selector" ).progressbar( "option", "disabled" );`
6	opção Esta ação obtém um objeto contendo pares de chave / valor que representam o hash de opções da barra de progresso atual. Este método não aceita nenhum argumento. Action - option Esta ação obtém um objeto contendo pares de chave / valor que representam o hash de opções da barra de progresso atual. Este método não aceita nenhum argumento. Syntax `var options = $( ".selector" ).progressbar( "option" );`
7	opção (optionName, value) Esta ação define o valor da opção progressbar associada ao optionName especificado . Action - option( optionName, value ) Esta ação define o valor da opção progressbar associada ao optionName especificado . O argumento optionName é o nome da opção a ser definida e value é o valor a ser definido para a opção. Syntax `$( ".selector" ).progressbar( "option", "disabled", true );`
8	opção (opções) Esta ação define uma ou mais opções para as barras de progresso. O argumento options é um mapa de pares de opção-valor a serem definidos. Action - option( options ) Esta ação define uma ou mais opções para as barras de progresso. O argumento options é um mapa de pares de opção-valor a serem definidos. Syntax `( ".selector" ).progressbar( "option", { disabled: true } );`
9	valor Esta ação recupera o valor atual de options.value , ou seja, a porcentagem de preenchimento na barra de progresso. Action - value Esta ação recupera o valor atual de options.value , ou seja, a porcentagem de preenchimento na barra de progresso. Syntax `$( ".selector" ).progressbar("value");`
10	valor (valor) Esta ação especifica um novo valor para a porcentagem preenchida na barra de progresso. O valor do argumento pode ser um número ou booleano. Action - value( value ) Esta ação especifica um novo valor para a porcentagem preenchida na barra de progresso. O valor do argumento pode ser um número ou booleano. Syntax `$( ".selector" ).progressbar( "value", 50 );`
11	ferramenta Esta ação retorna um objeto jQuery contendo a barra de progresso. Este método não aceita nenhum argumento. Action - widget Esta ação retorna um objeto jQuery contendo a barra de progresso. Este método não aceita nenhum argumento. Syntax `$( ".selector" ).progressbar("widget");`

Exemplo

Agora vamos ver um exemplo usando as ações da tabela acima. O exemplo a seguir demonstra o uso dos métodos disable () e 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>

Vamos salvar o código acima em um arquivo HTML progressbarexample.htm e abri-lo em um navegador padrão que suporte javascript, você também deve ver a seguinte saída -

Barra de progresso desativada

Barra de progresso com valor máximo definido