Modo listagem | Modo Linear

jgainfo · 13-02-2015, 23:17

Oi, tudo bem! Bom, Eu consegui fazer um exemplo bem próximo ao que quero, depois de muito procurar e fazer testes.

Funciona da seguinte forma: Clico no link e logo em seguida carrega a página utilizando o método/função "onload", depois aplica um efeito e altera a url da página em questão. Link do exemplo: http://decizie.esy.e.../jquery-onload/.

Segue o código: da index.php

<!doctype html>
<head>

<title>Exemplo de Jquery Onload</title>

<style type="text/css">
#menu { margin: 10px auto; width: 300px; }
#menu ul { list-style: none; }
#menu ul li { margin: 0 auto; display: inline-block; }
#menu ul li a { padding-right: 39px; text-decoration: none; }
#conteudocentral { margin: 0 auto; width: 300px; height: 200px; background: #ccc; border-radius: 10px; }
#conteudocentral h1 { margin-top: 30px; width: 300px; height: auto; text-align: center; float: left; }
#conteudocentral p { text-align: center; }
</style>

<script type='text/javascript' src='jquery-1.9.0.min.js'></script>

<script type="text/javascript">
$(document).ready(function(){
$("#menu a").on('click', function(e) {
e.preventDefault();
var href = $(this).attr('href');
$("#conteudocentral").hide("slow").load( href +" #conteudocentral").show('slow');
// HISTORY.PUSHSTATE
history.pushState('', 'New URL: '+href, href);
e.preventDefault();
});
});
</script>

</head>

<body>
<nav id="menu">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="sobre.php">Sobre</a></li>
<li><a href="contatos.php">Contatos</a></li>
</ul>
</nav>
<div id="conteudocentral">
<h1>Home</h1>
<p>Esta é a página Inicial!</p>
</div>
</body>
</html>

Porém falta algumas coisas.

1. Gostaria de quando alterar o histórico do navegador e a página alterasse também. Vi algo com o método/função "onpopState", "replaceState", algo com o "history", ou até com o plugin "history.js", mas ainda estou tentando implementar.

2. Sobre o efeito igual o do Site "skitter-slider.net", eu não sei se poderá ser feito, ou seja, o efeito de apresentar a página de acordo com a sequência que quando clica no menu na ordem da esquerda para a direita, a página é carregada da direita para a esquerda e se você voltar ou seja clica da vindo da direita para a esquerda a página é carregada da esquerda para a direita.
Se alguém souber como eu procedo para colocar um efeito da página/conteúdo vindo da direita para a esquerda, seria legal!

3. O conteúdo das outras páginas, no caso do exemplo, a "sobre.php" e "contato.php" eu tenho que colocar de novo a "div" com o "id - conteudocentral" pra poder pegar corretamente, e nos exemplos que vi na net precisaria colocar a div com o id no caso do exemplo "conteudocentral" apenas uma vez na "index.php".

Muito obrigado pela ajuda de todos que compartilharam o conhecimento e me ajudaram e espero contar ainda!

Foi desse site que consegui retirar a função de alterar a url e ele também tem a de history, porém não entendi direito como posso implementa-la no meu código!

Site: http://html5.gingerhost.com

Obrigado!