MUIOMUIO.NET

AJAX tab content - Fácil e eficaz

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

Comments RSS TrackBack Identifier URI