Aide pour le plugin d'adresse jQuery

Question

J'ai un site web avec un contenu ajax chargé. Maintenant, je veux mettre en œuvre le jQuery address plugin pour une meilleure expérience utilisateur et l'exploration SEO.

Avec cette ligne $.address.value($(this).attr('href')); le changement d'adresse fonctionne, mais comment puis-je prendre en charge l'historique, l'exploration et ainsi de suite?

Il y a quelque chose avec le $.address.change(function(event){...}); que je dois faire, mais quoi? J'ai essayé de mettre le $("#content").load(toLoad,'',showNewContent) dedans, et d'autres mille choses, malheureusement sans résultat.

La documentation est très pauvre: http://www.asual.com/jquery/address/docs/

Voici mon code:

$('a:not([href^=http])').click(function() { 

    var toLoad = $(this).attr('href') + " #ajaxedContent"; 

    $("#content").fadeOut(600,loadContent); 

    $("#load").remove(); 
    $('#logo').append('<div id="load"></div>'); 
    $("#load").fadeIn(100); 

    $.address.value($(this).attr('href')); 

    function loadContent() { 
     $("#content").load(toLoad,'',showNewContent) 
    } 

    function showNewContent() { 
     // Capture the final dimensions of the content element and animate, finally fade content in 
     $("#limit").animate({height: $("#content").height()},600,'easeInOutQuad',function() { 
      $("#content").fadeIn(600,hideLoader); 
      callback(); 
     }); 
    } 

    function hideLoader() { 
     $("#load").fadeOut(300); 
    } 

    return false; 
}); 

La mise en œuvre de base ressemble à ceci:

$.address.change(function(event) { 
    // do something depending on the event.value property, e.g. 
    // $('#content').load(event.value + '.xml'); 
}); 

$('a').click(function() { 
    $.address.value($(this).attr('href')); 
}); 

Toute aide serait très appréciée. Je vous remercie.

Answer 1

De cette façon, cela fonctionne:

$.address.init(function(event) { 

    $('a:not([href^=http])').address(); 

}).change(function(event) { 

    var toLoad = event.path + " #ajaxedContent"; 

    $("#content").fadeOut(600,loadContent); 

    $("#load").remove(); 
    $('#logo').append('<div id="load"></div>'); 
    $("#load").fadeIn(100); 

    function loadContent() { 
     $("#content").load(toLoad,'',showNewContent) 
    } 

    function showNewContent() { 
     // Capture the final dimensions of the content element and animate, finally fade content in 
     $("#limit").animate({height: $("#content").height()},600,'easeInOutQuad',function() { 
      $("#content").fadeIn(600,hideLoader); 
      callback(); 
     }); 
    } 

    function hideLoader() { 
     $("#load").fadeOut(300); 
    } 

    return false; 
});