Hogyan dinamikusan betölteni a tartalmi oldalon AJAX és jQuery

Ebben a leírásban, elvisszük az átlagos rendes honlap, és javítása révén jQuery. Mi lesz hozzá AJAX-funkciót, amely lehetővé teszi a tartalom dinamikusan betölteni tartalmat. újratöltés nélkül az oldalon, egy megfelelő tartályban. Ahelyett, hogy arra kényszeríti a felhasználót, hogy menjen egy másik oldalra. És azt is integrálni néhány lenyűgöző animációs hatásokat.

Például, először épített egy nagyon egyszerű elrendezés. Itt egy screenshot és HTML-kódot, amit használni fog.

Eleinte, menj, és töltse le a legújabb stabil kiadása jQuery és adjunk hozzá egy linket hozzá a dokumentumban:

Úgy vélem, az egyik legjobb tulajdonságait jQuery - az egyszerűség. Lehetőség van, hogy elérjék a feladatot, amelyhez lenyűgöző hatást csak néhány sornyi kódot.

Először is, hadd töltse be jQuery könyvtár és start funkció, ha a dokumentum elkészült (amikor a DOM már be van töltve).

Meg kell győződnünk arról, hogy ha rákattint egy linkre a navigációs menü ezen az oldalon, a böngésző nem teszi az átmenetet a megfelelő oldalra, és dinamikusan betölteni oldal tartalmát a mi elrendezés, újraindítás nélkül.

Ehhez meg kell határozni a linkeket a navigációs menü, és indítsa el ezt a funkciót, ha rájuk kattintasz:

Nézzük felvázolja, mit kell tennünk ebben a funkciót annak érdekében.

Tartalmának törlése az aktuális oldalon.

Kap egy új tartalmi oldalon, és adjunk hozzá a tartalmát a DIV.

Annak igazolására, hogy így a fenti kódot, mondjuk egy felhasználó rákattint a „körülbelül” linkre. amely kapcsolatban van az oldalon „about.html” - változó lesz ebben a helyzetben: „about.html #content” - és ez a változó, amely azt fogja kérni az egyszerű hívást. Azonban az első dolog, amit kezdeni - ez létre fog hozni egy szép hatást az aktuális oldal tartalmát. Ehelyett egyszerűen eltűnik, a jQuery «rejtőzik»:

Ez a funkció gyorsan „nyersbőr» #content div, és amint a hatás véget ér a művelet, akkor viszont kezdeményezi a funkció „loadContent» (új tartalommal letöltését [via ajax]) - a funkció, amit meg fogja határozni később (a 4. lépésben ).

Miután a régi tartalom eltűnik a lenyűgöző hatás, nem hagyhatjuk ember várja, amíg az új tartalom (különösen, ha van egy lassú internetkapcsolat), így hozunk létre egy kis „loading” képe, így a felhasználók tudják, hogy valami ez történik a háttérben:

Itt a CSS-hez kapcsolódik az újonnan létrehozott #load div:

Így egy olyan területen, tartalmaznia kell a boot animáció, nem először jelenik meg. Továbbá, az inicializálás fadeIn () függvény (lásd. A fenti kódot), akkor elkezdenek megjelenni a jobb felső sarokban a weboldalt, és azt mutatja, animált GIF, amíg egy idő után eltűnik a képernyőről.

Egy idő után, amikor a felhasználó rákattint az egyik a linkeket kezd előfordulnak a következők szerint:

Egy üzenet jelenik meg indításkor.

Most írja a nagyon tartalmát a letöltés funkciót, ami a korábban tárgyalt:

loadContent függvény meghívja a kért oldalt, és amikor ez megtörtént, felhívja a „showNewContent” (amely az új tartalom):

Ez a funkció - showNewContent - felhasználás (ez túl unalmas név valójában egy ilyen nagy hatással) mutat function () jQuery, hogy az új tartalom van jelölve címke elem „#content” jelenik meg az oldalon. Egyszer indukált, kezdeményezi a funkció 'hideLoader' (Fade Out):

Emlékeznünk kell arra, hogy a funkció vissza kell térnie egy klikk feldolgozás «hamis», a böngésző nem mozdult egy másik oldalra.

Most mindennek jól kell működnie. Ennek egy példája látható itt: [link]

A fenti kód értékét megváltoztatja az URL-t az értékeket, ha megnyomja a tulajdonság „href” (kivéve a kiterjesztése „.html”). Ezért, ha a felhasználó rákattint a „hazai” linkre (href = index.html), a hash érték jelenik meg, mint a „INDEX”.

Vége a ...

Ebben a kérdésben elkötelezett létrehozása dinamikus tartalom letöltése, újratöltés nélkül az oldalon, AJAX eszközökkel és jQuery, befejeződött.

Fordította és szerkesztette: Victor Horn és Andrew Bernatsky. webformyself csapat.

A legtöbb IT hírek és webfejlesztés A csatorna-távirat

fájl nem létezik, eltávolítjuk ...

Mindent akarok tenni, és én csak ültem az anya térdre, és szívja sisyu így chtoli?