Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17743
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Barra de progresso para mostrar etapas de processo

16-01-2016 22:22

Nesse post vou mostrar um script bem interessante em jQuery para mostrar uma barra de progresso para o visitante.

Vamos supor que temos um formulário para ser preenchido em etapas, e queremos mostrar ao usuário uma barra de quantos por cento falta para a conclusão do mesmo.

Para isso, uma solução é o jQuery UI Progressbar. O script é bem simples. Você define na própria chamada do plugin o quanto por cento ela tem que ser mostrada.

Se você tem um formulário com 4 páginas por exemplo:
form1.html, form2.html, form3.html e form4.html

Basta você colocar o plugin nas 4 páginas. Na primeira você coloca 25, na segunda 50, na terceira 75 e na quarta 100.

Segue o código

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Progressbar - Default functionality</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css"> <script> $(function() { $( "#progressbar" ).progressbar({ value: 50 }); }); </script> </head> <body> <div id="progressbar"></div> </body>

https://jqueryui.com/progressbar/
1
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado