Posts Tagged javascript
Menu Accordion (Sanfona) com jQuery e CSS
Hoje vou mostrar como criar um menu accordion (Sanfona) utilizando jQuery e CSS, com um exemplo bem prático.
Este menu accordion é mais conhecido como menu Sanfona, é muito útil quando temos um número grande de categorias e sub-categorias em um menu lateral, ele facilita à organização do menu e ainda podemos colocar uns efeitinhos com jQuery.
Para utilizar este menu é preciso da biblioteca do jQuery
Para baixar o jQuery clique aqui.
Chamando o jQuery
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
HTML:
Aqui está o html do menu, colocar um id=”nav-menu” na base do menu.
<ul id="nav-menu"> <li> <a href="javascript:void(0);">Etapa 1</a> <ul> <li><a href="#">Etapa 1.1</a></li> <li><a href="#">Etapa 1.2</a></li> </ul> </li> <li> <a href="javascript:void(0);">Etapa 2</a> <ul> <li><a href="#">Categoria 2.1</a></li> <li><a href="#">Categoria 2.2</a></li> </ul> </li> <li><a href="javascript:void(0);">Categoria 3</a></li> <li> <a href="javascript:void(0);">Categoria 4</a> <ul> <li><a href="#">Categoria 4.1</a></li> <li><a href="#">Categoria 4.2</a></li> </ul> </li> </ul>
Javascript:
Aqui neste código estamos bindando um evento clique para o próximo elemento depois da tag a que está dentro da li por sua vez dentro da ul com id #nav-menu, cada vez que clicar nela vamos dar um efeito slideToggle.
$(document).ready( function() { $('ul#nav-menu > li > a').click(function() { $(this).next().slideToggle(); }); });
Css:
Agora aplicamos um css no menu para não ficar sem graça, mas você pode alterar conforme a necessidade.
ul#nav-menu { margin:0; padding:0; list-style:none; } ul#nav-menu > li { margin-top:1px; background:#AFAFAF; font-weight: bold; width: 200px; list-style:none; } ul#nav-menu > li > a { display:block; padding: 4px; color: #EFEFEF; text-decoration:none; outline:none; } ul#nav-menu > li > a:hover { background: #8F8F8F; } ul#nav-menu > li > ul { margin: 0; padding:0; list-style:none; display:none; background:#9F9F9F; } ul#nav-menu > li > ul > li{ height: 30px; list-style:none; padding: 0;} ul#nav-menu > li > ul > li:hover{ height: 30px; background: #8F8F8F;} ul#nav-menu > li > ul > li a { display:block; padding: 2px 0 0 4px; color:#EFEFEF; text-decoration:none; outline:none; } ul#nav-menu > li > ul > li a:hover { color:#FFF; background: #8F8F8F; }
Veja abaixo um exemplo do menu já pronto!
[jQuery] – Selecionar um checkbox e marcar todos
Hoje vamos ver como selecionar todos os checkbox’s clicando apenas em um.
Chamando o jQuery
Para baixar o jQuery clique aqui.
<script src="jquery.js" type="text/javascript"></script>
HTML:
Aqui está o formulário, colocar um id no checkbox que você vai querer clicar e selecionar todos.
<form action="" method="post">
<input type="checkbox" value="0" id="selectAll" name="opcao[]" style="margin-left: 30px;"/> <b>Todos</b>
<input type="checkbox" value="1" name="opcao[]" style="margin-left: 30px;"/> php
<input type="checkbox" value="2" name="opcao[]" style="margin-left: 30px;"/> jquery
<input type="checkbox" value="3" name="opcao[]" style="margin-left: 30px;"/> ruby
<input type="checkbox" value="4" name="opcao[]" style="margin-left: 30px;"/> css
</form>Javascript:
Aqui neste código estamos bindando um evento clique para elemento com o id do checkbox que queremos que com um clique ele marque e desmarque o restante dos checkbox’s.
$(document).ready(function() { $('#selectAll').click(function() { if(this.checked == true){ $("input[type=checkbox]").each(function() { this.checked = true; }); } else { $("input[type=checkbox]").each(function() { this.checked = false; }); } }); });
Como criar um Box Modal com jOverlay.
Aproveitando o gancho do último $_POST, que falei sobre Como validar um formulário HTML usando o plugin Validation para jQuery., hoje vou falar sobre um outro plugin jQuery chamado jOverlay, utilizado para criar box modal na tela.
O jOverlay está na versão 0.7, foi desenvolvido por Alvaro Júnior, facilitou minha vida um bocado e espero que lhe seja útil também.
Para quem não sabe o que é overlay clique aqui!.
Vamos ver na prática!
Primeiramente, para utilizar este plugin você deve incluir no seu script a biblioteca do jQuery e do jOverlay:
<script src="jquery.js" type="text/javascript"></script> <script src="jquery.joverlay.min.js" type="text/javascript"></script>
Você pode usar as configurações padrões do jOverlay, simplesmente chamando uma div escondida com:
<a onclick="$('#box1').jOverlay();" href="javascript:void(0);">Configurações Padrão.</a>Ou editar fácilmente seus parametros, podemos alterar por exemplo a cor de fundo e sua opacidade, vamos alterar o fundo para vermelho “#FF0000″ e a opacidade que por default está: “0.6″, vamos deixar “0.8″.
<a onclick="$('#box1').jOverlay({color:'#FF0000', opacity : 0.8});" href="javascript:void(0);">Clique aqui para ver como fica!</a>Clique aqui para ver como fica!
Legal né? Vamos ver algo mais interessante!
Este plugin não está limitado somente à isso, vamos ver o que mais ele pode nos oferecer!
Agora eu quero abrir no modal outra pagina.html e após carregar o modal executar uma função qualquer.
<a onclick="$().jOverlay({ url:'teste2.html', success:function(){ alert('no lugar do alert podemos chamar uma função!');} });" href="javascript:void(0);">Clique Aqui!</a>Clique Aqui para ver como fica!
Agora vamos fazer aparecer uma imagem e dar um auto close depois de 3 segundos.
<a onclick="$().jOverlay({url:'img_desenvolvimento.jpg', imgLoading : 'joverlay/ajax-loader.gif', timeout:3000});" href="javascript:void(0);">Abrir a imagem</a>* Firefox 3+
* Internet Explorer 6+
* Safari 2+
* Opera 9+
* Chrome 1+
Como validar um formulário HTML usando o plugin Validation para jQuery.
Hoje vou apresentar o Validation, um plugin jQuery utilizado para validação de formulários HTML.
Existem pela web muitos validadores de formulário utilizando javascript, escolhi o Validation por ser uma solução desenvolvida em jQuery, por ser seu mais antigo plugin para validação de formulários HTML, e porque indico e utilizo em minhas aplicações.
Com ele podemos facilmente, mostrar mensagens de erro e esconder-las quando necessário.
Atualmente o plugin está na versão 1.5.2 e sua documentação pode ser encontrada aqui .
HTML do formulário exibido acima:
<form id="form_validacao" method="post"> <fieldset> <legend>Validação com jQuery Validation</legend> <label for="nome">Nome: </label> <input id="nome" name="nome" type="text" /> (requerido, e ter no mínimo 2 caracteres) <label for="email">E-Mail: </label> <input id="email" name="email" type="text" /> (requerido, valida e-mail) <label for="senha">Senha: </label> <input id="senha" name="senha" type="password" /> (requerido, e ter no mínimo de 6 caracteres) <label for="confirmasenha">Confirma Senha: </label> <input id="confirmasenha" name="confirmasenha" type="password" /> (deve ser igual a senha, e ter no mínimo de 6 caracteres) <label for="forcarcomentario">Forçar comentário?: </label> <input id="forcarcomentario" name="forcarcomentario" type="checkbox" /> <label for="comentario">Comentário: </label> <textarea id="comentario" name="comentario"></textarea> (requerido se requerer comentário estiver marcado) <input class="submit" type="submit" value="Submit" /> </fieldset> </form>
Precisamos validar os campos com as seguintes opções:
Nome: campo requerido, e ter no mínimo de 2 caracteres;
E-mail: campo requerido, e verificar se o e-mail está correto;
Senha: campo requerido, e ter no mínimo 6 caracteres;
Confirma Senha: campo requerida, ter no mínimo 6 caracteres, e conferir com a senha;
Comentário: campo requerido somente se campo “Forçar Comentário” estiver marcado;
Validando o formulário incluíndo as regras do Validation jQuery:
$(document).ready(function(){ jQuery('#form_validacao').validate( { rules: { nome: { required: true, minlength: 2 }, email: { required: true, email: true }, senha: { required: true, minlength: 6 }, confirmasenha: { required: true, minlength: 5, equalTo: "#senha" }, comentario: { required: "#forcarcomentario:checked", minlength: 3 } }, messages: { nome: { required: "Por favor, preencha seu nome!", minlength: "Seu nome tem que ter mais de 2 letras!" }, email: { required: "Por favor, digite seu e-mail!", email: "E-mail inválido!" }, senha: { required: "Preencher sua senha!", minlength: "Senha deve ter no mínimo 6 caracteres!" }, confirmasenha: { required: "Preencher a confirmação de senha!", minlength: "Confirmação de senha deve ter no mínimo 6 caracteres!", equalTo: "Confirmaçao de senha não confere com a senha!" }, comentario: { required: "Preencher o coméntário!" } } }); });
Baixar o Validation
Documentação do Validation
Site do Autor


























Comentários