Como sabemos, não há como formatar diretamente algumas tags de formulários, tais como: checkbox, radio ou select.
Hoje mostrei de uma forma simples como “formatar” a tag de formulário checkbox utilizando css e jquery.
Primeiramente precisamos pegar duas imagens que representem o checkbox ativo e desativo, sugiro este site: http://www.iconfinder.com/search/?q=check+box. Eu juntei as imagens e trabalhei com css sprite.
Logo após isso, vamos criar no estrutura HTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <label><span><input type="checkbox" value="0" id="chkAceitar" /></span> Aceitar os termos.</label> <label><span><input type="checkbox" value="1" id="chkReceber" /></span> Receber notÃcias.</label> </body> </html>
Com a estrutura criada, precisamos formatar nosso HTML com css
<style type="text/css">
label{
display:block;
}
label input{
filter: alpha(opacity=0);
-moz-opacity:.0;
opacity:.0;
-khtml-opacity: .0;
}
label span{
background-image:url(checkbox.png);
background-position:0 0;
background-repeat:no-repeat;
float:left;
height:10px;
margin:6px 6px 0 0;
width:10px;
}
label span.ativo{
background-position:0 -10px;
}
input{outline:none;}
</style>
Observe que eu deixei a tag input com opacidade zero e utilizei a tag span como máscara.
Agora basta criar o código javascript para podermos manipular quando o ckeckox for clicado.
Para isso o código é bem simples, vamos trabalhar com a classe “ativo” do css que criamos, assim poderemos verificar se a tag input está no seu estado ativo ou não.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('label span input').click(function(){
if($(this).parent('span').hasClass('ativo')){
$(this).parent('span').removeClass('ativo');
}else{
$(this).parent('span').addClass('ativo');
}
});
});
</script>
Viram como é simples? Na próxima vamos personalizar outras tags.
[],
Olá à todos!
Hoje vou postar um código para criarmos menu dropdown com jquery. Para aqueles que trabalham com esse magnífico framework sabem que é muito fácil criar qualquer tipo de função/animação com ele.
Mas vamos ao que interessa.
Primeiro vamos criar uma lista com quatro itens.
<ul id="nav">
<li>Menu 1
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</li>
<li>Menu 2
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</li>
<li><a href="#">Link 1</a</li>
<li>Menu 3
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</li>
</ul>
Em seguida formatar o css para que o menu posso ser horizontal e seus submenu´s verticais.
<style type="text/css">
*{
padding:0;
margin:0;
list-style:none
}
#nav{
width:auto;
float:left
}
#nav li{
display:inline;
float:left;
margin:0 20px;
position:relative;
}
#nav li ul{
display:none;
left:0;
position:absolute;
top:20px;
}
#nav li ul li{
width:auto;
margin:0
}
#nav li .on{
display:block
}
</style>
Após isso vamos fazer a magia com jquery para que quando passemos o rato (mouse) por cima do menu escolhido o submenu apareça.
<script type="text/javascript">
$(function(){
$('#nav li').mouseenter(function(){
$(this).children('ul')
.slideToggle()
.addClass('on');
}).mouseleave(function(){
$(this).children('ul')
.delay(500)
.slideUp()
.removeClass('on');
});
});
</script>
Observem que não utilizamos mais que cinco linhas para criarmos esse menu dropdown. Fácil,não?
[]s.