Índice
Existem diferentes elementos em sites modernos que possuem funcionalidades distintas e que tornam as tarefas específicas de um site simples e ainda mais marcantes e agradáveis à vista, tornando a navegabilidade do site e a usabilidade proporcionada ao usuário extremamente ótimas.Barras de Progresso
Barras de progresso são responsáveis por mostrar o andamento de uma tarefa, como transferência ou upload de arquivos, upload de informações, etc.
O método progressbar ()
O método Barra de progresso () declara que um elemento do HTML deve ser gerenciado e tratado na forma de uma barra de progresso. Suas opções são um objeto que especifica seu comportamento e aparência.
O método Barra de progresso () pode ser usado de duas maneiras:
• $ (seletor, contexto) .progressbar (opções)
• $ (seletor, contexto) .progressbar ("ação", parâmetros)
Vejamos um exemplo de seu uso:
- Primeiro, incluímos os arquivos necessários, as bibliotecas de jQuery assim como o CSS:
- Adicionamos alguns estilos para os rótulos e a barra, como:
- Instanciamos nosso método Barra de progresso () Nós o associamos a um contêiner e, adicionalmente, adicionamos alguns eventos para detectar quando o upload ou transferência está em andamento e, finalmente, quando foi concluído:
- Finalmente adicionamos nosso código HTML e os rótulos onde nossa barra de progresso será exibida:
Carregando…
A implementação de nosso código ficaria assim no navegador:
Por fim, deixamos aqui o código completo para que você possa testá-lo por si mesmo, sem esquecer que podemos experimentar diferentes opções, eventos e até estilos para nossa barra de progresso.
jQuery UI Progressbar - rótulo personalizado
href = "http: //code.jquery.c… /jquery-ui.css" />
Carregando…
Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo