[TUTORIAL] Criar um widget de registro simples rápido
ShiftActif fórum :: Central ShiftActif :: :: Tutoriais
Página 1 de 1 • Compartilhe
[TUTORIAL] Criar um widget de registro simples rápido
Widgets & Portal |
Com um código HTML, podemos gerir um widget de registro rápido para facilitar e evitar o acesso a várias páginas.
Lembre-se de que, este efeito é próprio para formulários com registros simples, como Login, email e senha. Caso tenha campos obrigatórios, o HTML deverá ser acrescentado. |
1º - Os widgets:
Para chegar ao resultado esperado, precisamos ter em mente que os widgets do fórum estejam funcionando, por isso, antes de prosseguir com o tutorial aconselhamos que leia a FAQ disponível no suporte oficial: http://ajuda.forumeiros.com/t1297-faq-administracao-e-instalacao-do-portal-widgets
Acesse o Painel de controle Módulos Portal & Widgets Gestão dos widgets personalizados .
Agora, basta adicionar em seu widget o seguinte código:
Opções:<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script><script src="https://illiweb.com/rs3/14/frm/jquery/pwd_strength/passwordStrengthMeter.js"></script><script type="text/javascript">
jQuery(document).ready(function(){jQuery('input[name=reset]').click(function(){jQuery("#pwd_good,#pwd_middle,#pwd_bad").hide();});jQuery('#password_reg,#username').keyup(function() {if ( jQuery('#password_reg').val() != "" ){var level = passwordStrength(jQuery('#password_reg').val(),jQuery('#username').val());switch(level){case 'bad' :jQuery("#pwd_middle,#pwd_good").hide();jQuery("#pwd_bad").show();break;case 'good' :jQuery("#pwd_good,#pwd_bad").hide();jQuery("#pwd_middle").show();break;case 'strong' :jQuery("#pwd_middle,#pwd_bad").hide();jQuery("#pwd_good").show();break;}}else{jQuery("#pwd_middle,#pwd_good,#pwd_bad").hide();}});});//]]></script>
<form action=/register?agreed=true&step=2 method=post>
<label>Nome de usuário</label>
<input class="inputbox post" type="text" id="username_reg" name=username size=25 maxlength=25><br>
<label>Email(não precisa confirmar)</label>
<input class="inputbox post" type="text" id="email" name="email" size="25" maxlength="64"><br>
<label>Senha</label>
<input class="inputbox post" type=password id="password_reg" name="password" size="25" maxlength="25"><div class="left" id="cont_pwd"><div id="pwd_bad" class="pwd_img" style="display:none;">Muito fraca</div><div id="pwd_middle" class="pwd_img" style="display: none;">Boa</div>
<div id="pwd_good" class="pwd_img" style="display:none;">Ótima senha!</div></div><br><br><input class=button1 type=submit name=submit value=" Registrar ">
</form>
Verde: Qualidade da senha.
Azul: Informações que podem ser modificadas.
Marrom: Campos não-modificáveis.
2º - CSS da qualidade de senha:
Para aumentar a personalização, temos o CSS para proporcionar elegância quando a senha for digirada:
Deseja modificar as imagens? Basta solicitar novas no suporte oficial para os Artimeiros: http://ajuda.forumeiros.com/f17-criacoes-graficas<style>
.pwd_img {
color: black;
display: none;
font-size: 11px;
font-weight: 700;
height: 14px;
line-height: 14px;
padding: 4px 0px 3px;
text-align: center;
width: 150px;
}
/*** Senha fraca **/
#pwd_bad {
background: url(https://2img.net/i/fa/p_strength/pwd_bad.png);
}
/*** Senha boa **/
#pwd_middle {
background: url(https://2img.net/i/fa/p_strength/pwd_middle.png);
}
/*** Senha forte **/
#pwd_good {
background: url(https://2img.net/i/fa/p_strength/pwd_good.png);
}</style>
- O formulário do widget adiciona as informações padrões?
Sim, se o usuário preenche todos os campos corretamente, automaticamente o registro é transferido para a página de confirmação de senha. - Como adicionar mais campos?
Você poderá criar as mesmas opções do seu registro personalizado lendo a apostila do HTML de como criar formulários no seguinte endereço:
http://www.juliobattisti.com.br/tutoriais/ericogoncalves/htmlbasico011.asp
https://shift.forumactif.com/t161-tutorial-criar-um-formulario-personalizado - Resultado esperado:
© ShiftActif
Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [Dúvida] Criar um widget de registro simples rápido |
Tópicos semelhantes
» [TUTORIAL] Widget "Login" personalizado
» [TUTORIAL] Carregamento de página simples com HTML
» [TUTORIAL]PERGUNTA NO REGISTRO
» [TUTORIAL] Adicionando o tópico rápido
» [TUTORIAL] Editar mais eficaz e rápido.
» [TUTORIAL] Carregamento de página simples com HTML
» [TUTORIAL]PERGUNTA NO REGISTRO
» [TUTORIAL] Adicionando o tópico rápido
» [TUTORIAL] Editar mais eficaz e rápido.
ShiftActif fórum :: Central ShiftActif :: :: Tutoriais
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|