Pokaż wyniki od 1 do 8 z 8

Wątek: [Tutorial][jQuery] Dynamiczne wczytywanie strony

  1. #1
    Aktywny
    Dołączył
    Dec 2011
    Posty
    273

    Domyślnie [Tutorial][jQuery] Dynamiczne wczytywanie strony

    Witajcie,

    Zastanawialiście się kiedyś jak działają strony które są w pełni dynamiczne? Jak wczytują się nowe pliki a stare usuwają po kliknięciu na zwykły odnośnik? To dobrze trafiliście! Zaprezentuje Wam tutaj prosty sposób jak to zrobić.

    Zaczynamy od struktury katalogów:
    Kod:
    WIELKIE LITERY = katalog;
    małe litery    = plik; 
    
    GŁÓWNY_KATALOG:
    _ index.php
    __ JAVASCRIPT/
    ___ page_load.js
    ___ jquery.js
    __ FILES/
    ___ home.php
    W index.php musimy wczytać potrzebne pliki, oraz zrobić element do którego zostanie wczytany plik:
    Kod html:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Dynamiczne wczytywanie plików</title>
    </head>
    
    <body>
    //lista odnośników, po kliknięciu plik zostanie wczytany dynamicznie
    <menu>
    <a href="home.php">Home</a>
    </menu>
    
    //tutaj zostaną wczytane pliki
    <div id="page_load">
    <p>To jest plik index.php!</p>
    </div>
    //wczytujemy bibliotekę jquery.js którą należy pobrać ze strony http://www.jquery.com/
    <script src="javascript/jquery.js"></script>
    //wczytujemy plik który będzie dynamicznie wczytywał pliki do elementu #page_load
    <script src="javascript/page_load.js"></script>
    </body>
    </html>
    Tak więc po zapoznaniu się z plikiem index.php powinniśmy mniej więcej wiedzieć jak to już będzie działało. Przejdźmy do pliku home.php:
    Kod html:
    //wyświetlamy tylko tekst, nic innego w tym tutorial'u nie potrzebujemy :)
    <p>To jest plik home.php!</p>
    Czas przejść do pliku jquery.js, możemy go pobrać z oficjalnej strony owej biblioteki: http://www.jquery.com/

    Na koniec plik page_load.js:
    Kod:
    $(function(){ //gdy strona zostanie wczytana
      $("menu a").click(function(){ // gdy kliknięto w odnośnik (a) który znajduje się w elemencie menu
        var file = $(this).attr("href"); //bierzemy atrybut href z odnośnika a, w naszym przypadku będzie to home.php
        $("#page_load").hide().fadeIn(1000).html('Ładuję...'); //ukrywamy element #page_load, w naszym przypadku tekst "To jest plik index.php!" i pokazujemy tekst "Ładuję...".
        $("#page_load").load("files/"+file); // wczytujemy do elementu #page_load plik który zdefiniowaliśmy wcześniej, czyli zmienną "file", znajdujący się w katalogu "files/"
        return false; // zwracamy false, aby strona się nie odświeżyła.
      });
    });
    Trzeba oczywiście pamiętać, że w ten sposób wczytamy tylko plik do danego elementu, strona nie będzie w prawie żadnym stopniu dynamiczna. Aby osiągnąć ten efekt stu procentowej lekkości, należy również dynamicznie wczytywać inne elementy strony, jak i przesyłać dane z formularza za pośrednictwem AJAX'a.

    Mam nadzieję, że będzie przydatne i zrozumiałe.
    Gdybyście znaleźli błędy, lub chcieli coś poprawić piszcie w tym temacie.
    Bartek

  2. #2
    Zasłużony Awatar Rodkan
    Dołączył
    Mar 2011
    Posty
    1,465

    Domyślnie

    Mógłbyś dodać walidację czy dana strona istnieje czy coś w ten deseń.

  3. #3
    Zarejestrowany
    Dołączył
    Mar 2008
    Posty
    251

    Domyślnie

    Ogólnie jest w porządku z tą różnicą, że jQuery bardzo ostatnio forsuje handler "on", więc chyba wypadałoby z niego korzystać (no, ale póki co click nie jest deprecated, więc to tylko kwestia gustu), doczepiłbym się jeszcze do wyszukiwania eventu w konkretnym menu, przez co skrypt nie jest elastyczny (np. nie zadziała na odnośnikach umieszczonych w dynamicznie wczytanej stronie).

    Ach, jeszcze jedno - nie lepiej użyć jQuery'owego event,preventDefault, zamiast return false?

  4. #4
    Aktywny
    Dołączył
    Dec 2011
    Posty
    273

    Domyślnie

    Można użyć "on", ale on również nie zadziała na odnośnikach wczytanych dynamicznie. Tutaj trzeba by było chyba użyć funkcji "live()" która niestety jest już, jak ty to mówisz: "deprecated".

  5. #5
    Programista Awatar Aravorn
    Dołączył
    Apr 2011
    Posty
    343

    Domyślnie

    A ja bym się doczepił położenia skryptu w ciele strony, powinien być w head. masz coś takiego jak metodę sprawdzającą, czy strona została załadowana i tam możesz zadeklarować swój kod, pomijając tą funkcję anonimową, dopisując tylko rejestrację konkretnych zdarzeń
    I to co powiedział Galathilion.
    I to co też napisał Rodkan, bo w ekstremalnej sytuacji można to wykorzystać, niekoniecznie w dobrych celach..

  6. #6
    Zarejestrowany
    Dołączył
    Mar 2008
    Posty
    251

    Domyślnie

    Bartek, oczywiście, że "on" zadziała w odnośnikach wczytanych dynamicznie, wystarczy zrobić tak:

    Kod:
    $(document.body).on("click", "#id_elementu", function()
    {
         // coś tam coś tam
    });
    PS A co do tego czy dana strona istnieje - to już zależy od sposobu napisania silnika. Jeżeli masz odpowiednio skonfigurowane .htaccess, wykorzystujesz MVC to wczytanie nieistniejącej strony powinno spowodować po prostu wyświetlenie błędu. Gorzej ze stronami zewnętrznymi.
    Ostatnio edytowane przez Galathilion ; 30-04-2013 o 10:52

  7. #7
    Aktywny
    Dołączył
    Dec 2011
    Posty
    273

    Domyślnie

    Aravorn, moim zdaniem kod JS powinien być wczytywany na końcu strony, od razu przed końcem body (</body>). Czemu? Gdyż przy dużych ilościach kodu JS, gdyby znajdowałby się on w sekcji <head>, powodowałoby to wolniejsze wczytywanie poszczególnych elementów strony. Gdy zaś wstawi się go na końcu, cały wygląd strony wczyta się przed JS. Przydatne to jest gdy ma się duże ilości skryptów,a jQuery jest dużą biblioteką.

    Co do tego "on()", można go użyć, ale należy pamiętać, że menu nie jest wczytywane dynamicznie więc zwykły "click()" wystarczy, a przynajmniej powinien. Sprawdzanie czy strona istnieje:
    PS A co do tego czy dana strona istnieje - to już zależy od sposobu napisania silnika. Jeżeli masz odpowiednio skonfigurowane .htaccess, wykorzystujesz MVC to wczytanie nieistniejącej strony powinno spowodować po prostu wyświetlenie błędu. Gorzej ze stronami zewnętrznymi.

  8. #8
    Zasłużony Awatar karer
    Dołączył
    Apr 2008
    Posty
    2,554

    Domyślnie

    Co do wczytywania kodu JS to robi sie to w nieco inny sposob zeby na szybkosci zaoszczedzic. Daje sie w body onloaded doczytanie skryptow JS. Dzieki temu najpierw caly HTML wejdzie, a dopiero wtedy skrypty sie doczytaja.

Informacje o wątku

Użytkownicy przeglądający ten wątek

Aktualnie 1 użytkownik(ów) przegląda ten wątek. (0 zarejestrowany(ch) oraz 1 gości)

Podobne wątki

  1. Odpowiedzi: 3
    Ostatni post / autor: 22-04-2013, 10:36
  2. [Mapa]Wczytywanie na mape
    Przez Gomez93 w dziale Problemy przy tworzeniu własnej gry
    Odpowiedzi: 10
    Ostatni post / autor: 02-04-2013, 19:14
  3. Ramki a dynamiczne wczytywanie
    Przez Komando w dziale Pytania dotyczące silnika Xnova
    Odpowiedzi: 3
    Ostatni post / autor: 21-01-2012, 09:43
  4. pliki tpl, wczytywanie.
    Przez TheSxW w dziale Pytania dotyczące silnika Xnova
    Odpowiedzi: 2
    Ostatni post / autor: 15-01-2012, 20:06
  5. Wczytywanie danych z pliku
    Przez vercuz w dziale PHP / MySql
    Odpowiedzi: 8
    Ostatni post / autor: 08-06-2010, 12:49

Zakładki

Uprawnienia umieszczania postów

  • Nie możesz zakładać nowych tematów
  • Nie możesz pisać wiadomości
  • Nie możesz dodawać załączników
  • Nie możesz edytować swoich postów
  •