Sistema de Abas com AJAX

[Márcio T. 0]

tem sim do mesmo jeito que voce faria sem ajax, na pagina de noticias voce pega a noticia pelo id

Não entendi :huh:/> Você pode me mostrar como se faz?Ficarei muito grato.

[Denisson Santos 0]

é 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);

Olá Pessoal, cheguei ao fórum a poucos dias e gostaria de colocar a título de curiosidade o código correspondente a este em outras linguagens:COLOCAR NO TOPO ACIMA DE QUALQUER OUTRO CÓDIGO//JSP<% response.setHeader("Cache-Control","no-cache"); //HTTP 1.1 response.setHeader("Pragma","no-cache"); //HTTP 1.0 response.setDateHeader ("Expires", -1); //evita o caching no servidor proxy%>//ASP<% Response.CacheControl = "no-cache" %><% Response.AddHeader "Pragma", "no-cache" %> <% Response.Expires = -1 %>//HTML<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" /><meta http-equiv="Content-Language" content="pt-br" /><meta http-equiv="Expires" content="Thu, 01 Jan 1970 00:00:00 GMT" /><meta http-equiv="Cache-Control" content="no-store" /><meta http-equiv="Pragma" content="no-cache" />//CGI ou PEARL (Retorna: retorna.cgi ou retorna.pl)#!/usr/local/bin/perl<br />print "Content-type: text/html; charset=ISO-8859-1\n\n";<br />print "Pragma: no-cache\n";<br />print "Cache-Control: no-store\n";<br />print "Expires: 1\n\n";No caso do de usar cgi-pearl mude a linha da função do Ajax:De: ajax.open("GET","retorno.cgi",true);Para: ajax.open("GET","/cgi-bin/retorno.cgi",true); // cgi-bin é o nome da pasta de seus arquivos "neste caso"//Could-fusion<cfheader name="Cache-Control" value="private"><cfheader name="Cache-Control" value="no-cache"><cfheader name="Expires" value="#GetHttpTimeString(DateAdd('d', -1, Now()))#"><cfheader name="Pragma" value="no-cache">Valeu...T+

[nvGullit 0]

pow meu, baixei e vou testar assim q for possível, só q pelo q eu vi até agora ficou muito show mano.

[[ GuTo ] 0]

Legal que tem mais gente fazendo JS não obstrusivo!

 

Só tenho uma dica: criem funções para serem acessadas e escutadas por qualquer elemento e não coloquem as funções no elemento. Seria o caso de adicionar o evento ao elemento, onde ele chamaria a função. E no caso aí, vocês setam uma função para cada evento, é diferente.

 

É como se fizessem:

<a onclick="function(){ this.innerHTML='MUDOU!'}">0001</a><a onclick="function(){ this.innerHTML='MUDOU!'}">0002</a><a onclick="function(){ this.innerHTML='MUDOU!'}">0001</a>

Sacaram?

Por isso, fazer usando a função do Scott Andrew, http://onlinetools.org/articles/unobtrusivejavascript/, ou outras genéricas, que façam algo como:

function addEvent(elm, evType, fn) {//funcao do SCOTT ANDREW	if (!elm) { alert("O elemento passado para a funcao addEvent não é um objeto válido."); return false }	if (elm.addEventListener) { elm.addEventListener(evType, fn, true); return true; }	if (elm.attachEvent) return elm.attachEvent("on"+evType, fn);	alert("Handler could not be added"); return false;}function get_src(e) { var el; return ( ( el=e.target || (w.event && event.srcElement) ) && (el.parentNode==3 && el.parentNode || el) ) || 0; }//funcao minha xDfunction mudar(e) {   var li = get_src(e);   li.innerHTML = 'MUDOU!'}function init() {  var a = document.getElementsByTagName("li"), n = a.length, i=0  for (;i<n; i++)	addEvent(a[i],"click",mudar);}addEvent(window,"load",init);

Aí, todos elementos chamam uma mesma funcao em comum e lah ela identifica qual elemento esta chamando-a.

 

Espero ter passado minha idéia.

Seria mto bom se logo visse sites com JS unobtrusive e CSS, com um HTML limpo, q estejam dentro dos web standards e etc. A web será mto melhor. ;)/>

 

[]'s!

[bush 1]

Bom eu tenho uma duvida meio que boba pois sou noob no assunto.seguinte pra eu pega um pagina de login de outro serve eu tentei com o iframe e não funcionou no FF dai fui no IE a mesma coisa não funcionou.Esse sistema de abas não é tipo o do FF que você pode entra em qualquer pagina msm que prescise de login? e na hora que você sai dela e volta ela ta fazendo refresh isso é assim msm?bom é que eu to criando um sistema pra que acessara paginas em 3 servidores e eu queria um sistema de abas sem refresh que aceite faze login nas paginas .Se alguen puder dar uma força eu agradeço.

[Beto Lima 0]

como faz para colocar mais páginas?a primeira abre a página 1, o resto só mostra home...quero colocar página 2, 3 etc..outra coisa, em web server local, tipo o wamp, ele funciona legal...agora em servidor remoto pago ele não mostra a página1.php. mostra somente home...

[BIJÜ 0]

Olá!...tenho 5 abas na index, todas com botões com 3 estágios: link, hover e active (usando background-position) e todas as abas (e containers) tem cores diferentes, ou seja, nenhuma é igual a outra!...como uso este seu script nesse caso?!?

 

Ex.:

 

<div id="aba-1">	<ul>		<li class="li-1"><a href="#"><span class="selected">link-1</span></a></li>		<li class="li-2"><a href="#"><span>link-2</span></a></li>	</ul></div><div id="aba-2">	<ul>		<li class="li-3"><a href="#"><span class="selected">link-3</span></a></li>		<li class="li-4"><a href="#"><span>link-4</span></a></li>	</ul></div>#aba-1 {width:370px; height:30px;}#aba-1 ul {width:370px; height:30px; list-style:none; display:inline; overflow:hidden;}#aba-1 li {display:inline; list-style-type:none;}#aba-1 span {overflow:hidden; height:0px !important; height /**/:30px; /* for IE5/Win */ cursor:pointer; float:left; padding:30px 0 0 0;}#aba-1 span:hover, #aba-1 span:active {background-position:0 -30px;}#aba-1 span.selected {background-position:0 -60px; cursor:default;}.li-1 span {width:185px; background:url(../images/imagem-1.gif) top left no-repeat;}.li-2 span {width:185px; background:url(../images/imagem-2.gif) top left no-repeat;}#aba-2 {width:370px; height:30px;}#aba-2 ul {width:370px; height:30px; list-style:none; display:inline; overflow:hidden;}#aba-2 li {display:inline; list-style-type:none;}#aba-2 span {overflow:hidden; height:0px !important; height /**/:30px; /* for IE5/Win */ cursor:pointer; float:left; padding:30px 0 0 0;}#aba-2 span:hover, #aba-2 span:active {background-position:0 -30px;}#aba-2 span.selected {background-position:0 -60px; cursor:default;}.li-3 span {width:185px; background:url(../images/imagem-3.gif) top left no-repeat;}.li-4 span {width:185px; background:url(../images/imagem-4.gif) top left no-repeat;}

Obrigado!!

[zarathsutra web2 0]

EU BAIXEI O EXEMPLO COMPLETO E AQUI NÃO PEGOU FICA SEMPRE NA PAINA HOME POR QUE ?pagina1.phppagina2.phppagina3.phppagina4.phppagina5.phptenho todos o s arquivos,eu uso o debian etch apache 2 php4 mysql 5firefox, opera, ephifania, etc.. não pego em nem um PARABENS MUITO BOM O SCRIPT..apesar de nao funcionar aqui !

[Candoca 0]

nao funcionou no firefox http://forum.imasters.com.br/public/style_emoticons/default/upset.gif/>

 

alguem tem uma dica pra solucionar o problema??

[denis.galvani 0]

Parabens Fabyo!

 

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

<?php

echo "PAGINA2";

?>

 

Ele me retorna HOME.

Pessoal

 

Vi que o script está passando o argumento com o nome na página em maiúsculo, o que faz a página não ser encontrada em uma máquina Linux. Já que o arquivo paginaX.php está em minúsculo.

Endereço solicitado pelo script: http://localhost/~denis/ajax/aba3/receber.php?pagina=Pagina3

 

Então, para contornar esses problemas com a "caixa" dos nomes, sugiro alterarem a linha no recebe.php:

 

// DE: $pagina = $_GET["pagina"];// PARA:$pagina = strtolower($_GET["pagina"]);

Outra coisa..., quando uma página não existe, que é o caso do exemplo que só tem a primeira, faltam as páginas:

pagina2.php e etc exibe e o lindo erro "There was a problem with the request."

Pra mudar isso, fiz o seguinte, quando for erro 404, especificamente, exibe um alert.

 

Confiram como fica o trecho no funcoes.js:

 

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 if (http.status == 404) {					alert('Página não encontrada!')				} else {					alert('There was a problem with the request.\n'+						'http.readyState = '+http.readyState+'\n'+						'http.status = '+http.status);				}			}				}				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);	}		else {		alert('Erro seu navegador nao suporta ajax');	}}

[Rodrigo Borges Marquez 0]

Fabyo, você e bom, hem rapaz...Ficou muito bom, e gostaria de saber de você se pode me ajudar.Estou utilizando o q fez, e me deparei com um problema. Estou mexendo vom varios form que geralmentepreciso navegar entre eles gostaria de saberia de não perder as informações qdo estiver navegando entre os form.Tem como fazer isso?Tipo digitar em pagina 1 e pagina 2 sem perder o que foi digitado.Agradeço desde já...Obrigado.Rodrigo

[Amaciel 0]

Fabyo, eu dei uma lida no seu script, muito bom....

eu vi num outro post que havia uma dúvida sobre como usar as abas com links, e agora, visitando o post do script, vi que tem mais uma pessoa.

Se me permite, fiz uma alteração no script.

O que eu alterei foi pra pegar o valor do parâmetro p do href do link, que era a dúvida em outro post.

 

Assim, o script pode ser adaptado para, caso o usuário tenha js habilitado, a troca de páginas seja feita por ajax, caso contrário, ele é direcionado para a página que é apontada pelo link, já que o js não vai cancelar a ação do clik.

 

eu tbm adicionei a função cancelClick(), cuja autoria desconheço, mas assim que descobrir, se descobrir, eu envio. É ela que impede que o user seja direcionado para o link antes de conseguirmos terminar nossa ação.

 

segue o código:

 

function iniciar() {	

 

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

 

for (var i = 0; i < allItems.length; i++) {

allItems[i].getElementsByTagName("a")[0].onclick = function(clickEvent) {

 

cancelClick(clickEvent);//evitamos que vá para a página apontada no href

 

....

Bah pessoal, nao consegui fazer funcionar assim, nao rola aqui pra mim. Tem algum mistério ai?

[Fabyo 66]

Recomendo usar EXTjs é muito melhor e mais facil de usar

 

veja exemplo:

 

http://extjs.com/deploy/ext-1.1/examples/tabs/tabs.html

 

http://extjs.com/deploy/ext-1.1/docs/

[Jean Martins 0]

Olá!

 

 

Sou novo por aqui e quando vi esse topico me interessei muito, mas estou com uma dificuldade de entender onde insere as informações. Ex: eu clico num determinado link e vejo as informações na pagina.

Alguem poderia me explicar?

[alvorac 0]

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 =

aba2 =

aba3 =

 

anexos:

aba.zip

aba2.zip

aba3.zip

 

não consigo baixar os fontes, alguem que os tenha poderia me enviar por mail??? alvorac@gmail.com.

 

grato

[Flavio Vasconcelos 0]

Olá pessoal, estou com um probleminha aqui... Estou com um formulário de cadastro que é bem extenso e quero dividir nas abas... como faço para cadastrar tudo de uma vez, visto que quando vou passando de aba o conteúdo digitado é perdido??? Desde já agradeço!

[tety 0]

Olá pessoal, não sei se posso postar aqui dado que o tópico é antigo, desculpem se não puder...

Fabyo, qria saber como faço um formulario de contato dentro de uma das abas, tentei várias coisas e não consegui enviar o email, será que pode me ajudar? Obrigada