Leandro Rodrigues » tabs http://www.lrodrigues.com/blog programação web, música e eletrônica Mon, 07 Dec 2009 12:56:54 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 Lendo o hash em abas e conteúdos seletivos jQuery http://www.lrodrigues.com/blog/jquery/lendo-o-hash-em-abas-e-conteudos-seletivos-jquery http://www.lrodrigues.com/blog/jquery/lendo-o-hash-em-abas-e-conteudos-seletivos-jquery#comments Thu, 26 Nov 2009 22:03:45 +0000 leandro http://www.verticis.com.br/~jscristo/leandro/blog/?p=10 Ao trabalhar com jQuery nas páginas, sabemos o quanto ficou fácil ocultar e mostrar containers, criar abas de navegação e criar conteúdos seletivos. O problema é que como não é carregado uma nova página, nossa url permanece a mesma ao ser passado o link ou colocado em favoritos. Ao visitar novamente o site que utiliza deste recurso, o link o trará ao conteúdo inicial nos containers, e não aquele que ele já havia acessado/preenchido. Para evitar esse tipo de problema podemos ler a hash, parte da url que é tratada somente ‘client side’, ao carregar a página conferir qual o conteúdo está setado para aparecer no estado inicial.

Mão na massa:

Queremos criar um seletor de conteúdo que oculta e mostra as divs conforme a seleção seguindo o html abaixo:

<div id="nav">
  <a href="#conteudo1">Conteúdo 1</a>
  <a href="#conteudo2">Conteúdo 2</a>
  <a href="#conteudo3">Conteúdo 3</a>
</div>
<div id="conteudo1" class="conteudo">Este é conteúdo 1</div>
<div id="conteudo2" class="conteudo">Este é conteúdo 2</div>
<div id="conteudo3" class="conteudo">Este é conteúdo 3</div>

Para fazer este efeito, existem várias formas usando jquery, escolhi uma delas e tratando com a técnica de usar a hash que expliquei em cima. Segue o código:
<script type="text/javascript">
  $(document).ready(function(){
    hash = window.location.hash;
    $(".conteudo").not(hash).hide();
    $("#nav a").click(function(){
      $(".conteudo").slideUp("slow");
      conteudo = $(this).attr("href");
      $(conteudo).slideDown();
    });
  });
</script>

Note que ao carregar ele acessa o atributo window.location.hash que me dá a hash chamada no navegador. Em seguida ele esconde todas as divs de conteúdo, MENOS a que tava na hash com o filtro de seletor not. Deixando então o estado de seleção conforme o link descreve. O “#conteudo1″ da hash é a mesma string que faz a seleção da div “conteudo1″, neste exemplo. Caso você quiser usar classes ou outros operadores jQuery, terá que tratar a string.


Veja a demonstração aqui

]]> http://www.lrodrigues.com/blog/jquery/lendo-o-hash-em-abas-e-conteudos-seletivos-jquery/feed 2