Facebook sayfalarında gezerken başlık ve sabit altbilgi bölümü sayfa yüklenirken VE buna göre adres çubuğu değişiklikleri URL arasındaki görünür kalır. En azından, ben olsun yanılsama.
Nasıl Facebook konuşan teknik Bunu başarmak geliyor?
farklı bir sayfa yüklenirken Nasıl Facebook sabit üstbilgi ve altbilgi saklar?
oy
15
5 cevaplar
oy 3
3
:;: Burada sabit bir altbilgi örneği ( "sabit pozisyon" fark) 'dir - değişmeyen görünen üstbilgi ve altbilgiler sağlanmasının bir yolu CSS ile olan
#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;
}
Sen (sayfanın ana kısmını dolduracak olanlar) (Margin-Top kullanarak bir başlıkla aynı) sabit altbilgi için odayı terk sayfanızın div öğelerine bazı margin-bottom ekleyin emin olmak isteyeceksiniz.
Bu mu değil konumlandırma kadar sıkı ve değişmez olduğu için aslında sayfası yüklenir çok uzun sürer sürece öyle sanki görünür, sayfada kalın ama. Bu FaceBook yaptığı iştir bilmiyorum ama size hemen aynı etkiyi verecektir.
oy 0
0
Eh, yolu böyle bir şey AJAX yoluyla olacaktır başarmak için, ama bildiğim kadarıyla gördüğünüz gibi, bu yapmaz aslında facebook ... Sadece kontrol ve çoğu siteleri gibi başlığını yeniler ...
Düzenleme: Öncelikle bu cevap, ben herhangi bir nedenle, aslında bu şekilde yapmaz Google Chrome ile Facebook (2.0), baktığım - Ben ana sayfasından Profilim'de tıkladığında>, bu bana verir adres çubuğuna: http://www.facebook.com/profile.php?id=1304250071&ref=profile
ve bu nedenle ... Strange bütün sayfayı yeniler
oy 38
38
Bunu burada soruyorsun ne sanmıyorum, ancak bunu stilini nasıl Mark Brittingham cevabı bakın. Sana çalıştığını (ve oldukça parlak neden) şekli konusunda teknik ayrıntılar verecektir.
başlıkta Profil bağlantısının üzerine geldiğinizde durum çubuğunda bir göz atın ...
http://www.facebook.com/profile.php?id=514287820&ref=profile
O <a> etiketi çevrili olduğu yöne budur. Bunu tıkladığımda adres çubuğuna bakmak ...
http://www.facebook.com/home.php#/profile.php?id=514287820&ref=profile
"#" Uyarı Bölüm betimleyici / karma ? Bu temelde sayfa bırakmadım ve önceki isteği AJAX ile yapıldığını kanıtlıyor. Onlar bu bağlantıları tıklama olaylarını ele geçirmesini ve kendi şeyle varsayılan işlevselliğini geçersiz kılma.
Bu JavaScript ile gerçekleşmesi için yapmanız gereken tek şey şöyle bu bağlantılar için bir tıklama olay işleyicisi atamak olduğunu ...
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;
}
}
Bu yaklaşımın bir muhteşem yararı, geleneksel olarak, kronik AJAX kullanım acı bir yan etkisi olan, (biraz ilave tekniğini) ile geri düğmesine olarak işlevsel olmasına, yani. Bu hile ne olduğuna dair% 100 emin değilim, ama ben (muhtemelen her ~ 500 milisaniye işaretleyerek) tarayıcının betimleyici de değiştirir algılamak için bir türlü mümkün eminim.
(Eleman ID yoluyla) DOM içinde bulunamayan bir değere karma değişen bir yan not olarak sayfayı üstüne tüm yol kayar. Eğer üst menüden yarısını açığa, Facebook üstünden yaklaşık 10 piksel aşağı kaydırma: Ben neden bahsettiğimi görmek için. Öğelerden birini tıklayın, bu (olmadan kısa sürede parça tanımlayıcısı güncellenir olarak sayfanın tepesine kadar geri atlar herhangi bir gecikme yeniden çizme / pencere Rötuş).
oy 0
0
CSS mutlak / sabit konumlandırma ile, üstbilgi ve altbilgi içeren div etiketleri her yerde HTML olabilir. üstündeki gibi!
En güncel tarayıcılarda bir hale gecikme, sayfa hızlı yanıp söner kısmi oluşturulmuş içeriği görüntülemek ve ağ veri geliyor olarak çizim çok zaman israf olmaz bu yüzden, iman Firefox için dörtte biri ikinci yoktur.
Peki gerçekleşebilir Yeni sayfa hızla stilleri ve üstbilgi ve altbilgi içeren HTML sunduğundan olduğunu. Bu içerik tarayıcısı tarafından hemen render, bu nedenle sonraki sayfayı görüntüler zaman, o değişmedi sanki görünür edilebilir.
sayfa dinamik içerik oluşturmaya ise, iyi bir numara üst, veri tamponunu temizleme ve çıkışta tüm statik bilgileri koymaktır. Sonra veritabanı sorguları ve Dinamik yapmak.
oy 0
0
Artırmak için Josh Stodola adlı cevabı: Benim anlayış içinde YUI İşareti Yöneticisi tam olarak bu işi yapar.