30 de jul de 2009

Efeito jQuery toggle

Como obter este efeito, que proporciona ao usuário 'revelar/esconder' conteúdo da página com jQuery:

CSS:
<style type="text/css" media="all">
#box-toggle {
margin:0 auto;
text-align:left;}
#box-toggle .tgl {margin-bottom:20px;}
#box-toggle span {
display:block;
cursor:pointer;
font-weight:bold;
font-size:14px;
color:#c30;
margin-top:15px;
}
</style>

ScriptjQuery:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery.fn.toggleText = function(a,b) {
return this.html(this.html().replace(new RegExp("("+a+"|"+b+")"),function(x){return(x==a)?b:a;}));
}
$(document).ready(function(){
$('.tgl').before('<span>Revelar conteúdo</span>');
$('.tgl').css('display', 'none')
$('span', '#box-toggle').click(function() {
$(this).next().slideToggle('slow')
.siblings('.tgl:visible').slideToggle('fast');
$(this).toggleText('Revelar','Esconder')
.siblings('span').next('.tgl:visible').prev()
.toggleText('Revelar','Esconder')
});
})
</script>


Marcação HTML:
<div id="box-toggle">
<div class="tgl">
Conteúdo Oculto
</div></div>

Para usuários do Blogger:

Colocar o código CSS e o ScriptjQuery abaixo da tag ]]></b:skin>. Onde está em negrito no Script, coloque a chamada que deseja ('Revelar', 'Leia Mais', 'Ver', etc...)

Colocar a marcação HTML dentro do post ou widget da sidebar.

Créditos: Maujor

3 pacotes de ícones

Made of Wood


Conjunto de ícones com textura em madeira

icon for transformers


Inspirado na onda Transformers, este pacote oferece 65 ícones em tamanho 256x256px

Coquette Icons


O pacote 'Coquette' contém 50 ícones de alta qualidade nos tamanhos: 16×16px, 32×32px, 48×48px, 64×64px e 128×128px.

200 ícones vetoriais gratuitos

 "Primo" é o nome deste bonito pacote com 200 ícones vetoriais criado por webdesignerdepor. As versões PNG apresentam-se nos seguintes tamanhos: 48 × 48, 64 × 64 e 128 × 128.Os ícones são totalmente gratuito para uso pessoal e comercial.