AJAX tab content – Fácil e eficaz

• Tweet
• Sharebar

• Tweet

Pegou moda utilizar Ajax para mostrar conteúdo nas páginas de modo a tornar a sua navegação mais prática e rápida. Neste tutorial vou explicar como criar um sistema de navegação simples que carrega o conteúdo de outra página dentro de um DIV recorrendo a um script AJAX.

Podem ver o conteúdo original aqui

É bastante simples o uso deste script, neste artigo apenas vou ensinar como o utilizar, futuramente irei explicar o seu código.

Ficheiros Necessários

1. ajaxtabscontent.zip (contem os seguintes ficheiros):
2. demo.htm
3. ajaxtabs.css
4. ajaxtabs.js
5. loading.gif
6. shade.gif
7. shadeactive.gif
8. external.htm, external2.htm, external3.htm, external4.htm

Entre as tags < head> e < /head> devem colocar o seguinte código:

<link rel="stylesheet" type="text/css" href="ajaxtabs.css" />

<script type="text/javascript" src="ajaxtabs.js">

/***********************************************
* Ajax Tabs Content script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

Este código chama o ficheiro CSS para estilizar a página e chama o script para controlar o conteúdo.

De seguida no corpo da página apenas têm de criar uma lista com alguns atributos para fazer a ligação com o script ajax.

<ul id="maintab" class="shadetabs">
<li class="selected"><a href="#default" rel="ajaxcontentarea">Intro</a></li>
<li><a href="external.htm" rel="ajaxcontentarea">Bird</a></li>
<li><a href="external2.htm" rel="ajaxcontentarea">Dog</a></li>
<li><a href="external3.htm" rel="ajaxcontentarea">Cat</a></li>
<li><a href="external4.htm" rel="ajaxcontentarea" rev="content.css, content.js">Sea Otter</a></li>
</ul>

<div id="ajaxcontentarea" class="contentstyle">
<p>Este é o conteúdo que irá aparecer na primeira TAB. Este conteúdo não é carregado utilizando AJAX.</p>
</div>

<script type="text/javascript">
//IMPORTANTE na UL devem dar-lhe o ID que declararem aqui de modo a que o script funcione. Tentei o que sugerem no site oficial mas caso queiram utilizar o script em mais de uma lista deverão declara-la novamente startajaxtabs("outralista").

// Outra nota importante este script deve ficar depois do código da lista e nunca antes senão o script não funciona. Podem coloca-lo mesmo antes da tag < /body> o importante é que fique depois do códigos das lista.
startajaxtabs("maintab")
</script>

E está tudo.
Este script é uma maneira bastante util e eficaz de criar conteúdo estruturado e de resposta rápida.
Qualquer dúvida deixem nos comentários.

3 Comments + Add Comment

• 
  Lyceuhns 3 de Setembro de 2007 às 19:51

  Wow!
  Muito bom, a um tempo tava atrás de algo bem simples assim, mas felizmente encontrei aqui.

  Muito bom ter trazido esse conteúdo do Dinamic Drive para cá e para o português.

  Até mais.

  Responder
• 
  Leandro 4 de Outubro de 2007 às 5:24

  Naum funciona chamando um ASPX, sabe pq ?

  Responder
• 
  Mario Andrade 4 de Outubro de 2007 às 11:58

  Não sei responder o motivo ao certo mas antes também tentei chamar imagens apenas e não funcionou.
  Talvez funcione apenas chamando ficheiros html…

  Resta saber se funciona com .php

  Responder