jhouFiled under: Cotidiano, Tecnologia | Tags: abrir e fechar div, Abrir e fechar div com jquery, Abrir e fechar divs, abrir e fechar divs usando sinal de menos e de mais
Há um tempo atrás publiquei um post, mostrando como Abrir e fechar Div`S com botao de menos e de mais, usando javascript simples.
Agora fiz um exemplo (simples também), usando jquery.
A principal vantagem de fazer este tipo de programacao JS é a facilidade de variacao e combicao efeitos.
Legal ne? Ai é só usar a criatividade.
Você pode copiar o código, ou baixar o arquivo que disponibilizei em PDF.
Veja como abrir e fechar div com botão de menos e de mais usando jquey.
Abs
Ola leitores. Depois de 1 ano resolvi publicar um estudo de usabilidade (feito em 2008) sobre o site da TAM e Gol.
Este estudo foi realizado durante o curso de pós graduação em Comunicação digital, educação e mídias interativas, do Centro Universitário de Belo Horizonte.
Clique aqui para baixar o arquivo pdf.
Abs
Oi gente! Muito tempo sem escrever, mais aí vai uma dica quente sobre hack para google chrome.
Funciona do jeito que está abaixo, neste exemplo o estilo será aplicado no link dentro do DIV links…. (apenas no chrome).
Não sei até quando esse hack irá funcionar, mais por enquanto funciona, aproveitem!
Só aplicar esse hack no seu css…
/* I LOVE simple chrome css hack */
@media screen and (-webkit-min-device-pixel-ratio:0){
div.links a {
margin-top:0px !important;
border:1px solid red;
}
}
Forte abraço, salve aos desenvolvedores web
Filed under: Tecnologia | Tags: abrir e fechar div, Abrir e fechar divs, abrir e fechar divs usando sinal de menos e de mais, sinal de -
Olá pessoas!
Quem aí é produtor XHTML e nunca se deparou com a pergunta:
Como abrir e fechar divs usando o sinal de menos e de mais?
Bem, vou ensinar aqui uma solução bem simples, você precisa de duas imagens (uma do” - ” e uma do ” + “) e do código abaixo….
entao temos:
menos.gif >>> 
mais.gif >>> 
Salve as imagens no mesmo local em que você irá gerar seu HTML, abra um editor de html (PsPad Editor, EditPlus, DreamWeaver, Bloco de notas) e crie um arquivo com o seguinte código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <script language="javascript" type="text/javascript"> function Mostra(idDiv,idImg){ div = document.getElementById(idDiv); img = document.getElementById(idImg); if(div.style.display == 'none') { div.style.display = 'block'; img.src='menos.gif'; } else { div.style.display = 'none'; img.src='mais.gif'; }}
</script> </HEAD> <BODY> <a style='cursor: pointer;' class='abre_fecha' onclick="Mostra('conteudo0','img0');"><img id='img0' src='mais.gif' /> Pavilhões</a> <br />
<div id='conteudo0' style='display: none;'> <br /> <p>Os setores voltados para a exposição de produtos durante a 22ª Superminas foram chamados de "Pavilhão Azul" e "Pavilhão Vermelho". Muitas oportunidades foram oferecidas nos dois ambientes de negócios e relacionamento. </P>
No "Pavilhão Azul", estiveram presentes as principais empresas fornecedoras do segmento alimentício do País. O espaço abrigou ainda a Ilha da Cachaça, um ambiente totalmente voltado para este segmento que vem conquistando espaço entre os consumidores e consequentemente nas gôndolas em todo o País. Já no "Pavilhão Vermelho", os expositores eram empresas voltadas para a prestação de serviços, como segurança, gráfica e fornecedores de equipamentos para supermercados e o varejo em geral. Participaram ainda, prefeituras de várias partes do Estado e órgãos do setor público em geral. <BR> </p> </div>
</BODY></HTML>
Simples né? Salve e veja o resultado.
Quer fazer a mesma coisa com Jquery? Veja aqui!
Neste exemplo, não me preocupei com avisos e questões de validação. Aproveito para dizer também, que nem sempre sites validados são um sinal de sites bem construídos.
AAAh, pra quem não me conhece eu sou o João Marcos, Produtor XHTML e arquiteto da informação em Belo Horizonte / MG.
Abraços!
