Ładowanie podstron bez odświeżania

Strony, które ładują swą zawartość bez odświeżania wydają się być bardziej nowoczesne i płynniejsze w działaniu. W tym wpisie pokażę jak uzyskać taki efekt stosując bibliotekę jQuery, która zawiera elementy AJAX.

Zacznijmy od poukładania struktury folderów i plików:

+-[GŁÓWNY KATALOG STRONY]
|
|---->index.html
|
|--+-[js]
   |--->scripts.js
|--+-[pages]
   |--->home.html
   |--->about.html
   |--->contact.html

Okej, wypełnijmy teraz index.html:

<!DOCTYPE html>
<html lang="pl">
<head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <title>Moja Strona</title>
   <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
   <script type="text/javascript" src="js/scripts.js"></script>
</head>
<body>
   <ul id="menu">
      <li><a href="home.html">Strona Główna</a></li>
      <li><a href="about.html">O Mnie</a></li>
      <li><a href="contact.html">Kontakt</a></li>
   </ul>
   <div id="content"></div>
</body>
</html>

Zwróćmy uwagę na to, iż między znacznik head zostały dołączone dwa pliki javascriptu: biblioteka jQuery oraz nasze przyszłe funkcje korzystające z tej biblioteki. Szkielet tej strony zawiera również menu w liście punktów #menu oraz diva #content, do którego będą wczytywane podstrony.

Kolejną czynnością jest stworzenie podstron. W tym celu tworzymy w katalogu pages następujące pliki: home.html, about.html oraz contact.html. Ich zawartość może być dowolna. Ja zastosowałem jedynie nagłówek oraz paragraf z treścią:

<h1>O Mnie</h1>
<p>Mam na imię Paweł i lubię muzykę.</p>

Ostatnią czynnością jest napisanie kodu JS. Tworzymy zatem nowy plik – scripts.js w katalogu js o następującej zawartości:

$(document).ready(function() { 
   //Strona ladowana jako pierwsza:
   $('#content').load('pages/home.html');
 
   //Ladowanie pozostalych podstron:
   $('ul#menu li a').click(function() {
      var podstrona = $(this).attr('href');
      $('#content').html('Ładuję...');
      $('#content').load('pages/'+podstrona);
      return false;
   });
});

To już wszystko 😉

Powiązane Wpisy

jQuery Quicksand

Quicksand...

BlaB! Lite 5 [PL]...

noty

noty...

Komentarze

  1. Super dzięki temu kodu moja strona jest płynniejsza i nawet dużo szybciej chodzi 🙂

  2. SeNioR dnia 30 stycznia 2013 o 16:30 napisał(a):

    Dobra robota.

  3. Darksin dnia 8 sierpnia 2013 o 10:03 napisał(a):

    Jak zmienić kod JS aby wywołaniem funkcji nie było „‚ul#menu li a'” tylko przycisk submit w formularzu ?

    • Piotr dnia 18 września 2013 o 16:39 napisał(a):

      Zamiast „ul#menu li a” daj „input.moj-przycisk” i nadaj klasę inputowi czyli „. Jeżeli chodzi Ci o button to zamiast „input” będzie „button”, połapiesz się jeżeli mniej więcej ogarniasz podstawy. 🙂

  4. TH dnia 26 kwietnia 2014 o 08:36 napisał(a):

    Działa oke, ale jak chcę podlinkować stronę zewnętrzną pokazuje mi w content „Ładuję”. Jak można to zmienić? 🙂

  5. Rafał dnia 14 maja 2014 o 16:10 napisał(a):

    Nie działa mi nie wiem dlaczego wszystko mam idealnie tak samo. Proszę o pomoc

  6. Rafał dnia 18 lipca 2014 o 19:55 napisał(a):

    Witam proszę o pomoc wszystko mam idealnie tak samo.Skrypt zamiast wyświetlać podstronę pokazuje cały czas „Ładuję…”.

    • JJay dnia 26 lipca 2014 o 21:37 napisał(a):

      Daj link do strony na której masz skrypt.

      • petrus dnia 6 grudnia 2014 o 15:28 napisał(a):

        Witaj, mam to wszystko ładnie pięknie tylko jak klikam na przycisk to wyświetla mi się napis „Ładuje” i tak ciągle nie wyświetla mi zawartości pliki home.html

  7. petrus dnia 6 grudnia 2014 o 15:28 napisał(a):

    Witaj, mam to wszystko ładnie pięknie tylko jak klikam na przycisk to wyświetla mi się napis „Ładuje” i tak ciągle nie wyświetla mi zawartości pliki home.html

  8. blosiu dnia 10 sierpnia 2015 o 09:35 napisał(a):

    A jak zrobić żeby po kliknięciu w sekcji ‚galeria’ na link z obrazkiem przeładowało mi tylko właśnie tą sekcję ‚galeria’ do innego pliku gallery1.html?


    Fotografia ślubna

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *