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.
Se ainda estiver interessado, leia também:
Este post foi criado
na Terça-feira, Agosto 5th, 2008 às 11:24 e está arquivado em JQuery.
Você pode seguir as atualizações pelo feed: RSS 2.0.
Você pode deixar um comentário, ou deixar um trackback de seu próprio site.
A Jquery realmente mudou minha vida!
(sem exageros).
Eu realmente consegui mais produtividade nos projetos,
mas este post poderia se chamar:
“como desaprender Java Script”
eu me tornei dependente da Jquery, não consigo mais escrever funções em Java Script , é automático, eu simpleemente já penso na sintaxe da Jquery.
Muito bom e realmente produtivo, mas é preciso tomar cuidado para não se tornar dependente destes frameworks.
Olá!
Só uma coisa. Por navegação TAB o item2 passa batido no exemplo. Isso torna o menu inacessivel em alguns aspectos.
Testei aqui no Firefox e no Opera a página de exemplo que vc disponibilizou e não funcionou em nenhum dos dois. 
Poxa, muito bom! Eu nunca me arrisquei com muitos javascript por achar que era complicado e deixava tudo pro programador. Agora vou me aventurar mais. Esse post foi o pontapé que faltava 
Mas é como a Fernanda disse, a navegação por TAB não funciona. Tem um jeito de contornar isso?
aaaaaaaa, foi mal. Era pra clicar no unico que nao era link. Intuitivo…
na minha opiniao o certo seria “jQuery TAMBÉM é para designers”
concordo que pros designers ela ajuda pakas com essa parte visual, mas a parte de backend e sistemas mais complexos só um programador avançado faz, e bem feito
abs
a ul com classe subMenu precisa estar dentro duma li também.
era isso.
Ótimo artigo. Só uma correção a ser feita: a ul.subMenu deve ficar dentro da li.itemPai, assim:
<ul class=”menu”>
<li><a href=”#”>Item 1</a></li>
<li class=”itemPai”>Item 2
<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>
<li><a href=”#”>Item 3</a></li>
<li><a href=”#”>Item 4</a></li>
<li><a href=”#”>Item 5</a></li>
</ul>
Sim, essas bibliotecas são bem legais, mas vou indicar outra: PROTOTYPE.
Essa sim é bem completa, e muito, muito mais solida que a jQuery, utilizo bastante as duas, mas a Prototype é uma maravilha, agora, há o Scriptaculous, uma biblioteca só de efeitos que trabalha junto com a Prototype, tem de tudo e dá pra fazer tudo, ajax com efeitos são simples de ser feito e quem já conhece javascript terá controle de tudo que a biblioteca faz.
Experimentem.
Muito bom mesmo este artigo.
Como o Felipe disse, eu tbm nunca me arrisquei em js, agora com esse artigo, vou me aventurar mais.
Valeuzão.
Muito bom artigo.
Mas queria alertar sobre um bug que há na versão sem CSS no IE7. Tudo bem, hoje em dia quase impossível alguém querer utilizar um menu assim, crú, né? mas é só para registrar: quando clicamos no Item 2, beleza, o efeito ocorre e tals, bonitinho. Mas ao encolher o submenu, ele sofre um deslocamento para a direita.
Como falei, não sei até onde devemos nos preocupar com isso, mas se de repente alguém perceber uma suposta quebra de layout, por exemplo, já sabe onde atacar primeiro.
Um grande abraço!
Eu tenho usado/aprendido jQuey com muita frequência nos meus últimos projetos e realmente sua facilidade é de encher os olhos.
Bom tutorial para mostrar para os Designers de plantão que eles podem fazer mais com os recursos disponíveis hoje.
@Fernanda e @Felipe Provavelmente no exemplo o autor não estava preocupado com esse quesito, porém basta colocar o item2 dentro da tag e pronto, já fica acessível via teclado… O CSS para deixar bonito é com vocês. =D
Oops… Desculpem por não ter colocado assim: tag <a>
Abraços.
Juarez, acontece que mesmo com a âncora no item 2, o menu não será expandido quando o usuário pressionar a tecla enter, ou espaço. A minha solução seria a inserção de um evento onfocus no item falado, assim quando o “tab” passasse por ele, o menu seria expandido como no click.
Muito bom o tutorial, confesso que eu pensava que era mais complexo.
Abraços.
Sugiro somente a troca do título do artigo, do jeito que foi feito, ofende em minha opinião, pois uso jQuery e não sou designer. :B
jQuery é uma ferramenta facilitadora de programação, tem uma parte muito boa de UI, mas ela não fica só nisto como você deu a entender no artigo. Tem um ótimo controle em Ajax, manipulação de eventos, de DOM, etc.
Sugiro o título algo como: JQuery como facilitador de programação
[]’s
Mais ou menos como o colega acima, eu nunca tive muita coragem de ler artigos sobre jquery, mas esse me mostrou de uma maneira simples como é simples!
obrigada!
num futuro próximo que sabe tudo mude, inventem outra linguagem e o java se esquece…
Muito interessante, eu desde alguns meses atrás estava a olhar esse jQuery. Espero que este post incentive outros designers assim como eu.
[…] [Artigo]: Diogo Eis me decepcionou Publicado 06/08/2008 Artigos Tags: diego eis, jQuery, tableless Estava na minha leitura diária de feeds, quando me deparo com um post vindo do Tableless que me deixou revoltado, o post se chama: jQuery é para designers. […]
Já cheguei a correr atrás de jQ um pouco, mas uma coisa me intriga: IDE.
Existe alguma q realmente minimize o tempo de desenvolvimento/aprendizado com jQ? (afinal, estamos falando de uma nova maneira de se trabalhar js, com funções novas, e nem sempre há disponibilidade de tempo para para e se dedicar somente ao aprendizado disto. Uma IDE auxiliaria bastante no aprendizado e no desenvolvimento disso)
abraço
obs.: sou programador (asp/cf) hehehe
Realmente os framworks de JavaScript ajudam, e muito!
Testei vários, inclusive o jQuery, mas preferi ficar com o MooTools.(que é um pouco menos famoso)
Muito bom o artigo!
Bom post, além de ajudar a galera do “design” acho que o JQuery (e qualquer outro framework) ajuda muito mais os programadores com uma visão um pouco mais para frente em determinados projetos.
@Felipe Magalhães
Com certeza o tempo de aprendizado é recuperado na melhora da produtividade rapidinho, gaste algumas horas para aprender que vale a pena.
Mas não se limite ao jQ, ele é muito bom, mas temos outras grandes opções como os já citados Prototype e MooTools, além do dojo que é super completo.
@Eughenio Constantino
Me diga porque você acha prototype mais sólida que jQuery. Eu já usei prototype por um bom tempo, e agora, geralmente, uso jQ em meus projetos. E posso afirmar com toda a certeza que não deve em nada para o prototype, inclusive é mais produtivo.
Aproveitando o post, o jquery tem uma comunidade brasil. jquerybrasil.com
[s]
JunioR
Verifiquei algumas funcionalidades do Jquery mais
ficarei mesmo com Java script, já estou familiarizado.
Eu estou terminando uma classe C# que permite progranar Jquery no Visual Studio.NET 2008
pra quem usa aspx é uma mão na roda, JQuery com o Mouse!
Fala fio…
Primeiro post e ainda por cima com erro
Valeu a dica
e se cuida
poxa fui dar uma olhada e econtrei umas coisas legais mesmo.. vou colcoar a usar…
A tendencia é esta mesmo, facilitar cada vez mais a vida dos designers, mas acho que sempre havera espaço para o programador tambem.
Abraços
http://www.sapoloko.com/
[…] jQuery bom para designers […]
Eu concordo com o rapaz ali que falou sobre a Prototype ser mais madura; já me deparei com algumas coisas da jQuery que não funcionam em em browser específico, por exemplo, enquanto nunca me deparei na Prototype (uso ela há 3 anos em quase todos os projetos) com algo que não fosse 100% crossbrowser.
E não gosto também de que na jQuery ao pegar objetos usando o $ ele não retornar objetos DOM.
Mas, tem uma coisa da jQuery que é muito bacana: os plugins. Muito fácil de fazer plugins, uma grande quantidade deles feitos pela comunidade. Nisso, ela é disparada melhor.
Pelo menos para mim, a JQuery foi bem mais funcional e agilizou meu processo de desenvolvimento.
Além disso, a comunidade e os plugins fazem a diferença.
A documentação é outro ponto forte da JQuery, pois nem todas as pessoas possuem facilidade em aprender a sintaxe.
Tento não pensar assim: isso é bom para isso, e aquilo somente para aquilo.
Uso Corel e Inskape…
Depende aonde e o que fazer…
Só para constar… para deixar o item 2 acessível pela tecla TAB deve-se adicionar um link (href), vazio… no exemplo citado o item não é acessado pq ele está sendo reconhecido somente como texto 
[…] preferem jQuery. Não é à toa, ela é extremamente simples de ser usada. Nunca ouviu dizer que jQuery é para designers? Isso também não significa que usuários mais experientes ou experts na linguagem não irão […]
[…] No começo da web JavaScript era considerado… Leia mais […]
Por enquanto estou usando o Mootools, mas me parece que o jQuery é melhor… Assim que achar um framework ideal vou fazer um uma classe que gera menus dinamicos de camadas infinitas e com suporte à usabilidade. A idéia é fazer os botoes -> -< abrirem os menus!
A Prototype é mais madura. Não sei se é a mais antiga, em ajax é a que tem o maior controle de tudo, você controla até se o usuário tiver algum problema de conexão e como o Christian falou 100% crossbrowser. Plugins, eu não posso falar nada pois nunca usei e precisei, tudo que precisei o prototype tinha. Até os efeitos o scriptaculous dá conta do recado.
Bom, até o momento eu tenho o prototype tatuado no meu braço(dando uma de zune guy, rs).
Abraços.
Muito bom esse artigo
vlw
Acho que de todas a Jquery é o que vem crescendo mais rápido, eu tenho usado o Jquery em muito de meus projetos, e agora vou me atualizar, usando também o Prototype e o Mootools, que são outras duas frameworks muito interessantes.
Mas já me aventurei, nas duas e a que tive melhor redimento e leveza foi no Jquery.
Banaca este JQuery, simples e fácil de usar. Uma pergunta. E se eu quiser implementar um menu com vário níveis, este menu teverá ter um controle capaz de perceber quando o menu esta na parte inferior da tela caso esteja deverá abrir o sub-menu para cima(para não ter que rolar a tela). Por exemplo suponhamos que o menu esteja na vertical do lado direito da tela.
Exeste alguma função que faça este controle?
[…] preferem jQuery. Não é à toa, ela é extremamente simples de ser usada. Nunca ouviu dizer que jQuery é para designers? Isso também não significa que usuários mais experientes ou experts na linguagem não irão […]
Legal 
so que queria um que ao passar o mouse aparecesse um submenu!
[…] 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. […]