Ir para conteúdo

POWERED BY:

Arquivado

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

jgainfo

Alterar history com Jquery

Por , em Javascript

Recommended Posts

jgainfo    0

jgainfo
Postado

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!

Compartilhar este post

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

Informação importante

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

  Aceito