Comment changer ce JavaScript?

Question

Je veux changer la façon dont le contenu est affiché sur mon site:

var FNav = { 
init: function() { 
    $("a[href*=#]").click(function(e) { 
    e.preventDefault(); 
     if($(this).attr("href").split("#")[1]) { 
      FluidNav.goTo($(this).attr("href").split("#")[1]); 
     } 
    }); 
    this.goTo("home"); 
}, 
goTo: function(page) { 
    var next_page = $("#"+page); 
    var nav_item = $('nav ul li a[href=#'+page+']'); 
    $(".page").fadeOut(500); 
    next_page.fadeIn(500); 

Comment je puis-je modifier cette JavaScript, peut avoir une fonctionnalité de bouton retour appropriée?

Ce que j'ai essayé (échoué). Ce sont les solutions que j'ai essayées mais sans changer le javascript ci-dessus. C'est pourquoi je pense qu'aucun d'entre eux ne semble fonctionner.

• En utilisant la méthode History.js décrit ici: https://github.com/browserstate/history.js/ je remplir toutes les étapes et entre dans les scripts pour l'en-tête, mais seulement l'URL dans la barre d'URL change lorsque je clique sur un lien. Lorsque je clique sur le bouton Précédent, l'URl change en conséquence, mais le contenu ne se charge pas. Lorsque j'entre une URL dans la barre d'URL, je suis envoyé à la page d'accueil.

• Ajaxify et méthode Gist décrit ici: https://github.com/browserstate/ajaxify obtient le comme ci-dessus, les mêmes questions et

• méthode Davis.js décrit ici: https://github.com/olivernn/davis.js ne sert à rien à la fin des instructions d'installation. Pas de changement.

• méthode jQuery BBQ Plugin décrit ici: http://benalman.com/projects/jquery-bbq-plugin/ ne sert à rien, pas de changement lors du chargement du fichier .js dans l'en-tête du site.

• J'ai lu cet article et compris: http://diveintohtml5.info/history.html

Answer 1

Le bouton de retour ne fonctionne pas comme par magie. Vous devez coder et écouter le changement d'événement!

En history.js, it shows you right on the front page:

// Bind to StateChange Event 
History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate 
    var State = History.getState(); // Note: We are using History.getState() instead of event.state 
    History.log(State.data, State.title, State.url); 
}); 

Answer 2

Je ne sais pas pourquoi vous ne pourriez pas obtenir Davis.js travailler pour vous? Peut-être ouvrir un problème sur la page GitHub.

Si vous voulez utiliser le routage à base de hachage avec davis vous devez inclure les hash routing extension. Vous avez juste besoin de l'inclure dans votre page après davis.

La configuration suivante devrait vous permettre de gérer les routes

Davis.extend(Davis.hash) 

Davis(function() { 
    this.get('/:page', function (req) { 
     FluidNav.goTo(req.params.page); 
    }) 
}) 

Supposons que vous avez des liens dans votre page avec les éléments suivants

<a href="#/page_1">Page1</a> 
<a href="#/page_2">Page2</a> 

Davis prendra soin de gérer le bouton de retour pour vous, de sorte que si vous cliquez sur le lien pour Page1 puis Page2, en cliquant sur le bouton retour naviguera à Page1 à nouveau.

Si vous avez des problèmes, veuillez ouvrir un problème sur la page GitHub détaillant ce que vous avez et ce qui ne fonctionne pas et je peux y jeter un coup d'œil.