Olá pessoal!!
Às vezes, nas brincadeiras de fim de semana, nos vem inspiração para resolver probleminhas do nosso cotidiano. Foi desta forma que resolvi criar uma “bibliotecazizinha” com jQuery que carregasse grandes formulários em uma página (magentopia) no estilo formulator, mas que desse ao usuário final uma experiência agradável ao ter que preencher cansativos passos destes formulários de cadastro.
Estou falando da jqFormulator, que está na versão “ontem.de.madrugada.1″ e tambem está aberta a novas idéias e melhoramentos.
Requerimentos:
- jquery-1.3.2.min.js >
- jqFormulator.js
Download: jqFormulator.js
Demonstração: exemplo do jqFormulator
Documentaçao:
No header do seu formulário, inicialize a biblioteca jqFormulator.js
<script language="javascript" src="js/jqFormulator.js" type="text/javascript"></script>
Defina as opções obrigatórias (titles e files)
Options ={ type: "POST", titles: Array("Passo 1","Passo 2"), files: Array( "files/reserva-passo-1.php", "files/reserva-passo-2.php" ) };
Chamar o método initForms(opções)
initForms(Options)
Insira o seu formulário na página com id = ‘formulator’
<form id="formulator" method="post" action="jqFormulator.php"></form>
O código completo ficará como no exemplo abaixo.
<script type=”text/javascript”>
Options ={
type: “POST”,
//array com os títulos de cada passo
titles: Array(”Passo 1″,”Passo 2″),
//array com os formuláios que serão chamados
files: Array(
“files/reserva-passo-1.php”,
“files/reserva-passo-2.php”
)
};
initForms(Options)
</script>
<div id=”forms”>
<form id=”formulator” method=”post” action=”#”></form>
</div>
Defina as propriedades obrigatórias para o correto funcionamento
- [type] String – Refine o tipo de envio (GET ou POST) default: POST.
- [titles] Array – Recebe um array que serão os titulos de cada passo. Caso a quantidade de títulos passados seja inferior a quantidade de arquivos, o sistema irá atribuir títulos sequenciais. Ex.
titles: Array("Passo 1","Passo 2")
- [files] Array – Recebe um array com as urls dos arquivos que serão carregados. Ex.
Array (”files/cadastro/passo1.php”, “files/cadastro/passo2.php”, “files/cadastro/passo-n.php”)
Fig. 1 - Passo 1, na primeira exibição, o usuário só poderá acessar o formulário do passo 1.
Fig. 2 - Passo 2, ao clicar em prosseguir no passo 1, o título "Passo 1 e Passo 2" transformam-se em link permitindo ao usuário navegar entre o primeiro e segundo passos e assim suscessivamente. Espero que está humilde aplicação possa ser útil a todos. Qualqer dúvida entrem em contato com ldmotta@visie.com.br. Comentários serão bem vindos.
