Végtelen görgetés automatikus tartalom letöltése
1. Nyilatkozat a probléma
Nos, nézzük a következő példát. Van egy ilyen oldal a főoldalon megjelenő rendszeres cikket:
Azt is meg kell, hogy hozzon létre egy úgynevezett végtelen görgetés, hogy van, ha kihagyja a függőleges csúszka segítségével válassza ki a az oldal alján - automatikusan történik tartalmat letölteni, és megjeleníti a vonatkozó cikket a következő oldalon. Ezek a cikkek lesz folytatása a tartalom az összes fő oldalon. Ezután a felhasználó továbbra is olvasni a cikkeket, és ezáltal újra görgessen az oldal aljára, és ismét, majd elvégezhető a feltöltés tartalmat. Természetesen tartalmat feltölteni, mi kell aszinkron, így fogjuk használni AJAX módszer.
2. Áttekintés a vizsgálati helyszín
Így az összes forráskód, nem adom ezt a cikket egy teszt oldal, mivel elég nagy, és a forráskód ez a bemutató, akkor képes lesz látni őket. A fő fájl az oldalon - ez a index.php, ami valójában megjelenik az összes tartalom ezen a honlapon. Nézzük meg a kódrészletet ezen az oldalon, vagyis a kód PHP index.php:
Mint látható, először csatlakoztassa a konfigurációs fájl, amelyben a kapcsolatot az adatbázissal és határozott COUNT_PER_PAGE állandó - a cikkek számát kimenet ugyanazon az oldalon. És a fájl, functions.php - amely tartalmazza a funkció kezd a tárgyaknak az adatbázisban a kiválasztott oldal (amelyre még visszatérünk).
Most nézzük meg functions.php file:
Hogyan látja a függvény két paramétert: $ page - az oldalszámot megjeleníteni kívánt, és a $ count_per_page - a tételek száma oldalanként megjelenített (természetesen ez a lehetőség nem tudta átadni, és használja a konstans a konfigurációs fájlban, de sokoldalúbb ). Ez a funkció végrehajtja az SQL lekérdezést az adatok lekérése egy adatbázisból, és amely egy olyan mechanizmus, így bizonyos elemek, összhangban az oldalakat, akkor kell használni a lekérdezés LIMIT nyilatkozatot, és kérje magát az elején a minta száma és a kiválasztott cikkek. Annak érdekében, hogy meghatározzák a kezdete a minta, akkor használja a következő kifejezést:
3. Adjuk hozzá a kiegészítő HTML kódot
Mielőtt elkezdené írni a kódot végtelen görgetés, adjunk egy kiegészítő HTML kódot:
Div class egység terhelés szükséges adatokat küld jelzi a folyamatot, hogy a szerver. Azaz, kezdetben, a blokk el van rejtve, de ha van egy hivatkozás a szerver, az egység jelenik meg a képernyőn. Az animált képek (gif) lesz beállítva a háttérben ez az egység. Azonnal adjunk néhány stílust ez az egység:
A div a pager osztály - információ, az szükséges, hogy láttuk, hogy melyik oldal van éppen megjelenítve. Azonnal adjunk néhány stílust ez a blokk (a blokk csak kihozni minden olyan helyen a honlapon, mivel valószínűleg nem kell megmutatni a felhasználó, de ez nagyon hasznos a fejlesztés során a script).
Most nyílt script.js fájlt és add hozzá a következő kódot:
Tehát ha a szelet módszerrel, és megszünteti a kérdőjel a kapott karakterlánc. És azonnal, módszerével osztott osztott meg egy tömbben tárolt változó param. Break a tanfolyam lesz a jel # 038;. Azaz, a változó param tartalmaz egy tömböt típusa:
És meg kell, hogy a paraméter értékét oldalon. Tehát ha egy ciklusban, hozzon létre egy sor eredmény, amely a nevét a sejtek - a GET paraméter neveket és értékeket -, illetőleg az értékek ugyanezek GET paramétereket:
Ellenőrizzük, hogy van egy sejt a tömbben eredmény, oldal, és ha van, akkor annak értéke van írva a változó oldalon. Ha a cella nincs jelen, akkor a változó oldalon tárolja az értéket 1 (alapértelmezett). Továbbá úgy döntünk útján lapozó egység jQuery osztály, megjeleníti a képernyőn a show () metódus, és adjuk hozzá a tartalmát egy adott blokk (szöveg adott blokk), változó oldalon a szöveges () metódust.
Aztán, hogy egy változót blokk és tartsa HAMIS. Ezt a változót kell használni, hogy rögzítse a forgatókönyvet. Azaz, ha ez a változó tárolja az értéket TRUE, akkor a munka következő szakaszában kód blokkolva (amit majd később beszélünk). Mi következik itt a kódot:
Erase Elem kiválasztása ablakot, és hívja a scroll () metódust. Amely meghatározza eseménykezelő függvényt scroll - a csúszka mozgatásával görgetni. Vagyis, ha a felhasználó mozgatja a csúszkát görgetni, teljesítette a leírt funkciók ezt a módszert. Ezután ellenőrizze, hogy a görgetés csúszka az oldal alján és script blokkoló be van kapcsolva, az első dolog, amit zárja le a script: block = true;
Ezután mutatják blokk az osztály terhelés alkalmazásával fadeIn () módszer 500 milliszekundum befejezése után az összes animációs hatások végrehajtott leírt működést a második paraméter fadeIn () módszer. Ebben a funkcióban, először növeli az értékét az oldal változó az egység, ahogy kell, hogy megjelenjen a következő oldalon. Akkor térjünk vissza a ajax módszer és adja át a következő paramétereket:
url - az utat a felhúzó a kiszolgálón, amelyre utalunk, ebben az esetben index.php;
típus - a kérés fajtája, amelynek segítségével átadjuk az adatokat ebben az esetben a GET típusú;
adatok - küldött adatokat a szerverre. Vezesse át a paraméter oldal - értékét az új oldal jelenik meg, és mozgassa a paraméter értéke 1 képződéséhez szükséges egy válasz a szervertől.
Nézze meg, hogyan mozog a scroll folyamatosan aktiválva eseménykezelő tekercset, forgatókönyvet a munka, meg kell befogni az adatátvitel ideje a szervert, ha a felhasználó gyorsan mozgatja a tekercset, és ebben az időben küldünk az adatokat a szerverre, azonnal újra működhet kezelőjét az esemény, és így amíg a felhasználó abbamarad csúszkát. És megkapjuk, hogy a szerver küld egy csomó kéri, és ez létre fog hozni egy komoly terhet, és vizuálisan akkor néz ki rosszul, hiszen több oldalt megjelenik egy sorban egy pillanat alatt.
Annak megállapításához, hogy a tekercset csúszka a képernyő alján, használja a következő értékeket:
$ (Window) .height () - a magassága a böngésző ablakot;
$ (Document) .height () - a magassága a dokumentum (más szóval a magassága a honlapon).
$ (Window) .scrollTop () - értékét a csúszka görgetni. Ez azt jelenti, amelynek magassága emelkedik webhely tartalma, túl a látható része a böngésző a csúszka mozgatásával görgetés.
Tehát, ha a $ (ablak) .height () + $ (ablak) .scrollTop () nagyobb vagy egyenlő, mint $ (document) .height () (a magassága a dokumentum), akkor azt lehet mondani, hogy a csúszka alján a böngésző.
5. Forma választ a szerver
Amikor viszont a index.php AJAX és adja át az oldalparamétert értéke a megjelenített oldal, azonnal kiváltott ellenőrizze:
Azaz, ellenőrizze, hogy van egy sejt lépés GET szuperglobális array értéke 1, és ha igen, végiglépked a tömb $ result, és hogyan kell megjeleníteni. De fellebbezni a fájl távolról AJAX, így a képernyő jelzi semmi, hanem éppen ellenkezőleg, minden volt, hogy a képernyőn lesz a szerver válaszát, amely bejut a változó html.
A ciklus hívása után exit () függvény, ami azonnal dolgozni, hogy töltse ki a script végrehajtása után a ciklus. Most megnézheted a forgatókönyvet egészére.
Lásd leengedésekor lépjünk az alsó, van egy első blokk egy osztályban, majd töltse be a következő oldal jelenik meg, azaz csökkenti lapozzunk lefelé látjuk a következő oldalon.
Mint látható, minden rendben van, így ez a bemutató lehet teljes. Sok szerencsét, és találkozunk a következő tanulságokat.
A legtöbb IT hírek és webfejlesztés A csatorna-távirat