Κατά την περιήγηση στις σελίδες του Facebook η επικεφαλίδα και το τμήμα σταθερού footer παραμένουν ορατές μεταξύ σελίδα φορτία και τη διεύθυνση URL στη γραμμή διευθύνσεων αλλάζει αναλόγως. Τουλάχιστον, αυτή είναι η ψευδαίσθηση που παίρνω.
Πώς το Facebook επιτευχθεί αυτό από τεχνική άποψη;
Ένας τρόπος για την παροχή κεφαλίδες και υποσέλιδα που εμφανίζονται αμετάβλητες είναι μέσω CSS - εδώ είναι ένα παράδειγμα ενός σταθερού footer (παρατηρήστε την «θέση: σταθερό?»):
#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;
}
Θα θελήσετε να σιγουρευτείτε ότι έχετε προσθέσει κάποιο margin-bottom στη σελίδα divs σας (αυτά που γεμίζουν το κύριο μέρος της σελίδας) για να αφήσει χώρο για το σταθερό footer (ίδιο με κεφαλιά χρησιμοποιώντας margin-top).
Αυτό σημαίνει όχι στην πραγματικότητα να μείνουν στη σελίδα, αλλά, επειδή η θέση είναι τόσο σφιχτό και αναλλοίωτο, θα φαίνεται σαν να κάνει, εκτός αν φορτώνει η σελίδα σας να πάρει πάρα πολύ καιρό. Δεν ξέρω αν αυτό είναι αυτό που κάνει το Facebook, αλλά αυτό θα σας δώσει πολύ το ίδιο αποτέλεσμα.
Λοιπόν, ο τρόπος για να επιτευχθεί κάτι τέτοιο θα ήταν μέσω AJAX, αλλά από όσο μπορώ να δω, facebook, στην πραγματικότητα δεν το κάνει αυτό ... Απλά ελέγχονται, και ανανεώνει την κεφαλίδα όπως και τα περισσότερα sites ...
Επεξεργασία: Όταν απάντησα πρώτα αυτό, έψαχνα στο Facebook με το Google Chrome (2.0), η οποία για οποιοδήποτε λόγο, δεν το κάνετε πραγματικά με αυτόν τον τρόπο -> όταν κάνω κλικ στο προφίλ μου από την αρχική σελίδα, μου δίνει αυτό το στη γραμμή διευθύνσεων: http://www.facebook.com/profile.php?id=1304250071&ref=profile
και ως εκ τούτου ανανεώνει ολόκληρη τη σελίδα ... Περίεργα
Ανατρέξτε στην απάντηση Mark Brittingham για το πώς να το στυλ, αν και δεν νομίζω ότι είναι αυτό που ζητάς εδώ. Θα σας δώσω τις τεχνικές λεπτομέρειες σχετικά με το πώς λειτουργεί (και γι 'αυτό είναι αρκετά λαμπρό).
Ρίξτε μια ματιά στη γραμμή κατάστασης όταν περνάτε πάνω από το σύνδεσμο προφίλ στην κεφαλίδα ...
http://www.facebook.com/profile.php?id=514287820&ref=profile
Αυτό είναι όπου η ετικέτα <a> δείχνεται. Τώρα κοιτάξτε τη γραμμή διευθύνσεων όταν κάνετε κλικ ...
http://www.facebook.com/home.php#/profile.php?id=514287820&ref=profile
Ανακοίνωση για το «#» αναγνωριστικό κομμάτι / χασίς ; Αυτό αποδεικνύει ουσιαστικά ότι δεν έχουν εγκαταλείψει την σελίδα και η προηγούμενη αίτηση έγινε με AJAX. Είναι παρακολουθούν τα γεγονότα κλικ σε αυτές τις συνδέσεις, και επιτακτικούς την προεπιλεγμένη λειτουργικότητα με κάτι δικό τους.
Για να συμβεί αυτό με Javascript, το μόνο που έχετε να κάνετε είναι να ορίσετε ένα πρόγραμμα χειρισμού συμβάντων κλικ σε αυτές τις συνδέσεις, όπως τόσο ...
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;
}
}
Ένα υπέροχο πλεονέκτημα αυτής της προσέγγισης είναι ότι επιτρέπει το κουμπί πίσω για να είναι λειτουργική (με μικρή προστιθέμενη πονηριά), η οποία παραδοσιακά ήταν μια οδυνηρή παρενέργεια της χρόνιας χρήσης AJAX. Δεν είμαι 100% σίγουρος για το τι αυτή η απάτη είναι, αλλά σίγουρα είναι κατά κάποιο τρόπο σε θέση να ανιχνεύσει όταν το πρόγραμμα περιήγησης τροποποιεί το αναγνωριστικό κομμάτι (πιθανώς από τον έλεγχο αυτό κάθε ~ 500 χιλιοστά του δευτερολέπτου).
Σαν δευτερεύουσα σημείωση, την αλλαγή του κατακερματισμού σε μια τιμή που δεν μπορεί να βρεθεί εντός του DOM (μέσω της ταυτότητας στοιχείο), θα μεταβείτε στην σελίδα του σε όλη τη διαδρομή προς την κορυφή. Για να δείτε τι μιλώ για: μπορείτε μετακινηθείτε προς τα κάτω περίπου 10 εικονοστοιχεία από την κορυφή του Facebook, εκθέτοντας το ήμισυ του μενού στην κορυφή. Κάντε κλικ σε ένα από τα στοιχεία, που θα πηδήσει πίσω μέχρι την κορυφή της σελίδας μόλις το αναγνωριστικό τμήμα ενημερώνεται (χωρίς καμία παράθυρο βελτιώσουμε / αναδιατυπώσει καθυστέρηση).
Με CSS απόλυτο / σταθερής θέσης, οι ετικέτες div που περιέχει τις κεφαλίδες και τα υποσέλιδα μπορεί να είναι οπουδήποτε στην HTML. Όπως και στην κορυφή!
Στα περισσότερα σύγχρονα προγράμματα περιήγησης υπάρχει καθιστούν καθυστέρηση, το ένα τέταρτο δεύτερο για τον Firefox πιστεύω, έτσι ώστε η σελίδα δεν θα εμφανιστεί εν μέρει αποδίδονται περιεκτικότητα σε γρήγορη λάμψεις και χάνουμε πολύ χρόνο αντλώντας δεδομένα του δικτύου έρχεται.
Έτσι, αυτό που μπορεί να συμβεί είναι ότι η νέα σελίδα επιστρέφει γρήγορα HTML που περιέχει τα στυλ και την κεφαλίδα και το υποσέλιδο. Το περιεχόμενο αυτό μπορεί να αποδοθεί άμεσα από το πρόγραμμα περιήγησης, έτσι όταν εμφανίζεται η επόμενη σελίδα, φαίνεται σαν αυτά που δεν αλλάζουν.
Αν η σελίδα έχει παράγει δυναμικό περιεχόμενο, ένα καλό κόλπο είναι να θέσει όλες τις στατικές πληροφορίες στην κορυφή, αποτέλεσμα που και ξεπλύνετε το buffer δεδομένων. Στη συνέχεια, κάνει τη δυναμική ερωτήματα βάσης δεδομένων και τέτοια.
Για να αυξήσει Josh Stodola του απάντηση: Στην κατανόηση μου, ο Διευθυντής YUI Bookmark κάνει ακριβώς αυτή τη δουλειά.