Links dynamisch laden und animieren

Im 2. Teil werden wir nun die Links der oberen Navigation dynamisch per Ajax laden. Dabei wollen wir soweit wie möglich unobtrusive vorgehen. So wird in diesem Beispiel darauf geachtet, dass es auch weiterhin möglich ist die Seiten einzeln per Bookmark/Lesezeichen anzusprechen (mit individuellem Title), die Funktion der Vor-/Zurück-Buttons des Browser funktioniert weiterhin.

Als erstes musste ich mich also umschauen wie ich die History-Funktion umsetzen konnte. Ich fand dafür nur das History/Remote - jQuery plugin als geeignete Grundlage und habe mir die 2 Funktionen ajaxHistory und remote daraus kopiert und diese dann für Version 1.2.6 von jQuery angepasst.

Anschließend ging ich daran es an meine Bedürfnisse anzupassen: 

// Ajax starten
  $.ajaxHistory.initialize();
  $("#nav a").remote('#content', '.entry', function() {
    $(this).parent().parent().children().removeClass("current_page_item");
    $(this).parent().addClass("current_page_item");
    code_viewer();
  });
// aus ajaxHistory
  if (location.hash && typeof _addHistory == 'undefined') {
    $('a[href$="' + location.hash + '"]').trigger('click');
  }
// Ende Ajax starten

Hier wird nun die Funktion initialisiert es folgt die remote-Funktion. Letzteres habe ich erweitert um den 2. Parameter (.entry), er gibt an welchen Teil der zu ladenden Seite wir anzeigen wollen, erster Parameter gibt an wo. Sprich alle Elemente mit Klasse entry bitte in den DIV mit ID content laden. Folgende 2 Zeilen versehen die aufgerufenen Links mit der für dei Kennzeichnung des aktiven Links vorgesehenen Klasse.
code_viewer() bindet meine hier verwendete Funktion um ganze JS-Dateien mit klick anzuzeigen. Ist also für euch irrelevant.

Dann wird noch ein Teil aus ajaxHistory aufgerufen welches im Original bei mir nicht funktionierte. Wahrscheinlich wurde es zu früh ausgeführt. Es ist dafür zuständig Direktaufrufe (Lesezeichen = http://url/#remote-1) zu erkennen und die erforderliche Seite zu laden.

Nun zur Animation: 

// olaf content dazu
$.fn.remote = function(output, content, settings, callback) {

// schnipp

  // olaf ab hier von mir angepasst
  $.get(href, function(data){
    var div = $(data).find(content);
    target.fadeOut("slow",function(){
    if ($.browser.msie){
      this.style.removeAttribute('filter');
    };
    target.html(div).slideDown(1500);
    target['locked'] = null;
    callback.apply(a);
    document.title = $.trim(data.replace( /([\s\S]+)<title>/, '' ).replace(/<\/title>([\s\S]+)/, '' ));
  });
  // olaf bis hier

Dies ist der wichtige Teil aus $.fn.remote das GET hab ich hier mit meinen Anpassungen versehen und die neue Variable im Aufruf eingeführt. Die per Ajax übergebenen Daten werden nach dem anzuzeigendem Content durchsucht $(data).find(content) dieser DIV wird ausgeblendet und mit dem neuem Inhalt wieder eingeblendet. Der IE7/8 braucht noch die Entfernung des Filters um die Schrift wieder mit dem neuem cleartype anzuzeigen. Zu guter Letzt extrahieren wir noch den Title aus aufgerufenem Dokument und setzen diesen.

Das ganze Script anschauen

Am Ende befindet sich noch eine auskommentierte Version, diese bietet das Gleiche nur ohne Vor/Zurück, ich rate davon ab solche immer wieder im Web anzutreffende Dinger zu verwenden.

Beachten!!!

Per Ajax geladener Content wird immer als utf-8 behandelt, also müssen Umlaute und Sonderzeichen auch codiert werden, üöäß würden sonst als Fragezeichen oder Karo dargestellt. Statt ü also &uuml; oder ü oder &#252; schreiben.
Weiter ist zu beachten, dass somit keine Sprunganker in Lesezeichen mehr möglich sind. Innerhalb der Seiten schon, klick. Man könnte sie sich selber zusammenbasteln, URL ermitteln (HTML-Code) + #Anker.

Kommentare, Fragen, Anregungen bitte im Blogbeitrag oder per Mail