So erstellen Sie den Breadcrumb und den Effekt "Verschieben" ähnlich wie Github

Question

Wenn Sie auf einen Breadcrumb-Link in GitHub klicken, wird der Verzeichnisansichtsbereich in das Unterverzeichnis verschoben. Was ist der beste Weg, um diesen Effekt zu erzielen? Ich benutze asp.net mvc, jquery, jquery ui und ein jquery Layout-Plugin (http://layout.jquery-dev.net/ui layout) Shoud ich das Layout-Plugin aufgeben?

Answer 1

Nun, Sie können mit der unique url pattern beginnen. Um diesen Sound ein wenig vertraut zu machen, lassen Sie sich zum Beispiel twitter nehmen:

#searching "stackoverflow" 
https://twitter.com/#!/search/stackoverflow 

der Hash-Teil ist die einer nach dem (einschließlich) „#“. mit window.location.hash bekommt es für uns. dann string.replace()#!/ entfernen verwenden und am Ende mit:

search/stackoverflow 

dann, wenn wir diesen Wert als Variable speichern und tun string.split('/'), die den Wert pro / aufgeteilt ist, sind wir mit diesem Retour:

array = ['search','stackoverflow']; 

Jetzt sieht es eher wie eine Brotkrume, die wir verwenden können, um zu bauen. Wenn Sie in Twitter wären, wäre es eher wie folgt:

site/search/stackoverflow 

und für jeden Brotkrümel Link, einfach weiter anhängen. wenn Sie Urls segmentiert haben, ist es ziemlich einfach, die Links zu bauen:

site      = mysite.com 
site/search    = mysite.com/search 
site/search/stackoverflow = mysite.com/search/stackoverflow 

---

für den gleitenden Teil, müssen Sie die „onhashchange“ Ereignis aufzunehmen, die die Änderungen auf den Wert des Hash erkennt. Das Ereignis tritt immer auf, wenn Sie auf einen Link mit der Nummer href="#somevalue" klicken. Beachten Sie, dass der href "#" hat. Sie bemerken auch, dass die Seite nirgendwohin geht (das ist der Punkt, an dem AJAX Magie später zum Einsatz kommt).

für moderne Browser, Sie hashchange mit jQuery oder schlicht JS erkennen kann:

$(window).on('hashchange',function(){ 
    //do whatever you want when the hash changes 
}); 

//or 

window.onhashchange = function(){ 
    //do whatever you want when the hash changes 
} 

für ältere Browser, müssen Sie einen Timer einstellen, der den vorherigen vs aktuellen Wert des window.location.hash

(function timer(prevHash){ 
    var currentHash = window.location.hash; 
    if(prevHash !== currentHash){ 
     //do whatever you want when the hash changes 
    } 
    setTimeout(function(){ 
     timer(currentHash); 
    },1000); 
}(); 

prüft

---

Der gleitende Effekt kann mit jQuery .animate() erreicht werden. Sie können die neue Seite über AJAX laden (abhängig von der Seite, die Sie mit dem analysierten Hash ermittelt haben), die geladene Seite anhängen, den Inhalt verschieben und boomen! du bist fertig. Es ist ziemlich einfach für jeden zu machen, wenn sie die Gänge kennen, die die Uhr drehen lassen.