Criar um controle básico, idêntico ao existente em vários sites que é preciso aceitar os termos de uso para avançar o cadastro. Vamos criar uma tela com um texto e um checkbox, onde o botão de cadastrar só vai ser exibido se o usuário aceitar os termos de uso. É importante ressaltar que, em se tratando de html e javascript, esses arquivos é feito download para máquina do cliente colocando a integridade do sistema vulnerável. Nosso post será basico e fará somente o controle de visualização.
Tecnologias aplicadas:
Estrutura de arquivos:
- termosdeuso.html => arquivo foco do nosso post com o texto de termos de uso, o checkbox e o botão de cadastro.
Desenvolvimento:
Arquivo: termosdeuso.html
No body do nosso arquivo central, vamos criar uma Div bem simples com o texto dos termos de uso e, logo abaixo, o checkbox para o usuário marcar concordando com o texto apresentado. O botão terá a configuração display:none que fará com que ele fique oculto por padrão.
<body>
<div>
<p> Aqui fica o texto do termo de uso para o usuário fazer a leitura. </p>
<input type="checkbox" id="chkopcao" /> Aceito os termos descrito acima. <br>
<input type="button" id="btncadastrar" value="Cadastrar" style="display:none" />
</div>
</body>
No Head do arquivo, vamos incorporar a biblioteca jQuery e configurar o evento click do checkbox para exibir ou ocultar o botão.
<!-- jQuery -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#chkopcao').click(function(){ // configura o evento click do checkbox
if($(this).is(":checked")) // verifica se ele está marcado
$("#btncadastrar").show(); // exibe o botão
else
$("#btncadastrar").hide(); //oculta o botão
});
});
</script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#chkopcao').click(function(){ // configura o evento click do checkbox
if($(this).is(":checked")) // verifica se ele está marcado
$("#btncadastrar").show(); // exibe o botão
else
$("#btncadastrar").hide(); //oculta o botão
});
});
</script>
Pronto!
Agora basta testar e adaptar para seu cenário.
Obrigado!
Em breve teremos outros posts.
Nenhum comentário:
Postar um comentário