Est-ce une bonne façon d'utiliser History.js?

J'ai été en mesure de mettre sur pied une procédure simplifiée complète History.js exemple à l'aide de trois liens pour charger les fragments de contenu d'une page complète sans la mise à jour de la page et la mise à jour de l'historique du navigateur.

Voici la corporation des extraits de code - un exemple de travail est ici http://jsfiddle.net/PT7qx/show

<a href="/page-header">Page Header</a>
<a href="/login-form">Login Form</a>
<a href="/nothing">Nothing</a>

<script>
var History = window.History;
if (!History.enabled) {
    return false;
}

History.Adapter.bind(window, 'statechange', function() {
    var State = History.getState();
    History.log(State.data, State.title, State.url);

    if (State.title == 'Page Header') {
        $('#content').load('/user/login/.pageHeader > *');
    }

    if (State.title == 'Login Form') {
        $('#content').load('/user/login/#common-form > *');
    }

    if (State.title == 'Nothing') {
        $('#content').empty()
    }
});

$('body').on('click', 'a', function(e) {

    var urlPath = $(this).attr('href');
    var Title = $(this).text();
    History.pushState(null, Title, urlPath);

    //prevents default click action of <a ...>
    return false;
});
<\script>

Je voudrais savoir si c'est la bonne utilisation. La version précédente avait une capacité à se lier à un événement à l'aide de la # url. Je n'en ai pas vu des exemples pour les événements de liaison vers les url avec cette dernière version, j'ai donc utilisé l' .() cliquez sur l'événement à l'Historique des appels et triées ce lien a été cliqué.

Je ne suis pas sûr si c'est la meilleure façon d'accomplir ce pour cet exemple.

source d'informationauteur dansalmo

  1. 22

    Après avoir travaillé sur cela un peu plus, je suis venu avec un simple, mais l'exemple complet pour apprendre à utiliser la dernière History.js. Voici travail jsfiddle exemple qui ne Ajax charges de Des fragments de HTML hébergé sur Github

    <!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Simple History.js Ajax example by dansalmo</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="http://balupton.github.com/history.js/scripts/bundled/html4+html5/jquery.history.js"></script>
<style type='text/css'>
.hidden {
display: none;
visibility: hidden;
}
</style>
</head>
<body>
<a href="/home">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
<a href="/other">Other</a>
<p>The whole page will not re-load when the content below is updated, yet the URL is clean and the back button works!<p><br />
<div id="content">
<div id="home">Home Page content</div>
</div>
<br />
<p>The content div will be updated with a selected div fragment from an HTML file hosted on github, however the broswer will see each content update request as a part of the page history so that the back button can be used.</p>
<br  />
<p>Adding more menu items is as simple as adding the new links and their corresponding html fragments.<p>
<div id="hidden_content" class="hidden"></div>
</body>
<script type='text/javascript'>//<![CDATA[ 
$(function(){
var History = window.History;
if (History.enabled) {
State = History.getState();
//set initial state to first page that was loaded
History.pushState({urlPath: window.location.pathname}, $("title").text(), State.urlPath);
} else {
return false;
}
var loadAjaxContent = function(target, urlBase, selector) {
$(target).load(urlBase + ' ' + selector);
};
var updateContent = function(State) {
var selector = '#' + State.data.urlPath.substring(1);
if ($(selector).length) { //content is already in #hidden_content
$('#content').children().appendTo('#hidden_content');
$(selector).appendTo('#content');
} else { 
$('#content').children().clone().appendTo('#hidden_content');
loadAjaxContent('#content', State.url, selector);
}
};
//Content update and back/forward button handler
History.Adapter.bind(window, 'statechange', function() {
updateContent(History.getState());
});
//navigation link handler
$('body').on('click', 'a', function(e) {
var urlPath = $(this).attr('href');
var title = $(this).text();
History.pushState({urlPath: urlPath}, title, urlPath);
return false; //prevents default click action of <a ...>
});
});//]]>  
</script>
</html>