Barra de progresso com JavaScript

barra de progresso com javascript

[button url=’http://d2o0t5hpnwv4c1.cloudfront.net/266_progressSlider/jQuery%20UI/regForm.html’ target=’_blank’ size=’small’ style=’blue’] Exemplo [/button] [button url=’http://www.designyourway.net/drb/wp-content/plugins/download-monitor/download.php?id=286′ target=’_blank’ size=’small’ style=’blue’] Download [/button] 

Barra de progresso com JavaScript é muito importante em alguns projetos, neste post faremos uma com JavaScript, mais uma vez vem nos dar uma força neste trabalho. Mas atenção, neste caso a barra de progresso só está mostrando a posição, ou seja, quando atualizá-lo temos que informar explicitamente qual o valor dela no momento, por isto devemos saber antecipadamente quando o processo terá fim. Caso seu formulário vá demorar um período indeterminado de tempo para ser concluído este recurso não é a melhor escolha.

Esta é uma ferramenta muito simples, com uma pequena API que expõe um número limitado de propriedades e métodos, mas ainda pode ser altamente eficaz e é ótima para fornecer feedback visual aos visitantes sobre a porcentagem de um processo que resta antes de ser concluída.

Barra de progresso com JavaScript

Vamos precisar de uma cópia da versão atual do jQueryUI, para fazer o doenload visite o endereço http://jqueryui.com/download. Vamos precisar descompactá-lo para que a estrutura de diretório existente seja preservada. Devemos criar um novo diretório em nosso computador chamado jQueryUI e, em seguida, dentro desta criar uma outra nova pasta chamada jqueryui1.7. O arquivo deve ser descompactado na pasta jqueryui1.7.
O arquivo irá conter tudo o que precisa para começar;
Versões minified e descompactado de todos os arquivos da biblioteca, alguns arquivos de tema (o tema padrão é a suavidade apropriadamente chamado), e mesmo a versão mais recente da biblioteca jQuery subjacente.

Logo abaixo a lista de arquivos e sequência que eles devem ser adicionados a nossa página:

  • ui.core.css
  • ui.theme.css
  • ui.progressbar.css
  • jquery [currentversion]. js
  • ui.core.js
  • ui.progressbar.js

Os três primeiros são as folhas de estilos CSS, usadas para dar o visual da página. Não precisa ficar com este tema em uma implementação do mundo real, temos muitas opções de personalização, incluindo um grande número de temas pré-configurados disponíveis diretamente ThemeRoller, Você pode mudar o tema como quiser ou usar um tema do ThemeRoller. Nós não vamos fazer nenhuma dessas coisas neste tutorial, mas podemos fazer uso de algumas das classes fornecidas pelo Framework.

Montando a página HTML

Tudo o que precisamos, além dos recursos de biblioteca listados acima, é um elemento simples container. Em seu programa de desenvolvimento, crie o arquivo html como esta logo abaixo:

Salve como progressBar.html no diretório raiz do jQuery UI. Nós colocamos as folhas de estilo logo no início do arquivo e os scripts bem no final, o que é por motivos de desempenho, a página carrega mais rápido o conteúdo quando não está tentando carregar JavaScript, ao mesmo tempo. Este é um procedimento bem documentado é respeitado. Nós deixamos uma tag script vazio na parte inferior da página, vamos adicionar algum código ali ao lado:

Para inicializar a barra de progresso padrão, tudo que fazemos é chamar o método construtor, ProgressBar no elemento de container que o widget deve ser processado. Quando você executar esta página em seu navegador, você verá que a barra de progresso criada preenche automaticamente a largura de seu recipiente, que neste caso é o corpo da página:

progressbar1

Definindo valor da barra de progresso

O valor da barra de progresso será definido como zero por padrão, é por isso que aparece vazia na imagem anterior. Para encher a barra de progresso, precisamos definir o valor da propriedade, mudar a função de construtor para esta:

O valor da propriedade determina a porcentagem da barra de progresso que está ocupada, dando grande feedback visual para o visitante sobre o quanto falta para a tarefa ser concluída. A barra de progresso agora deve estar na metade, como na imagem seguinte:

progressbar2

Recebendo o valor da barra de progresso

Obtendo o valor atual do widget é tão fácil como definir, podemos usar um dos seus métodos para retornar o valor da propriedade atual. Após o construtor inicial, adicione o seguinte código:

Nós adicionamos duas funções simples, que são desencadeadas sobre os eventos mouseover e mouseout disparados pela barra de progresso (note que estes são eventos DOM padrão, não eventos personalizados da barra de progresso). Tudo o que fazemos na primeira função é criar um novo parágrafo com o valor atual da barra de progresso como innerText e anexá-lo à página.
O valor é recuperado usando o método option. O argumento passado para o método é o nome da propriedade que deseja recuperar. A segunda função simplesmente remove a mensagem novamente. A mensagem é mostrada na imagem a seguir:

progressbar3

Propriedades, eventos e métodos
O valor da propriedade, ou opção, é atualmente a única propriedade configurável da barra de progresso, neste exemplo vamos configurá-lo quando o widget for inicializado através passagem em que a propriedade de configuração de um objeto. Para definir essa propriedade após o widget foi inicializado usaríamos o método de option. Para usar este método no modo setter, precisamos passar um segundo parâmetro especificando o novo valor, como este:

Você pode estar se perguntando por que eu disse “um segundo parâmetro”, quando claramente há três argumentos na linha de código acima. Mesmo que nós estejamos usando o método de option, não estamos realmente chamando ele diretamente. Em vez disso, estamos chamando o método construtor de novo, mas dizendo a ele que gostaríamos de chamar o método opção.
O Widget irá chamar o método internamente, passando os dois parâmetros (“value” e 75), que passamos para o construtor após o nome do método.
A barra de progresso expõe um único evento, o evento de alteração, o que fornece um mecanismo para que possamos ligar e responder às mudanças no seu valor. Este é um evento personalizado para que possamos detectar e reagir a ela de duas maneiras diferentes. Podemos definir uma função anônima como fizemos com o valor da propriedade, ou podemos usar o método bind do jQuery para especificar a função anônima e executar. A sutil diferença entre os dois é que o código especificado usando o método bind será executado primeiro.
A barra de progresso API expõe cinco métodos, os quais estão listados abaixo:

  • destroy
  • disable
  • enable
  • option
  • value

Todos estes métodos são usados ​​exatamente da mesma forma que o método option que nós vimos, dentro maioria deles deve ser bastante auto-explicativo.

Abaixo o link para o tutorial completo em inglês.
Tutorial completo  

Comentários

Comentários