ShiftActif fórum


Participe da melhor comunidade sobre fóruns!

Bem vindo ao fórum de suporte e de informações técnicas ShiftActif. Aqui, solucionamos suas dúvidas sobre os tutoriais exclusivos fornecidos pela nosso subfórum de tutoriais além de suporte opcional ao Forumeiros.com, Blogger e temas grátis do Criarumblog.com! Você encontrará FAQs, astúcias em códigos e efeitos especiais em CSS, Javascript e outros para complementar seu fórum ou Blog!
Venha participar desta grande comunidade!!!
Compartilhe
Ver o tópico anteriorIr em baixoVer o tópico seguinte
avatar
Adminactif
Adminactif
Masculino
Idade : 23
PointActif's : 4814
ReputActifs : 97
Mensagens : 2707
Inscrição : 13/04/2011

Localização : Vilhena - RO
100%
Ver perfil do usuáriohttp://www.shiftactif.com/

[TUTORIAL] Criar um widget de registro simples rápido

em Dom 10 Fev - 18:57


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.



- 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 Seta azul Módulos Seta azul Portal & Widgets Seta azul Gestão dos widgets personalizados Seta verde .
Agora, basta adicionar em seu widget o seguinte código:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script><script src="http://illiweb.com/rsc/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>
Opções:
Verde: Qualidade da senha.
Azul: Informações que podem ser modificadas.
Marrom: Campos não-modificáveis.


- CSS da qualidade de senha:
Para aumentar a personalização, temos o CSS para proporcionar elegância quando a senha for digirada:
<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(http://illiweb.com/fa/p_strength/pwd_bad.png);
}
/*** Senha boa **/
#pwd_middle {
background: url(http://illiweb.com/fa/p_strength/pwd_middle.png);
}
/*** Senha forte **/
#pwd_good {
background: url(http://illiweb.com/fa/p_strength/pwd_good.png);
}</style>
Deseja modificar as imagens? Basta solicitar novas no suporte oficial para os Artimeiros: http://ajuda.forumeiros.com/f17-criacoes-graficas


  • 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
    http://www.shiftactif.org/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
Ver o tópico anteriorVoltar ao TopoVer o tópico seguinte
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum