1. Zuhause
  2. Frage und Antwort
  3. Wie führe ich geniale refreshless Seite Änderungen wie GitHub tun?

Wie führe ich geniale refreshless Seite Änderungen wie GitHub tun?

2011-01-12 3 views
24

GitHub scheint etwas unglaublich zu tun: animierte Seite ändert sich ohne den Zustand zu brechen. Die Adressleiste ändert sich, aber die Seite wird nicht aktualisiert und ich werde zur nächsten Ansicht animiert.Wie führe ich geniale refreshless Seite Änderungen wie GitHub tun?

Zum Beispiel schlagen diese URL: as3logback/ schlagen dann diese URL: as3logback/lib

Wie zum Teufel sind sie es tun!?! Das ist so cool! Verwenden sie irgendeine Art von Frame oder etwas serverseitig?

Quelle

2011-01-12 Naftuli Kay

+0

@Damien, welche Browser/Plattform verwenden Sie? Die Animation funktioniert für mich auf Chrome 8.x/Ubuntu 10.10. –

+0

Ich sehe es nicht auf Firefox 3.6.13. Welchen Browser benutzen Sie? – Anirvan

+0

@David Thomas, Sorry, ich habe meinen Kommentar nach dem Lesen von coreywards Link zurückgezogen ... FF4 hat die Fähigkeit, nicht die 3.6, die ich benutze: P –

Antwort

25

Sie haben einen ausführlichen Blog-Eintrag auf, wie es funktioniert (HTML5 History API) hier: https://github.com/blog/760-the-tree-slider

Quelle

2011-01-12 00:20:42 coreyward

+2

Es ist so brillant. Mit der Zeit integrierten sie das in Browser, wir mussten immer Anker-Magie verwenden, um Seitenänderungen vorher zu simulieren, aber nicht länger! Web-Bürger freuen sich! –

+7

Ich hatte fast einen doppelten Regenbogenmoment, als ich das sah. –

9

Sie verwenden höchstwahrscheinlich Ajax und HTML5 history.pushSate.

Beachten Sie, dass dies nur in den neuesten Browsern wie Firefox 4 und Chrome 8 (IE 9?) Funktioniert. Sie benötigen also immer noch eine Fallback-Lösung wie die Verwendung der Fragment-ID, wie es viele Ajax-getriebene Websites jetzt tun (ein gutes Beispiel, um den Unterschied zu sehen, ist Facebook).

Quelle

2011-01-12 00:20:31

13

http://www.asual.com/jquery/address/ ist eine jQuery-Plugin, das zusätzlich zu der traditionellen Hash-Tag-Methode HTML 5 History API unterstützt. Dies ist nützlich, um die Übergänge in älteren Browsern (über Hash-Tags) zu unterstützen, während die HTML 5-Methode verwendet wird, wenn sie verfügbar ist.

Quelle

2011-01-12 01:17:14 jvatic

+0

Perfekt. Das wäre wahrscheinlich meine nächste Frage gewesen. –

Verwandte Themen

 Verwandte Themen