Scribd Logo
Importer

Bienvenue sur Scribd !

  • Jquery É Bom para Designers

    Transféré par

    Jorge Correa Dos Reis
    42 vues2 pages

    Titre original

    jQuery é bom para designers

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formats disponibles

    DOCX, PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    42 vues2 pages

    Jquery É Bom para Designers

    Transféré par

    Jorge Correa Dos Reis

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 2

    jQuery bom para designers

    No comeo da web JavaScript era considerado uma linguagem de programao completamente difcil e intil. Afinal, depois de uma semana estudando a linguagem, o sujeito s conseguia escrever um script que validasse um formulrio de contato que muitas vezes dava erro em out ros browsers que no o Internet Explorer. Isso acontecia porque tanto o Netscape quanto o Browser azul tinha seus prrpios padres de implementaes de solu o para o Javascript que era ainda estava engatinhando como linguagem. Dessa forma, muitos cdigos proprietrios 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 manuteno. O cliente, em um belo domin go de sol ligava e dizia que o formulrio estava pulando, muitas vezes acompanhado de um no sei nem o que browser/navegador: eu dou dois cliques no c one da internet e entro. Ento l ia o programador e precisava revisar dois, trs cdigos que faziam a mesma coisa em navegadores diferentes. Ainda bem que, assim como o HTML e o CSS, o JavaScript tambm sofreu sua padronizao, facilitando a criao de scripts que facilitam muito a vida do designer, deixando o designer cada vez mais feliz sem precisar consultar um programador. Uma dessas solues foi a biblioteca jQuery. Uma biblioteca to simples que designers conseguem fazer timos efeitos com apenas algumas linhas de com ando. Vamos a um exemplo/tutorial prtico: um menu com submenus. Quando a pessoa clicar no link o submenu deve aparecer, com um efe ito de slide. Para o html usamos uma marcao 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>

    10

    <li><a href="#">Item 4</a></li>

    11

    <li><a href="#">Item 5</a></li>

    12

    </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>


    Aps a incluso da jQuery podemos us-la sem problemas. Coloque seu cdigo entre as tags <scr ipt> 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. Ento, para chamarmos o ele mento que queremos colocar uma ao, 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 ao click, ou seja quando a pessoa clicar no link propriamente dito.

    $('ul.menu li.itemPai').click()
    E passamos para ele uma funo q ue far nosso efeito de slide.

    $('ul.menu li.itemPai').click( function(){

    // Aqui vir a funo

    })

    Agora, a funo que far o efeito. Chamamos com a chave $ quem queremos animar e o linkamos com o tipo de animao. Para o efeito de slide (ou seja, encolher e esticar o elemento dando a iluso de que ele est saindo de trs do outro elemento para baixo) a jQuery tem dois e feitos prontos que so: 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. Ento iremos usar slideToggle para este efeito. Tambm usamos o return false para fazer com que o link no seja executado, retirand o o usuario da nossa pgina.

    $('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 no vai funcionar porque voc esta referenciando um elemento que ainda no existe para o navegador, logo ele no pode referenciar ningum. Uma soluo seria colocar o seu script aps o seu cdigo html, mas isso vai contra uma das prticas de tableless que trabalhar com camadas e, assim como o CSS, no interessante deixar ele entre o cdigo html por n razes. A outra soluo faz parte do escopo do jQuery que faz com que seu script s rode aps o carre gamento completo do seu cdigo html. Para isso basta criar uma funo 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 pgina carregar. Fazemos isso via javascript e no via css porque no queremos que o menu fique invisivel para pessoas que no usam javascript. Para isso, a jQuery tem a funo 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 aplicao de CSS bsico. O interessante da jQuery que ela bem inuitiva e tem muitas coisas que j vem no escopo dela que resolvem muitos problemas que os d esigners querem desenvolver, mas no querem que um programador faa por ser uma coisa to simples de fazer. jQuery a parte da programao que os designers sentiam falta e muitas vezes contornavam com um arquiv o flash que destruia a semantica de rea como o menu que acabamos de construir.

    Vous aimerez peut-être aussi