Ale zanim do tego dojdziemy, musimy dodać jedną linię do naszego CSS, nie ma potrzeby przechodzenia przez cały plik CSS dla tego przykładu, ponieważ jest to wszystko tylko dla wyglądu, które zmieni się przy każdym projekcie, nad którym pracujesz. Jednak za pomocą tej pierwszej metody istnieje jedna linia, która jest niezbędna i to jest:

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

To ukrywa wszystkie "strony" oprócz pierwszej. Tak więc strona pojawia się normalnie przy pierwszym załadowaniu.

JavaScript

Teraz wyjaśnijmy, co musimy osiągnąć za pośrednictwem jQuery. W naszym pliku custom.js musimy kierować reklamy, gdy użytkownik kliknie link do nawigacji. Pobierz jego link href i znajdź "sekcję" z tym samym ID, a następnie ukryj wszystko w # głównej zawartości div i zaniknij w nowej sekcji. Oto jak to wygląda:

$(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;}  else {return false;}}); var hash = window.location.hash; hash = hash.replace (/ ^ # /, ''); switch (hash) {case 'page2': $ ("#" + hash + "-link"). trigger ("click"); break; case "page3": $ ("#" + hash + "-link"). trigger ("klik"); break; case "page4": $ ("#" + hash + "-link"). trigger ("click"); break;}}); 

Ten kod jest podzielony na dwie sekcje, pierwsza osiąga to, o czym właśnie rozmawialiśmy. Posiada funkcję klikania na łączach nav header. Następnie umieszcza '# page1, # page2' etc w zmiennej o nazwie $ linkClicked. Następnie aktualizujemy adres URL przeglądarki, aby mieć tę samą nazwę skrótu. Następnie mamy instrukcję if upewniającą się, że link, który klikasz, nie jest bieżącą kartą, jeśli nie robi nic, ale jeśli nie, ukryj całą bieżącą zawartość i odkryj div za pomocą identyfikatora $ linkClicked. Proste!

Druga sekcja sprawdza, czy adres URL ma link hash na końcu, jeśli tak, znajduje odpowiedni odnośnik na stronie o tej samej wartości (dlatego linki mają określone identyfikatory w znacznikach), a następnie wyzwala to link (kliknięcie). Oznacza to, że użytkownik może ponownie załadować stronę po przejściu do "strony", a odświeżenie wyśle ​​użytkownika tam z powrotem, a nie tylko z powrotem na pierwszą stronę, co często może być problemem w przypadku tego rodzaju systemu.

To koniec pierwszej metody, w wyniku czego działa statyczna strona z natychmiastową wymianą treści i żadna strona nie jest ponownie ładowana. Jedyną wadą tej metody jest fakt, że cała zawartość jest wywoływana podczas początkowego obciążenia, ponieważ wszystko znajduje się w pliku indeksu. Może to stanowić problem ze zdjęciami i dodatkowymi treściami, dzięki czemu pierwsza wizyta w witrynie zostanie załadowana nieco dłużej. Spójrzmy więc na inny sposób, aby zrobić ten sam efekt, który może wyeliminować ten problem.

Korzystanie z AJAX i PHP

Aby osiągnąć ten sam efekt, ale w nieco inny sposób, tak aby początkowe obciążenie nie ładowało całej naszej zawartości, a tym samym spowolnić ją (pokonując punkt, jeśli strona zawiera dużo treści) użyjemy trochę PHP i AJAX. Oznacza to, że struktura plików dla naszego projektu zmieni się i będzie wyglądała następująco:

Jeśli więc spojrzysz, plik indeksu jest teraz plikiem .php, a nie .html. Mamy również dodatkowy plik o nazwie "load.php", a także nowy folder / katalog zwany stronami, na których znajdują się cztery strony HTML. Oznacza to, że jeśli pracujesz lokalnie, musisz skonfigurować lokalne środowisko programistyczne używając czegoś takiego MAMP (dla komputerów Mac) lub Serwer WAMP (dla Windowsa). Możesz też przesłać cały folder na serwer sieciowy, jeśli masz do niego dostęp i edytujesz, w zasadzie potrzebujesz środowiska, w którym PHP będzie działało.

Indeks.php zmienił tylko jedną rzecz, ale ważne, że nie załadujemy teraz całej zawartości i po prostu wywołajmy początkową zawartość za pomocą PHP. Teraz będzie wyglądać mniej więcej tak:

AJAX a Static Site

A więc początek linii wywołuje pierwszy plik HTML z naszego folderu stron i wstawia się całkowicie do naszego # głównego contentu DIV. Wywoływany plik może zawierać treść, która ma się pojawić na stronie.

Używanie $ .ajax w JavaScript

Przejdźmy do nowego JavaScriptu, teraz wygląda nieco inaczej, głównie używamy teraz AJAX do pobierania nowej treści z każdego pliku HTML, gdy użytkownik kliknie odpowiednią nawigację. Oto pierwsza funkcja w kodzie (druga pozostaje taka sama jak poprzednio):

$(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 ();}}); 

Wyjaśnijmy więc, co się dzieje. Dodajemy jeszcze jedną zmienną, czyli $ pageRoot. Zasadniczo jest to faktyczna liczba kliknięć (przejęcie części "#page" linku hash i pozostawienie indywidualnego numeru). Następnie wewnątrz tej samej instrukcji "if", tak jak poprzednio, wywołujemy ajax i używamy innego pliku PHP, o którym wspominaliśmy wcześniej, aby przeanalizować podane informacje (który link został kliknięty) i znaleźć odpowiednią stronę. Następnie, jeśli wróci bez żadnego błędu, wstawiamy nowy kod HTML z otrzymanego pliku do naszego # głównego contentu DIV. A potem, po prostu, żeby nagle się zmieniło, ukrywamy wszystko, a potem znikają.

load.php

Zawartość nowego pliku PHP jest krótka i słodka, pobiera numer strony, którą jQuery wysłała i sprawdza, czy istnieje odpowiedni plik HTML. Jeśli to zrobi, pobiera całą zawartość i zwraca ją do funkcji AJAX (co pokazaliśmy przed chwilą, że wstawiamy tę treść do głównego DIV).

Następnie witryna powinna wyglądać tak, jak chcesz, ale w większości działa poprawnie.

To jest to! Strona teraz wywołuje odpowiedni plik HTML za każdym razem, gdy użytkownik kliknie link nawigacji. Wymienia zawartość bez ponownego ładowania strony. I w ten sposób nadal nie musi wywoływać całej zawartości podczas ładowania strony początkowej! Mam nadzieję, że udało ci się nauczyć jakiejś użytecznej metody z tego samouczka i że możesz jej użyć do ulepszenia jakiegoś projektu w jakiś sposób.

Możesz zobaczyć tutaj demo jQuery, PHP demo here, Demo PHP tutaj, lub pobierz źródło i przyjrzyj mu się bliżej.

Czy używałeś AJAX do ładowania zawartości? Czy zastosowałeś podobną technikę, aby przyspieszyć działanie witryny? Daj nam znać swoje myśli w komentarzach poniżej.

Wyróżniony obraz / miniatura, doładowany obraz przez Shutterstock.