Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Fabyo

Sistema de Abas com AJAX

Por , em PHP

Recommended Posts

Fabyo    66

Fabyo
Postado

Ola pessoal, como ja tinha prometido, vou postar um exemplo de navegação por abas, usando ajax

a parte mais interessante desse sistema é que todo funcionamento esta no arquivo js, sem escrever nenhuma linha de js no codigo html, apenas fazendo a referencia normal do arquivo js, mas toda ação onclick, onmouseover, onmouseout e o efeito para imitar um link, tudo é feito pelo arquivo js, como voces podem ver o html fica super limpo, e esse arquivo js quem fez ele foi o Illidan ,fera em javascript que manja tudo, eu apenas juntei com meu sistema ajax e montei esse sistema de abas eu vou postar um exemplo simples e depois deixarei em anexo mais 2 modelos de exemplo e todo layout das abas eu tirei desse site http://alistapart.com/articles/slidingdoors/

e um outro detalhe interessante é que eu nao usei links (<a href>) assim nao precisei cancelar o click de navegação causado quando se clica num link, mas criei um efeito que ficou igual ao link quando passa o mouse em cima muda de cor e quando clica muda de pagina, e aparece no nome da pagina no titulo do navegador, minha intenção é ajudar, quem quiser copiar e usar esse codigo fique a vontade, se tem algo a acrescentar sera bem-vindo, bom chega de papo e vamos aos codigosindex.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br">

<head>
<title>Sistema em ABA AJAX</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
	@import url("css/aba.css");
</style>
<meta http-equiv="generator" content="notepad++" />
<meta http-equiv="author" content="Fabyo" />
<script type="text/javascript" src="js/funcoes.js"></script>	
</head>

<body>
<div id="header">
<ul>	
	<li><span class="normal">Pagina1</span></li>
	<li><span class="normal">Pagina2</span></li>
	<li><span class="normal">Pagina3</span></li>
	<li><span class="normal">Pagina4</span></li>
	<li><span class="normal">Pagina5</span></li>	
</ul>
</div>

<div id="conteudo">

</div>
</body>
</html>

 

funcoes.js criado por Illidan

function XMLHTTPRequest() { 
var http = 0;
if (window.XMLHttpRequest) {
http = new XMLHttpRequest();
} else {
	try { 
http = new ActiveXObject("Msxml2.XMLHTTP");
	} catch(e) {
		try { 
http = new ActiveXObject("Microsoft.XMLHTTP");
		} catch(e) { 
http = false; 
		} 
	}
} 
return http; 
}

function mostrar_pagina(url, div) {
var http = XMLHTTPRequest();
if (http) {
http.onreadystatechange = function() {
		if (http.readyState == 4) {
			if (http.status == 200) {
				var retorno = unescape(http.responseText.replace(/\+/g," "));
				document.getElementById(div).innerHTML = retorno
			} else {
				alert('There was a problem with the request.');
			}
		}		
	}
http.open('GET', url, true);
http.send(null);
}
else {
	alert('Erro seu navegador nao suporta ajax');
}
}	

function addEvent(obj, evType, fn) {
if (typeof obj == "string") {
	if (null == (obj = $(obj))) {
		throw new Error("Cannot add event listener: HTML Element not found.");
	}
}
if (obj.attachEvent) {
	return obj.attachEvent(("on" + evType), fn);
} else if (obj.addEventListener) {
	return obj.addEventListener(evType, fn, true);
} else {
	throw new Error("Your browser doesn't support event listeners.");
}
}

function iniciar() {	

var items = [], allItems = document.getElementsByTagName("li");

for (var i = 0; i < allItems.length; i++) {				
allItems[i].onclick = function() {	
	for (var item = this.parentNode.firstChild; item; item = item.nextSibling) {		
		item.className = 'normal';			
	}
	this.className = 'current';				
	var padrao = /(<span(.*?)>(.*?)<\/span>)/i;	
	var pagina = this.innerHTML.replace(padrao, "$3");	
	var url = 'receber.php?pagina=' + pagina;						
	mostrar_pagina(url, 'conteudo');						
	document.title = pagina;		
}				
}	

var aba = document.getElementsByTagName("span");

for (var j = 0; j < aba.length; j++) {		
	aba[j].onmouseover = function() {		
		if(this.className != 'link'){					
			this.className = 'link';
		} 	
	}		
	aba[j].onmouseout = function() {	
		if(this.className != 'normal'){		
			this.className = 'normal';
		} 	
	}
}	
}

// quando terminar o carregamento da página, executa a "iniciarMudancaDeEnterPorTab"
addEvent(window, "load", iniciar);

 

obs: esse sistema foi testado nos navegadores: IE, FF e Opera e funcionou perfeitamente em todos

 

outra coisa se a pagina nao existir ele mostrara uma pagina padrao no caso a home.php

 

todo o resto do sistema, imagens e css estao em anexo

 

exemplos das abas:

 

aba1 = aba.JPG

aba2 = aba2.JPG

aba3 = aba3.JPG

 

anexos:

aba.zip

aba2.zip

aba3.zip

Compartilhar este post

Link para o post
Compartilhar em outros sites

Perfect Lion    10

Perfect Lion
Postado

Fabyo show de bola... para bens para você e o Illidan juntando você que é o kra do php com o outro que é o ninja no js só tem a esperar coisa boa

Compartilhar este post

Link para o post
Compartilhar em outros sites

Chackan    0

Chackan
Postado

só uma dúvida, eu criei uma página chamada contato.html (esse é o nome do arquivo). eu queria saber como que fica o link (endereço) para chamar essa página?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Newerton    0

Newerton
Postado

Parabens Fabyo!So uma duvida, vi que tem uma pagina1.php, quando eu crio a pagina2.php com<?phpecho "PAGINA2";?>Ele me retorna HOME.

Compartilhar este post

Link para o post
Compartilhar em outros sites

MiltonNeves    0

MiltonNeves
Postado

Nossa show de bola

 

Parabens Fabyo

 

tava procurando um esquema desses de abas mas nao sabia que iria ficar assim tao bom, sem dar refresh, e nem aparece o codigo fonte muito dahora

 

Newerton, pelo que eu saquei se a pagina nao existir ele vai buscar a pagina home, entao se quiser crie a pagina2.php e testa ai pra ve

 

abraços http://forum.imasters.com.br/public/style_emoticons/default/joia.gif/> http://forum.imasters.com.br/public/style_emoticons/default/joia.gif/>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Newerton    0

Newerton
Postado

Nossa show de bola

 

Parabens Fabyo

 

tava procurando um esquema desses de abas mas nao sabia que iria ficar assim tao bom, sem dar refresh, e nem aparece o codigo fonte muito dahora

 

Newerton, pelo que eu saquei se a pagina nao existir ele vai buscar a pagina home, entao se quiser crie a pagina2.php e testa ai pra ve

 

abraços http://forum.imasters.com.br/public/style_emoticons/default/joia.gif/> http://forum.imasters.com.br/public/style_emoticons/default/joia.gif/>

Foi o que eu postei acima hehe

 

So uma duvida, vi que tem uma pagina1.php, quando eu crio a pagina2.php com

<?php

echo "PAGINA2";

?>

Ele me retorna HOME.

Ele tinha que me retornar PAGINA2

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fabyo    66

Fabyo
Postado

MiltonNeves o meu sistema nao esconde o codigo fonte , alias nao existe como esconder o codigo html, js e css

 

Newerton as paginas incluidas estao normais era só criar o arquivo mesmo

 

eu criei o resto da paginas e coloquei em anexo para você ver

 

qualquer duvida só postar

 

aba.zip com todas as paginas de exemplo

Compartilhar este post

Link para o post
Compartilhar em outros sites

Newerton    0

Newerton
Postado

MiltonNeves o meu sistema nao esconde o codigo fonte , alias nao existe como esconder o codigo html, js e cssNewerton as paginas incluidas estao normais era só criar o arquivo mesmoeu criei o resto da paginas e coloquei em anexo para você verqualquer duvida só postaraba.zip com todas as paginas de exemplo

Fabyo,Eu estou usando o IE7 Beta 3, pode ser isso o problema também?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Newerton    0

Newerton
Postado

MiltonNeves o meu sistema nao esconde o codigo fonte , alias nao existe como esconder o codigo html, js e cssNewerton as paginas incluidas estao normais era só criar o arquivo mesmoeu criei o resto da paginas e coloquei em anexo para você verqualquer duvida só postaraba.zip com todas as paginas de exemplo

Fabyo,Eu estou usando o IE7 Beta 3, pode ser isso o problema também?
O problema e meu IE7 B3 mesmo, mudei o 'echo PAGINAx' para 'echo PAGINA 1' ou algum texto qualquer, o browser não da o refresh, nen mesmo se eu clicar em atualizar, e nem mesmo apertando 'CRTL+F5', ja no FF 1.5 e instantaneo, mudo o texto, e logo clico no link e ja muda, no IE7 B3 se eu ficar sem mecher no browser por 30 segundos, e volto clicar no link ele volta a funcionar!Estranho, mas e um bug do IE7 B3 ainda!Valeu Fabyo! Obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fabyo    66

Fabyo
Postado

é o IE deve guardar o cache da página por isso quando você faz alguma atualização nao funciona quando você da f5, mas você pode fazer com que o ajax nao guarde o cache da pagina usando

 

		http.open('GET', url, true);	
http.setRequestHeader('Content-Type',
					   "application/x-www-form-urlencoded; charset=iso-8859-1");
http.setRequestHeader("Cache-Control",
						   "no-store, no-cache, must-revalidate");
http.setRequestHeader("Cache-Control",
						  "post-check=0, pre-check=0");
http.setRequestHeader("Pragma", "no-cache");		
http.send(null);

Compartilhar este post

Link para o post
Compartilhar em outros sites

Newerton    0

Newerton
Postado

é o IE deve guardar o cache da página por isso quando você faz alguma atualização nao funciona quando você da f5, mas você pode fazer com que o ajax nao guarde o cache da pagina usando

http.open('GET', url, true);			http.setRequestHeader('Content-Type',						   "application/x-www-form-urlencoded; charset=iso-8859-1");		http.setRequestHeader("Cache-Control",							   "no-store, no-cache, must-revalidate");		http.setRequestHeader("Cache-Control",							  "post-check=0, pre-check=0");		http.setRequestHeader("Pragma", "no-cache");				http.send(null);
Desculpe e minha ignorância!Mas esse code eu inclui no arquivo funcoes.js na linhas 33 e 34?Se for isso ja adicioneu e não funciono! Se não for me indique onde incluir!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fabyo    66

Fabyo
Postado

é la mesmo , tenta colocar na pagina receber.php no começo de tudo

 

header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

Compartilhar este post

Link para o post
Compartilhar em outros sites

Newerton    0

Newerton
Postado

é la mesmo , tenta colocar na pagina receber.php no começo de tudo

 

header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");header("Cache-Control: no-store, no-cache, must-revalidate");header("Cache-Control: post-check=0, pre-check=0", false);header("Pragma: no-cache");
Valeu Fabyo, volto a funcionar normalmente sem adicionar o header!

Mudei os parâmetros do browser 'Check for newer versions of stored page' de 'Automatically' para 'Every time I visit the webpage' ai funciono perfeito, ai resolvi voltar ao 'Automatically' e continua normal hehe

 

Obrigado Fabyo, às vezes minha duvida pode ser a duvida do próximo.

 

So duas duvida, tem como eu colocar acentos no titulos das abas? como por exemplo: promoções, apresentação?

 

A outra é, tem como colocar essas abas na vertical no canto esquerdo como no modelo abaixo!

 

Imagem Postada

 

Obs.: essa imagem e do novo site do windows ( http://preview.microsoft.com/en/us/default.aspx ), e estão em javascript, usei ela como modelo só.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fabyo    66

Fabyo
Postado

tudo que você falou da para fazer, mas to sem tempo agora e precisa ver com calma, e sobre os acentos é que o nome do link é o nome do arquivo dai se você colocar acento o arquivo tera que ser igual e nao fica bom um nome do arquivo com acentos, dai o que precisa fazer é separar os titulos e links, e sobre o layout é tudo questao de mudar os css para posicionar onde você quiser

Compartilhar este post

Link para o post
Compartilhar em outros sites

geraldo patricio    0

geraldo patricio
Postado

Fabyo,ficou ótimo seu script implementando o Ajax, agora me diga uma coisa no meu caso a página 1, terá uma tela de cadastro e assim que for efetuado o cadastro será redirecionado para outra página tipo confirma_cadastro.php.o problema é como fazer para que essa página confirma_cadastro.php permaneça dentro da área das abas e não somente abra a página confirma_cadastro.php, entende?ou seja no meu caso a página 1 terá mais 6 páginas internas mais na mesma aba da página 1 e se eu for clicando nos links de dentro da página irá abrir a página do link fechando as abas e quero que permaneça a página da aba aberta.será que consegui explicar?qualquer coisa manda um e-mail pra mim com a implementação pra eu testar.obrigadogm.filho@hotmail.comaté mais

Compartilhar este post

Link para o post
Compartilhar em outros sites

geraldo patricio    0

geraldo patricio
Postado

Não tem como vco postar a solução de como ficaria se caso eu tivesse mais páginas para mostrar na página1? implementando ajax?antes de postar a dúvida anterior eu tentei fazer sim, mais não consegui.grato.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos PHP
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito