La navigarea prin pagini Facebook secțiunea de subsol fixă antet și să rămână vizibile între loturile de pagină și de adresa URL din bara de adrese modificările în consecință. Cel puțin, asta e iluzia I a lua.
Cum se atinge Facebook ca punct de vedere tehnic vorbind?
O modalitate de a oferi antete și note de subsol care apar invariante este prin intermediul CSS - aici este un exemplu de un subsol fix (observați „poziția: fix;“):
#Footer {
font-size:xx-small;
text-align:left;
width:100%;
bottom:0px;
position:fixed;
left:0px;
background-color: #CCCCCC;
border-top: 1px solid #999999;
padding:4px;
padding-right:20px;
color:#666666;
}
Veți dori să vă asigurați că adăugați niște margin-bottom la divuri pagina dvs. (cele care umple porțiunea principală a paginii) pentru a lăsa loc pentru subsol fix (aceeași cu un antet folosind margin-Top).
Acest lucru nu nu sta de fapt pe pagină , dar, pentru că poziționarea este atât de strâns și invariante, va apărea ca în cazul în care o face , cu excepția cazului încarcă pagina dvs. durează prea mult timp. Nu știu dacă acest lucru este ceea ce face FaceBook , dar vă va da mult același efect.
Ei bine, modul de a realiza un astfel de lucru ar fi prin intermediul AJAX, dar în măsura în care pot vedea, facebook, de fapt, nu face acest lucru ... Eu doar verificat, și reîmprospătează antetul ca majoritatea site-urilor ...
Editare: Când am răspuns în primul rând acest lucru, am fost uita la Facebook cu Google Chrome (2.0), care indiferent de motiv, nu de fapt face în acest fel -> când fac clic pe Profilul meu din pagina de pornire, ea îmi dă această în bara de adrese: http://www.facebook.com/profile.php?id=1304250071&ref=profile
și, prin urmare, reîmprospătează întreaga pagină ... Ciudat
Consultați răspunsul Mark Brittingham pentru modul în care să-l stil, deși nu cred că este ceea ce se cere aici. Eu vă voi da detaliile tehnice cu privire la modul în care funcționează (și de ce este destul de genial).
Uitați-vă la bara de stare atunci când treceți peste link-ul de profil în antetul ...
http://www.facebook.com/profile.php?id=514287820&ref=profile
Aceasta este în cazul în care tag-ul <a> este indicat. Acum, uita-te la bara de adrese atunci când faceți clic pe el ...
http://www.facebook.com/home.php#/profile.php?id=514287820&ref=profile
Observați "#" identificator de fragment / hash ? Acest lucru se dovedește practic că nu au părăsit pagina și cererea anterioară a fost făcută cu Ajax. Ele sunt intercepteze evenimentele clic pe aceste link - uri, și imperative funcționalitatea implicită cu ceva din propria lor.
Pentru a face acest lucru cu Javascript, tot ce trebuie să faceți este să atribuiți un handler eveniment clic pentru aceste link-uri, cum ar fi atât de ...
var header = document.getElementById('header');
var headerLinks = header.getElementsByTagName('a');
for(var i = 0, l = headerLinks.length; i < l; i++) {
headerLinks[i].onclick = function() {
var href = this.href;
//Load the AJAX page (this is a whole other topic)
loadPage(href);
//Update the address bar to make it look like you were redirected
location.hash = '#' + href;
//Unfocus the link to make it look like you were redirected
this.blur();
//Prevent the natural HTTP redirect
return false;
}
}
Un beneficiu fabulos acestei abordări este că permite butonul din spate să fie funcțional (cu o șmecherie pic adăugată), care a fost în mod tradițional un efect secundar dureros de utilizare AJAX cronice. Nu sunt 100% sigur de ceea ce această șmecherie este, dar pun pariu că e cumva capabil să detecteze când browser-ul modifică identificatorul fragmentului (eventual verificând-o dată la ~ 500 milisecunde).
Ca o notă, schimbarea hash la o valoare care nu poate fi găsită în DOM (prin elementul ID) va derula pagina tot drumul spre partea de sus. Pentru a vedea ce vorbesc despre: derulezi aproximativ 10 pixeli din partea de sus a Facebook, expunând jumătate din meniul de sus. Dați clic pe unul dintre elementele, acesta va sări înapoi până la partea de sus a paginii de îndată ce identificatorul fragmentului devine actualizat (fără nici o vopsi fereastră / redesenare de întârziere).
Cu CSS absolută de poziționare / fix, etichetele div care conțin anteturile și subsolurile pot fi oriunde în HTML. La fel ca în partea de sus!
Pe cele mai multe browsere curente există o întârziere de randare, o al doilea trimestru pentru Firefox cred, astfel că pagina nu se va afișa conținut parțial redate în flash-uri rapide și deșeuri o mulțime de timp de desen ca date de rețea vine.
Deci, ce se poate întâmpla este că noua pagină returnează rapid HTML care conține stiluri și antet și subsol. Acest conținut poate fi redat imediat de către browser, astfel încât atunci când acesta afișează pagina următoare, se pare ca și în cazul în care acestea nu au schimbat.
Dacă pagina generează conținut dinamic, un truc bun este de a pune toate informațiile statice în partea de sus, de ieșire, care și se spală tamponul de date. Apoi, face interogări de baze de date și astfel dinamica.
Pentru a spori Josh Stodola lui Răspuns: În înțelegerea mea Managerul YUI Bookmark face exact acest job.