Αλλά πριν φτάσουμε σε αυτό πρέπει να προσθέσουμε μια γραμμή στο CSS μας, δεν χρειάζεται να μεταβείτε σε ολόκληρο το αρχείο CSS για αυτό το παράδειγμα, καθώς όλα είναι μόνο για εμφάνιση, που θα αλλάξει με ό, τι έργο εργάζεστε. Ωστόσο, με αυτή την πρώτη μέθοδο υπάρχει μια γραμμή που είναι απαραίτητη και αυτή είναι:

#page2, #page3, #page4 {display: none;}

Αυτό κρύβει όλες τις "σελίδες" εκτός από την πρώτη. Έτσι, η σελίδα εμφανίζεται κανονικά στο πρώτο φορτίο.

Το JavaScript

Τώρα λοιπόν να εξηγήσουμε τι πρέπει να πετύχουμε μέσω του jQuery. Στο αρχείο custom.js, πρέπει να στοχεύσουμε όταν ο χρήστης κάνει κλικ σε ένα σύνδεσμο πλοήγησης. Ανακτήστε το σύνδεσμο href και βρείτε το τμήμα με το ίδιο αναγνωριστικό, στη συνέχεια, κρύψτε τα πάντα στο # main-content div και ξεθωριάστε στη νέα ενότητα. Αυτό είναι αυτό που μοιάζει με:

$(function() {$('header nav a').click(function() {var $linkClicked = $(this).attr('href');document.location.hash = $linkClicked;if (!$(this).hasClass("active")) {$("header nav a").removeClass("active");$(this).addClass("active");$('#main-content section').hide();$($linkClicked).fadeIn();return false;}  αλλιώς {return false}}}) var hash = window.location.hash, hash = hash.replace (/ ^ # /, ''), διακόπτης (hash) {case 'σελίδα2' + "-link") ενεργοποίηση ("κλικ") · σπάσιμο · περίπτωση «σελίδα3»: $ ("#" + hash + "-link" ("#" + hash + "-link") ενεργοποίηση ("κλικ"); 

Αυτός ο κώδικας χωρίζεται σε δύο τμήματα, ο πρώτος επιτυγχάνει αυτό που μόλις μιλήσαμε. Έχει μια λειτουργία κλικ στις συνδέσεις κεφαλίδας πλοήγησης. Στη συνέχεια τοποθετεί τη σελίδα "# page1, # page2" κλπ σε μια μεταβλητή με όνομα $ linkClicked. Στη συνέχεια, ενημερώνουμε τη διεύθυνση URL του προγράμματος περιήγησης για να έχουμε το ίδιο όνομα κατακερματισμού. Στη συνέχεια, έχουμε μια εντολή if βεβαιωθείτε ότι ο σύνδεσμος που κάνουμε κλικ δεν είναι η τρέχουσα καρτέλα, αν δεν κάνει τίποτα, αλλά αν δεν κρύψει όλο το τρέχον περιεχόμενο και αποκαλύψει το div με αναγνωριστικό $ linkClicked. Τόσο απλό!

Η δεύτερη ενότητα ελέγχει αν η διεύθυνση url έχει σύνδεσμο κατακερματισμού στο τέλος της, αν το κάνει, εντοπίζει έναν αντίστοιχο σύνδεσμο στη σελίδα με την ίδια τιμή (γι 'αυτό οι σύνδεσμοι έχουν συγκεκριμένα αναγνωριστικά στο markup) και στη συνέχεια ενεργοποιεί σύνδεσμο (κάνει κλικ σε αυτό). Αυτό σημαίνει ότι ο χρήστης μπορεί να φορτώσει ξανά μια σελίδα μετά την πλοήγησή του σε μια σελίδα και ότι η ανανέωση θα στείλει πίσω το χρήστη πίσω από την πρώτη σελίδα, κάτι που μπορεί συχνά να είναι ένα πρόβλημα με αυτό το είδος συστήματος.

Έτσι, αυτό είναι το τέλος της πρώτης μεθόδου, αυτό έχει ως αποτέλεσμα μια στατική τοποθεσία εργασίας που έχει στιγμιαία ανταλλαγή περιεχομένου και δεν επαναφορτώνει σελίδα. Το μόνο μειονέκτημα αυτής της μεθόδου είναι το γεγονός ότι όλο το περιεχόμενο καλείται στο αρχικό φορτίο, καθώς είναι όλα εκεί στο αρχείο ευρετηρίου. Αυτό μπορεί να αρχίσει να είναι ένα πρόβλημα με τις φωτογραφίες και το πρόσθετο περιεχόμενο κάνοντας την πρώτη επίσκεψη στο site να φορτώσει λίγο περισσότερο. Ας δούμε λοιπόν έναν άλλο τρόπο να κάνουμε το ίδιο αποτέλεσμα που μπορεί να εξαλείψει αυτό το πρόβλημα.

Χρησιμοποιώντας AJAX και PHP

Για να επιτύχουμε το ίδιο αποτέλεσμα, αλλά με ελαφρώς διαφορετικό τρόπο, έτσι ώστε το αρχικό φορτίο να μην φορτώσει όλο το περιεχόμενό μας και έτσι να το επιβραδύνει (νικώντας το σημείο αν ο χώρος έχει πολύ περιεχόμενο) θα χρησιμοποιήσουμε λίγο PHP και AJAX. Αυτό σημαίνει ότι η δομή του αρχείου για το έργο μας θα αλλάξει και θα μοιάζει με αυτό:

Έτσι, αν κοιτάξετε, το αρχείο ευρετηρίου είναι τώρα ένα .php και όχι ένα .html. Έχουμε επίσης ένα επιπλέον αρχείο που ονομάζεται 'load.php', καθώς και ένα νέο φάκελο / κατάλογο που ονομάζεται σελίδες στις οποίες υπάρχουν τέσσερις σελίδες HTML. Τώρα αυτό σημαίνει ότι εάν εργάζεστε τοπικά, πρέπει να δημιουργήσετε ένα τοπικό περιβάλλον ανάπτυξης χρησιμοποιώντας κάτι σαν αυτό MAMP (για Mac) ή WAMP Server (για Windows). Ή μπορείτε να μεταφορτώσετε ολόκληρο το φάκελο σε έναν web server εάν έχετε πρόσβαση και επεξεργαστείτε εκεί, βασικά θα χρειαστείτε ένα περιβάλλον όπου η PHP θα λειτουργήσει.

Το index.php έχει αλλάξει μόνο ένα πράγμα, αλλά είναι σημαντικό, τώρα δεν θα φορτώσουμε όλο το περιεχόμενο εκεί και απλά θα καλέσουμε το αρχικό περιεχόμενο μέσα σε ένα PHP. Τώρα θα φανεί κάτι τέτοιο:

AJAX a Static Site

Έτσι η γραμμή αρχίζει καλεί στο πρώτο αρχείο HTML από το φάκελο των σελίδων μας και εισάγει εξ ολοκλήρου στο # main-content DIV. Το αρχείο που καλείται μπορεί να περιέχει ό, τι περιεχόμενο θέλετε να εμφανίζεται στη σελίδα.

Χρησιμοποιώντας $ .ajax στο JavaScript

Ας προχωρήσουμε στο νέο JavaScript, τώρα φαίνεται λίγο διαφορετικό, κυρίως τώρα χρησιμοποιούμε το AJAX για να φέρουμε το νέο περιεχόμενο από κάθε αρχείο HTML όταν ο χρήστης κάνει κλικ σε κάποια αντίστοιχη πλοήγηση. Εδώ είναι η πρώτη λειτουργία στον κώδικα (ο δεύτερος παραμένει ο ίδιος με τον προηγούμενο):

$(function() {$('header nav a').click(function() {var $linkClicked = $(this).attr('href');document.location.hash = $linkClicked;var $pageRoot = $linkClicked.replace('#page', '');if (!$(this).hasClass("active")) {$("header nav a").removeClass("active");$(this).addClass("active");$.ajax({type: "POST",url: "load.php",data: 'page='+$pageRoot,dataType: "html",success: function(msg){if(parseInt(msg)!=0){$('#main-content').html(msg);$('#main-content section').hide().fadeIn();}  }})}} else {event.preventDefault ()?}})? 

Ας εξηγήσουμε λοιπόν τι συμβαίνει. Προσθέτουμε μια ακόμα μεταβλητή, δηλαδή $ pageRoot. Αυτός είναι βασικά ο πραγματικός αριθμός των κλικ (παίρνοντας τον τρόπο του '#page' μέρος του συνδέσμου κατακερματισμού και αφήνοντας τον ατομικό αριθμό). Στη συνέχεια, στο εσωτερικό της ίδιας δήλωσης "if" όπως πριν καλούμε ajax και χρησιμοποιήσαμε το άλλο αρχείο PHP που αναφέραμε νωρίτερα για να αναλύσουμε τις πληροφορίες που δόθηκαν (σε ποιο σύνδεσμο έγινε κλικ) και να βρούμε την αντίστοιχη σελίδα. Στη συνέχεια, αν επανέλθει χωρίς σφάλμα, εισάγουμε το νέο HTML από το αρχείο που ελήφθη στο # main-content DIV. Στη συνέχεια, απλά για να σταματήσουμε την αλλαγή ξαφνικά, κρύβουμε τα πάντα και στη συνέχεια τα ξεθωριάζουμε.

load.php

Τα περιεχόμενα του νέου αρχείου PHP είναι σύντομα και γλυκά, παίρνει τον αριθμό σελίδας που έχει στείλει το jQuery και εξετάζει αν υπάρχει το αντίστοιχο αρχείο HTML. Εάν το κάνει, παίρνει όλο το περιεχόμενο και το επιστρέφει στη λειτουργία AJAX (που δείξαμε πριν από λίγο ότι εισάγουμε αυτό το περιεχόμενο στο κύριο DIV).

Μετά από αυτό, ο ιστότοπος θα πρέπει να φαίνεται όσο θέλετε, αλλά ως επί το πλείστον λειτουργεί σωστά.

Αυτό είναι! Ο ιστότοπος καλεί τώρα το σωστό αντίστοιχο αρχείο HTML κάθε φορά που ο χρήστης κάνει κλικ σε ένα σύνδεσμο πλοήγησης. Αντικαθιστά το περιεχόμενο χωρίς να επαναφέρει τη σελίδα. Και έτσι δεν χρειάζεται να καλέσετε όλο το περιεχόμενο στο αρχικό φορτίο της σελίδας! Ελπίζω ότι έχετε καταφέρει να μάθετε κάποια χρήσιμη μέθοδο από αυτό το σεμινάριο και ότι μπορείτε να το χρησιμοποιήσετε για να βελτιώσετε κάποιο έργο με κάποιο τρόπο.

Μπορείτε να δείτε το jQuery demo εδώ, ο PHP demo εδώ, ή κατεβάστε την πηγή και εξετάστε προσεκτικά.

Χρησιμοποιήσατε AJAX για φόρτωση περιεχομένου; Χρησιμοποιήσατε μια παρόμοια τεχνική για να επιταχύνετε τον ιστότοπό σας; Ας γνωρίσουμε τις σκέψεις σας στα παρακάτω σχόλια.

Προτεινόμενη εικόνα / μικρογραφία, υπερφορτωμένη εικόνα μέσω Shutterstock.