Login:

iMasters | Por uma internet mais criativa e dinâmica

Feeds

Ajax

Feed da seção Ajax

Newsletter de Ajax


Terça-feira, 20/05/2008 - 10:00 - Por Danillo Castilho
Seções relacionadas:

Usando abas com conteúdo dinâmico

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.

Todos os artigos de Danillo Castilho

7 comentários publicados

  • 1. Muito Bom...

    Quarta-feira, 28/05/2008, por Bruno Silva da Costa

    ótimo artigo!!

    Responder comentário

  • 2. xml Dinamico

    Sexta-feira, 20/06/2008, por Gustavo Gonçalves

    Gostaria de saber se da pra utilizar um xml dinamico (montado atraves de uma query com php), assim eu não precisaria ficar criando um xml toda vez q atualizar o site po exemplo.
    Obrigado

    Responder comentário

  • 3. xml Dinamico

    Sexta-feira, 20/06/2008, por Gustavo Gonçalves

    Gostaria de saber se da pra utilizar um xml dinamico (montado atraves de uma query com php), assim eu não precisaria ficar criando um xml toda vez q atualizar o site po exemplo.
    Obrigado

    Responder comentário

  • 4. Consegui!

    Domingo, 22/06/2008, por Gustavo Gonçalves

    Desculpem pelo post duplicado aí!
    Consegui fazer o PHP gerar o xml em questão nesse artigo, porem não funcionou no Firefox, apenas no IE. Será que tem a ver com a função que verifica qual browser o usuario está utilizando??? Algo com o objeto "Microsoft.XMLDOM"?? Se alguem tiver uma luz aê....

    • Danillo Castilho - Domingo, 22/06/2008

      Gustavo estou criando essa função aqui e assim que estiver pronta passo uma url para você fazer o download!

      Obrigado pelo comentário!

    Responder comentário

  • 5. muito bom

    Segunda-feira, 07/07/2008, por Edinei cavalcanti

    gostei pq tem comentário assim não tem como fica perdido

    Responder comentário

  • 6. Cor do backgroud do link ativo

    Domingo, 20/07/2008, por Diego Guimarães

    olá Danillo Castilho, primeiramente parabéns pela materia. Gostaria de saber como seria possivel, a cor do fundo do link ativo no momento ficar de outra cor...
    entedeu? por ex. quando clicamos em Noticias, o fundo ficar na cor Cinza escuro.

    tentei fazer aqui mas naum achei uma solução.

    Obrigado

    Responder comentário

Poste um comentário


Os textos publicados neste espaço são de responsabilidade única de seus autores (colunistas e leitores) e podem não expressar necessariamente a opinião do iMasters.

Sobre o autor

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


Indique para um amigo

captcha

TI SHOP Produtos iMasters

  • Lançamento: CD-ROM Treinamento Aplicado de SQL - Lançamento! Treinamento Aplicado de SQL - Aprenda a trabalhar com SQL com bancos de dados Oracle e SQL Server. São mais de 100 tópicos explicados por Mauro Pichilliani, um articulistas mais lidos do iMasters. Aproveite! Apenas R$ 69,90 no TI SHOP.
  • Lançamento: Livro iMasters "O Encontro de 2 Mundos"- Este livro conta com 56 crônicas de profissionais mais admirados e influentes do mercado brasileiro de Internet. Aproveite o preço especial para leitores do iMasters. Apenas R$ 40,00 e envio imediato!
  • DVD Curso Completo de Photoshop - Do conceito à finalização Lançamento! Curso Completo de Photoshop, em DVD, com mais de 230 aulas dividas em 4 módulos: conceito, básico, avançado e finalização. Apenas R$ 69,50 no TI SHOP - Frete com 50% de desconto
  • DVD Javascript Starter - Curso Completo Com mais de 9 horas de vídeo-aulas, é um curso completo sobre Javascript. Ideal para quem deseja aprender a linguagem. Apenas R$ 64,90 no TI SHOP - Frete com 50% de desconto!

2001 - iMasters FFPA Informática Ltda - Todos os direitos reservados.