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!

Compare preços de livros jQuery.

, , ,

14 Comentários

[jQuery] – Selecionar um checkbox e marcar todos

Hoje vamos ver como selecionar todos os checkbox’s clicando apenas em um.

Todos

php

jquery

ruby

css

zend

rails

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; 
			});
		}
	});	
});

Compare preços de livros de javascript.

,

6 Comentários

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>

Configurações Padrão.

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>

Abrir a imagem

jOverlay foi testado com sucesso nos seguintes navegadores com Javascript habilitado:
* Firefox 3+
* Internet Explorer 6+
* Safari 2+
* Opera 9+
* Chrome 1+

Baixar o jOverlay
Documentação do jOverlay
Site do Autor

Compare preços de livros jQuery.

, ,

1 Comentário

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 .

Formulário à ser validado



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

Compare preços de livros jQuery.

, , ,

3 Comentários