Unconfigured Ad Widget

Collapse

Anúncio

Collapse
No announcement yet.

Alterar history com Jquery

Collapse
X
 
  • Filter
  • Tempo
  • Show
Clear All
new posts

  • Font Size
    #1

    Duvida Alterar history com Jquery

    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: Apenas usuários registrados e ativados podem ver os links., Clique aqui para se cadastrar....

    Segue o código da index.php:

    Código HTML:
    <!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: Apenas usuários registrados e ativados podem ver os links., Clique aqui para se cadastrar...

    Obrigado!
    vgruk.com
    Similar Threads
X
Working...
X