Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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();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);
} 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); 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:
anexos:
Show de bola!!!
Parabéns, Fabão! :)/>
muito obrigado fabyo http://forum.imasters.com.br/public/style_emoticons/default/clap.gif/>
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?
no meu exemplo esta pegando o nome do script .php, mas você pode mudar na pagina receber.php se quiser, e o link fica o nome "contato"
Parabens Fabyo!So uma duvida, vi que tem uma pagina1.php, quando eu crio a pagina2.php com<?phpecho "PAGINA2";?>Ele me retorna HOME.
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/>
>
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
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
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?
>
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!
é 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);>
é 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!
é 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");>
é 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!
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ó.
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
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
só fazer o resto do seu script funcionar com ajax
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.
There was a problem with the request
esse problema escrito acima so aparece quando eu dexo na minha maquina , quando eu coloco na pasta do meu servidor ai funfa legal , pq ?
uma duvida , como eu faria que abra uma pagina chamada teste e que fique assim :
<li><span class="normal">Meu Carrinho</span></li>
Olá, estou começando a me "interar" no ajax e por isso estou buscando umas fontes, tutoriais, etc.
Só uma coisa que eu fui acessar, mas não deu certo, foi neste post: http://forum.imasters.com.br/index.php?showtopic=148569
o link para demonstração funcionou, mas para baixar o sisteminha deu erro, então queria apenas saber que trecho no javascript foi feito para ao alternar entre as abas, apareça a mensagem "carregando".
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif/>
simplismente show.
Oi Fabyo, muito boa suas "abas".A minha pergunta seria:---Não tem como deixar o nome da ABA diferente da página que quero abrir????EXEMPLO:nome na aba: Matériasnome da página a abrir: ultimas_materias.phpTem como??Abraços
sim, de varios modos um exemplo é usar href, se viu que eu nao usei
outro jeito é na pagina receber.php você usar um switch e incluir as paginas
Ai como seria com HREF?
flw
PS.: a minha pergunta é a mesma que o newboxters .. hehehe
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