Tableless
2003 - 2009, tableless.com.br
Quase todos os direitos reservados.
.
No começo da web JavaScript era considerado uma linguagem de programação completamente difícil e inútil. Afinal, depois de uma semana estudando a linguagem, o sujeito só conseguia escrever um script que validasse um formulário de contato que muitas vezes dava erro em outros browsers que não o Internet Explorer. Isso acontecia porque tanto o Netscape quanto o Browser azul tinha seus prórpios padrões de implementações de solução para o Javascript que era ainda estava engatinhando como linguagem.
Dessa forma, muitos códigos proprietários solucionavam problemas em determinado browser, que faziam o programador javascript (sim, isso já foi cargo) fazer muita volta para solucionar em outro browser. Isso acarretava em problemas imensos em manutenção. O cliente, em um belo domingo de sol ligava e dizia que o formulário estava “pulando”, muitas vezes acompanhado de um não sei nem o que é browser/navegador: “eu dou dois cliques no ícone da internet e entro”. Então lá ia o programador e precisava revisar dois, três códigos que faziam a mesma coisa em navegadores diferentes.
Ainda bem que, assim como o HTML e o CSS, o JavaScript também sofreu sua padronização, facilitando a criação de scripts que facilitam muito a vida do designer, deixando o designer cada vez mais feliz sem precisar consultar um programador. Uma dessas soluções foi a biblioteca jQuery. Uma biblioteca tão simples que designers conseguem fazer ótimos efeitos com apenas algumas linhas de comando.
Vamos a um exemplo/tutorial prático: um menu com submenus. Quando a pessoa clicar no link o submenu deve aparecer, com um efeito de slide.
Para o html usamos uma marcação simples, indicando quem é o menu e quem é o submenu.
<ul class="menu"> <li><a href="#">Item 1</a></li> <li class="itemPai">Item 2</li> <ul class="subMenu"> <li><a href="#">SubItem 1</a></li> <li><a href="#">SubItem 2</a></li> <li><a href="#">SubItem 3</a></li> </ul> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> <li><a href="#">Item 5</a></li> </ul>
Para ativar o jQuery você precisa baixá-la do site oficial (é apenas um aquivo js pequenininho) e coloque-a de preferencia na pasta ou em uma subpasta de onde está seu aquivo html, precisamos colocar a seguinte linha (de preferencia entre as tags <head> e </head> ):
<script type="text/javascript" src="pasta/onde/está/a/jquery.js"></script>
Após a inclusão da jQuery podemos usá-la sem problemas. Coloque seu código entre as tags <script> e <script> depois da chamada da jQuery. Tenha em mente que todo o que você vai fazer é chamado pela chave $ e interligamos os comandos com pontos. Então, para chamarmos o elemento que queremos colocar uma ação, no caso clicar, usamos a chave $ e para referenciamos, usamos as mesmas chamadas que usamos para o css.
$('ul.menu li.itemPai')
Agora, linkamos esse objeto com a ação click, ou seja quando a pessoa clicar no link propriamente dito.
$('ul.menu li.itemPai').click()
E passamos para ele uma função que fará nosso efeito de slide.
$('ul.menu li.itemPai').click(function(){
// Aqui virá a função
})
Agora, a função que fará o efeito. Chamamos com a chave $ quem queremos animar e o linkamos com o tipo de animação. Para o efeito de slide (ou seja, encolher e esticar o elemento dando a ilusão de que ele está saindo de trás do outro elemento para baixo) a jQuery tem dois efeitos prontos que são: slideUp que recolhe o elemento e slideDown que expande o elemento. Ainda temos o slideToggle, que recolhe o elemento se estiver expandido ou vice-versa. Então iremos usar slideToggle para este efeito. Também usamos o return false para fazer com que o link não seja executado, retirando o usuario da nossa página.
$('ul.menu li.itemPai').click(function(){
$('.menu .submenu').slideToggle()
return false
})
E voilá, o efeito está pronto. Exceto por um problema… Se você colocar este script antes do seu menu, ele não vai funcionar porque você esta referenciando um elemento que ainda não existe para o navegador, logo ele não pode referenciar ninguém. Uma solução seria colocar o seu script após o seu código html, mas isso vai contra uma das práticas de tableless que é trabalhar com camadas e, assim como o CSS, não é interessante deixar ele entre o código html por n razões. A outra solução faz parte do escopo do jQuery que faz com que seu script só rode após o carregamento completo do seu código html. Para isso basta criar uma função que englobe seu script dentro da chave $. Ficando assim:
$(function(){
$('ul.menu li.itemPai').click(function(){
$('.menu .submenu').slideToggle()
return false
})
})
Isto resolve nosso problema. Agora, precisamos esconder nosso submenu quando a página carregar. Fazemos isso via javascript e não via css porque não queremos que o menu fique invisivel para pessoas que não usam javascript. Para isso, a jQuery tem a função hide que esconde um elemento (display:none). Se você quiser fazer o contrario, basta usar show no lugar de hide.
<script type="text/javascript">
$(function(){
$('.menu .submenu').hide()
$('ul.menu li.itemPai').click(function(){
$('.menu li .submenu').slideToggle()
return false
})
})
</script>
E esse é o nosso script final que pode ser visto aqui e aqui com aplicação de CSS básico. O interessante da jQuery é que ela é bem inuitiva e tem muitas coisas que já vem no escopo dela que resolvem muitos problemas que os designers querem desenvolver, mas não querem que um programador faça por ser uma coisa tão simples de fazer. jQuery é a parte da programação que os designers sentiam falta e muitas vezes contornavam com um arquivo flash que destruia a semantica de área como o menu que acabamos de construir.
Quem trabalha com Firefox sabe como as extensões podem mudar a vida de um desenvolvedor. Nós separamos algumas extensões e sugerimos para você. Confira.
Leia maisO desenvolvimento com wordpress vem crescendo e sua plataforma está ficando mais robusta a cada dia. Por isso preparamos alguns artigos e tutoriais sobre desenvolvimento e implemetação de Wordpress em sites.
Leia maisHoje não é sorte. Colocar um site em uma boa colocação no Google não é fácil e muitas vezes pode ser uma dor de cabeça sem tamanho. Por isso, manter um código organizado e simples é um bom começo. Separamos algumas dicas para que você consiga otimizar seu código e fazer algumas modificações nos seus sites para que eles não fiquem atrasados.
Leia maisNós falamos muito sobre XHTML e CSS. Então, nada mais justo que ter um lugar onde você consiga aprender melhor as técnicas e metodologias de desenvolvimento com CSS e XHTML.
Leia mais
2003 - 2009, tableless.com.br
Quase todos os direitos reservados.
.
[...] Além da própria linguagem, aprenda a usar alguma biblioteca, como Mootools, jQuery ou Prototype. Aliado a essas ferramentas, você poderá criar aplicações muito mais interessantes em muito menos tempo. Mas atenção: não aprenda somente a biblioteca, sem aprender antes JavaScript puro. Afinal, saber só jQuery é coisa de designer. [...]
Aqui não funcionou lol
mas fazer o que, no fim, é tudo javascript, facil de fazer, só ter paciência (:
mas eu concordo, acho mais fácil pegar um pronto e me habituar a usar comandos prontos, afinal o cara que fez é o único que sabe, na vida é assim, quem sabe faz, quem num sabe copia ^^
uheAOIEUI (: