Ich habe eine Website für eine Musik-Website gestaltet, wo man direkt Musik hören konnte.
Das Problem:
Mann konnte nicht Msuikhören, und gleichzeitig die website durchstöbern, da ja der Player bei jedem Seitenaufruf neu geladen werden musste.
Frames zu werwenden, war für uns keine Alternative, da die Website den modernen Ansprüchen den Web2.0 entsprechen sollte.
Lösung:
Wir haben den Player in die eine art Taskleiste gelegt, und die Website nicht durch Links, sondern Anker navigiert.
Bei jedem klick auf einen Anker, wurde die aufgerufene seite per JavaScipt nach ihrem Content durchsucht, und nur dieser wurde daraufhin ersetzt.
Hinweis: Der Code ist auf dem JavaScipt Framework jQuery aufgebaut.
Vor und Nachteile:
+ Kein lästiger Seitenaufbau
+ schöne Animationen möglich
+ Seiten lassen sich einzeln verlinken
+ Kann in jede bestehende Website integriert werden
+ Die Website funktioniert auch bei Deaktivertem JavaScipt
- Mir sind bislang noch keine aufgefallen.
Code: Alles auswählen
// Navigation
// Neue Seite laden
function load_page(page){
$('#content').addClass('loading');
$.ajax({
url: page,
dataType: "html",
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert('Die angeforderte Seite konnte nicht gefunden werden.' + page);
$('#content').removeClass('loading');
},
success: function(data, textStatus, XMLHttpRequest) {
$('#content').html($('#content', data).html());
$('#content').addClass('loading');
check_links();
}
});
}
// Interne Links durch Anker ersetzten und click event hinzufuegen
function check_links(){
$('a:not([href^=http])').each(function() {
// Pruefen, ob es bereits ein Anker ist
if($(this).attr('href').search('#!/') == -1){
var ziel = $(this).attr('href');
$(this).attr('href', '#!/' + ziel);
}
});
}
$('a:not([href^=http])').live('click', function() {
var page = $(this).attr('href').split('#!/');
load_page(page[1]);
});
$(document).ready(function(){
check_links();
});
// Seite des ersten Aufrufes erkennen und Laden
$(document).ready(function(){
var page = document.location.href.split('#!/');
if(page[1] && page[1] != ''){
load_page(page[1]);
}
});
