Böngészés közben a Facebook oldalakon a fejléc és a lábléc fix rész marad látható oldalbetöltések között és az URL a címsorba megfelelően változik. Legalábbis ez az illúzió kapok.
Hogyan Facebook elérni, hogy technikailag?
Hogyan Facebook tartani a fejléc és a lábléc fix betöltése közben egy másik oldalon?
szavazat
15
5 válasz
szavazat 3
3
Az egyik módja annak, hogy a fejlécek és a lábjegyzetek jelennek invariáns keresztül CSS - itt egy példa egy fix footer (megjegyzem, a „position: 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;
}
Azt akarja, hogy megbizonyosodjon arról, hogy adjunk néhány margin-bottom, hogy az oldal divs (amelyek töltse ki a fő része az oldalon), hogy teret fix footer (ugyanaz a fejlécben margin-top).
Ez nem a ténylegesen felfüggeszti az oldalon, de mivel a helymeghatározás olyan szoros és állandó, úgy fog tűnni, ha nem, hacsak az oldal betöltése túl sokáig tart. Azt nem tudom, hogy ez az, amit csinál, de ez FaceBook kapsz sokkal ugyanazt a hatást.
szavazat 0
0
Nos, a módja annak, hogy egy ilyen dolog lenne keresztül AJAX, de amennyire én látom, facebook valójában nem ezt ... én csak ellenőrizni, és frissíti a fejléc, mint a legtöbb helyen ...
Edit: Amikor először válaszolt erre, néztem a Facebook a Google Chrome (2,0), amely bármilyen okból, valójában nem ezt így -> amikor rákattintok Saját profil a honlapra, ez ad nekem ezt a címsorba: http://www.facebook.com/profile.php?id=1304250071&ref=profile
és így frissíti az egész oldalt ... Fura
szavazat 38
38
Lásd Mark Brittingham a válasz, hogy a stílus, bár nem hiszem, hogy az, amit kérnek itt. Adok a technikai részleteket, hogyan működik (és ezért meglehetősen zseniális).
Vessen egy pillantást az állapotsorban, ha az egérmutatót a Profil linket a fejlécben, ...
http://www.facebook.com/profile.php?id=514287820&ref=profile
Vagyis ahol Ra címke mutatott. Most nézd meg a címsorba ha rákattint ...
http://www.facebook.com/home.php#/profile.php?id=514287820&ref=profile
Figyeljük meg a „#” részazonosítóból / hash ? Ez alapvetően azt bizonyítja, hogy nem hagyta el az oldalt, és a korábbi kérelmet AJAX. Ezek lehallgatja a kattintás esemény ezeket a kapcsolatokat, és felülírva az alapértelmezett alkalmassága valami saját.
Ahhoz, hogy ez megtörténjen a Javascript, mindössze annyit kell tennie, hogy rendeljen egy kattintás eseménykezelő ezeket a kapcsolatokat, mint oly ...
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;
}
}
Egy mesés hasznot ezt a megközelítést, hogy lehetővé teszi a vissza gombot, hogy működőképes (egy kis hozzáadott trükk), amely hagyományosan a fájdalmas mellékhatása krónikus AJAX használatát. Nem vagyok 100% -ig biztos, hogy mi ez a trükk az, de lefogadom, hogy valahogy képes felismerni, ha a böngésző módosítja a részazonosítóból (esetleg ellenőrzi, hogy minden ~ 500 milliszekundum).
Mellékesen megjegyezzük, megváltoztatva a hash-értékét, amely nem található a DOM (via elemazonosítóval) jelennek meg az oldalon egészen a csúcsig. Hogy mit beszélek: görget lefelé mintegy 10 pixel a tetején Facebook, felfedve a fele a felső menüben. Kattints az egyik elem, akkor ugrik vissza egészen a lap tetején, amint a részazonosítóból frissül (anélkül, hogy bármilyen ablak átfestés / átrajzolja késleltetés).
szavazat 0
0
A CSS abszolút / fix elhelyezése, a div tag tartalmazó fejléc és lábléc bárhol lehet a HTML. Mint a csúcson!
A legtöbb jelenlegi böngészők van egy render késedelem egynegyedét második a Firefox úgy vélem, hogy a oldalon nem jeleníti részben megjelenítési tartalmát gyorsan villog, és a hulladék egy csomó időt rajz hálózati adatok jön.
Tehát mi is történhet, hogy az új oldal gyorsan visszatér HTML stílusokat tartalmazó és a fejléc és a lábléc. Ez a tartalom lehet tenni azonnal a böngészőben, így amikor megjelenik a következő oldal, úgy tűnik, mintha ezek nem változott.
Ha az oldal dinamikus tartalmat generál, egy jó trükk, hogy az összes statikus információk a tetején, kimenetet és öblítse adatpufferének. Ezután hajtsa végre a dinamikus adatbázis-lekérdezések és az ilyen.
szavazat 0
0
Kiegészítésére Josh Stodola a válasz: Az én értelmezésemben a YUI Könyvjelzőkezelő pontosan ezt a munkát.