Jump to content
Fórum Script Brasil
  • 0

Puxando conteúdo externo pela Jquery UI Tabs


wellysonfr
 Share

Question

Estou fazendo um site de arquitetura e decoração. Na seção portfólio fiz uma galeria de fotos pra cada categoria: Ambientação, Apartamentos, Casas Urbanas e etc...

Essas categorias estão dividas com o Jquery UI Tabs.

Vocês podem ver pelo link:

http://www.duok.com.br/index.php?duok=nav/portfolio

Estou usando a configuração básica do Jquery UI Tabs.

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Ambientação</a></li>
    <li><a href="#tabs-2">Apartamentos</a></li>
    <li><a href="#tabs-3">Casas Urbanas</a></li>
    <li><a href="#tabs-4">Lojas</a></li>
    <li><a href="#tabs-5">Mostras</a></li>
    <li><a href="#tabs-6">Antes e Depois</a></li>
  </ul>
  <div id="tabs-1">
    <ul class="gallery">
        Conteúdo
    </ul>
    <div class="clear"></div>
  </div><!--tabs-1-->
    
  <div id="tabs-2">
    <ul class="gallery">
        Conteúdo
    </ul>
    <div class="clear"></div>
  </div><!--tabs-1-->
    
  <div id="tabs-3">
    <ul class="gallery">
        Conteúdo
    </ul>
    <div class="clear"></div>
  </div><!--tabs-1-->
    
  <div id="tabs-4">
    <ul class="gallery">
        Conteúdo
    </ul>
    <div class="clear"></div>
  </div><!--tabs-1-->
    
  <div id="tabs-5">
    <ul class="gallery">
        Conteúdo
    </ul>
    <div class="clear"></div>
  </div><!--tabs-1-->
    
  <div id="tabs-6">
    <ul class="gallery">
        Conteúdo
    </ul>
    <div class="clear"></div>
  </div><!--tabs-1-->
</div><!--tabs-->
Ativando as tabs usando esse java script:
&lt;script type="text/javascript">
$(function(){
    
    // Abas    
    $('#tabs').tabs();
    $('a').click(function() {
        $(this).blur();
    });        
                
});
</script>
O meu problema é o seguinte: Como vocês podem ver ele carrega todo o conteúdo das seis galerias na mesma página. Eu quero que somente a primeira aba seja carregada (ambientação), o resto seja carregado somente quando eu clicar nelas, entenderam? Eu procurei uma solução na internet mais ou menos assim:
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Ambientação</a></li>
    <li><a href="portfolio/conteudo1.html">Apartamentos</a></li>
    <li><a href="portfolio/conteudo2.html">Casas Urbanas</a></li>
    <li><a href="portfolio/conteudo3.html">Lojas</a></li>
    <li><a href="portfolio/conteudo4.html">Mostras</a></li>
    <li><a href="portfolio/conteudo5.html">Antes e Depois</a></li>
  </ul>
  <div id="tabs-1">
    <ul class="gallery">
        Contéudo Ambientação
    </ul>
    <div class="clear"></div>
  </div><!--tabs-1-->
</div><!--tabs-->

Como vocês podem ver, somente a primeira aba é carregada automaticamente. O conteúdo das outras abas estão separadas, evitando que todas carreguem de uma vez.

Pelo que eu li por aí o procedimento correto pra resolver esse problema seria o Ajax! A maioria dos fóruns que eu li a respeito estão em inglês e não entendi quase nada :lol:

Me ajudem a resolver esse problema. Desde já eu agradeço!!!!!!

Link to comment
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share



  • Forum Statistics

    • Total Topics
      150.9k
    • Total Posts
      648.8k
×
×
  • Create New...