Portal iMastersPortal iMasters
Assine a newsletterNewsletter
Dev (Back & Front)ARTIGO

Usando abas com conteúdo dinâmico

Danillo CastilhoAutor
20 de maio de 2008 às 10:00
5 min de leitura

O Ajax revolucionou a WEB e seu propósito simples de carregar novos conteúdos sem recarregar toda a página faz com que a web se torne mais parecido com um sistema Desktop. Nesse artigo iremos estudar como carregar conteúdos diferenciados utilizando abas como principal foco.

Criaremos seis arquivos, conforme listados abaixo:

  • index.html
  • estilos.css
  • esportes.xml
  • noticias.xml
  • entretenimento.xml
  • funcoes.js

Primeiro criaremos o arquivo XHMTL usando Tableless:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>Abas com conteúdo dinâmico</title>
<link rel="stylesheet" type="text/css" href="estilos.css" />
<script language="javascript" type="text/javascript" src="funcoes.js">
</script>
</head>
<body>
</body>
</html>

Neste arquivo usaremos dois arquivos externos que veremos neste artigo, chamados pelas tags:

CSS – Arquivo estilos.css

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

Javascript – Arquivo funcoes.js

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

Ainda no arquivo XHTML, criaremos as abas com o seguinte bloco de códigos:

<div id="menu" class="menu">
<ul>
	<li>
		<a href="#">
		Esportes
		</a>
	</li>
	<li>
		<a href="#">
		Notícias
		</a>
	</li>
	<li>
		<a href="#">
		Entretenimento
		</a>
	</li>
</ul>
</div>

Neste bloco criaremos uma lista de objetos que, com a formatação em CSS, se tornaram abas. Abaixo das abas criaremos uma div aonde será encontrará o conteúdo dinâmico:

<br />
<div id="conteudo" class="conteudo">
</div>

Agora a sua página XHMTL já está pronta!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>Abas com conteúdo dinâmico</title>
<link rel="stylesheet" type="text/css" href="estilos.css" />
<script language="javascript" type="text/javascript" src="funcoes.js">
</script>
</head>
<body>
<div id="menu" class="menu">
<ul>
	<li>
		<a href="#">
		Esportes
		</a>
	</li>
	<li>
		<a href="#">
		Notícias
		</a>
	</li>
	<li>
		<a href="#">
		Entretenimento
		</a>
	</li>
</ul>
</div>
<br />
<div id="conteudo" class="conteudo">
</div>
</body>
</html>

Abaixo criaremos a formatação dessa página com o arquivo externo estilos.css

1º Passo – Formatar as abas.

#menu li {
	list-style: none; 	
	padding: 3px 5px;
	margin-right: 5px;
	font-family: Tahoma;
	font-size: 10px;
	text-align: center;
	border: 1px solid #CCCCCC;
	float: left;
	cursor: pointer;
}

Neste bloco css formatamos todas as tags li que estão dentro da tag div menu.

2º Passo – Formatar link e alinhamento das abas.

#menu li a {
	color: #000000;	 
	text-decoration: none;
}

#menu, #menu ul {
	margin: 0px;
	padding: 0px;
}

Já neste, tiramos as decorações usadas pelo browser nos links e formatamos as abas para ficarem no canto esquerdo superior da página.

3º Passo – Formatar a div de conteúdo.

#conteudo {
	border: 1px solid #CCCCCC;
	font-family: Tahoma;
	font-size: 13px;
	text-align: left;
	color: #000000;
}

Acima formatamos a div onde estará o conteúdo dinâmico para que ela fique com bordas e também uma formatação de texto, que será exibido na mesma. Agora já temos o arquivo CSS pronto.

<!--
#menu li {
	list-style: none; 	
	padding: 3px 5px;
	margin-right: 5px;
	font-family: Tahoma;
	font-size: 10px;
	text-align: center;
	border: 1px solid #CCCCCC;
	float: left;
	cursor: pointer;
}

#menu li a {
	color: #000000;	 
	text-decoration: none;
}

#menu, #menu ul {
	margin: 0px;
	padding: 0px;
}

#conteudo {
	border: 1px solid #CCCCCC;
	font-family: Tahoma;
	font-size: 13px;
	text-align: left;
	color: #000000;
}
-->

Abaixo criaremos três arquivos XML com o conteúdo a ser exibido na página principal. Para cada arquivo criaremos quantidade de conteúdo diferentes para visualizarmos, no final, como a página de comporta.

1º Arquivo – esportes.xml

<?xml version="1.0" encoding="iso-8859-1"?>
<assuntos>
	<assunto>
		<texto>
			Esportes1
		</texto>
		<texto>
			Esportes2
		</texto>
		<texto>
			Esportes3
		</texto>
		<texto>
			Esportes4
		</texto>
		<texto>
			Esportes5
		</texto>
	</assunto>
</assuntos>

2º Arquivo – noticias.xml

<?xml version="1.0" encoding="iso-8859-1"?>
<assuntos>
	<assunto>
		<texto>
			Noticias1
		</texto>
		<texto>
			Noticias2
		</texto>
	</assunto>
</assuntos>

3º Arquivo – entretenimento.xml

<?xml version="1.0" encoding="iso-8859-1"?>
<assuntos>
	<assunto>
		<texto>
			Entretenimento1
		</texto>
		<texto>
			Entretenimento2
		</texto>
		<texto>
			Entretenimento3
		</texto>
	</assunto>
</assuntos>

Os arquivo contêm a mesma estrutura, porêm com conteúdos e nomes diferentes!

Agora criaremos o arquivo Javascript para capturar as informações externas e exibí-las na div conteúdo da página.

1º Passo – Função para capturar e exibir o conteúdo.

function carregarConteudo(elemento_pai, pagina) {
	
	document.getElementById(elemento_pai).innerHTML = ""; // Efetua a limpeza da Tag que contêm o id conteudo
	
	documentoXml = carregarDococumentoXml(pagina+".xml"); // Chama uma função para carregar o documento XML
	
	elementoXml = documentoXml.getElementsByTagName("texto"); // Seleciona todas as tags texto dentro do documento XML
	
	for (i=0;i<elementoXml.length;i++){ // faz um loop contando a quantidade de elementos tag texto dentro do arquivo XML
		
	local_exibir = document.getElementById(elemento_pai); // variavel - captura a tag com id conteudo
	elemento_div = document.createElement("DIV"); // cria uma tag div
	elemento_div.style.padding="5px 10px 5px 10px"; // aplica um estilo para a div criada acima padding: ;
	var informacoes = elementoXml[i].childNodes[0].nodeValue; // captura os valores dentros das tags visitadas pelo loop
	elemento_texto = document.createTextNode(informacoes); // cria um nó de valores
	
	elemento_div.appendChild(elemento_texto); // aplica o nó de valores dentro do nó div
	local_exibir.appendChild(elemento_div); // aplica o nó div dentro no nó conteudo que está na página html
	
	} // fim do loop

}

Nesta função, são repassados dois parâmetros que serão enviados quando o usuário clicar nas abas.

Parâmetro – elemento_pai.

A id da div aonde será exibido o conteúdo.

Parâmetro – pagina.

0 nome do arquivo XML que será carregado.

2º Passo – Função para carregar o arquivo xml.

function carregarDococumentoXml(pagina){
	
	if(window.ActiveXObject){ // verifica qual browser o usuario esta usando
		documentoXml = new ActiveXObject("Microsoft.XMLDOM"); // Internet Explorer
	} else {
		documentoXml = document.implementation.createDocument("","",null); // Mozilla, Safari...
	}
	
	documentoXml.async = false;
	documentoXml.load(pagina); // carrega a página enviada como parametro
	return(documentoXml); // retorna o documento XML carregado

}

Neste bloco o arquivo passado como parâmetro será carregado para que possamos capturar o conteúdo solicitado.

Agora basta aplicar as funções que serão chamadas na página. Assim voltaremos ao arquivo XHTML que será como o abaixo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>Abas com conteúdo dinâmico</title>
<link rel="stylesheet" type="text/css" href="estilos.css" />
<script language="javascript" type="text/javascript" src="funcoes.js">
</script>
</head>
<body onload="carregarConteudo('conteudo', 'esportes')">
<div id="menu" class="menu">
<ul>
	<li>
		<a href="#" onclick="carregarConteudo('conteudo', 'esportes')">
		Esportes
		</a>
	</li>
	<li>
		<a href="#" onclick="carregarConteudo('conteudo', 'noticias')">
		Notícias
		</a>
	</li>
	<li>
		<a href="#" onclick="carregarConteudo('conteudo', 'entretenimento')">
		Entretenimento
		</a>
	</li>
</ul>
</div>
<br />
<div id="conteudo" class="conteudo">
</div>
</body>
</html>

Acima, quando a página for carregada ou quando o usuário clicar a aba desejada, será solicitada a função carregarConteudo encontrada no arquivo Javascript com os parâmetros:

conteudo – nome da div aonde será mostrado o conteúdo carregado.

esportes, noticias, entretenimento – nome dos arquivos xml a serem carregados conforme a solicitação do usuário.

Assim concluímos a criação de abas com conteúdo dinâmico.

Abaixo todos os arquivos para download.

Danillo CastilhoAutor

é diretor de Arte e Criação da empresa SP Vitrine.

mail
Ver perfil →
↳

Fios