jQuery HTML Loader
jQuery-vel töltünk be, Link elemek href=”” tagjében elhelyezett relatív útvonalú oldalakat, valamint űrlapokat is el tudunk küldeni AJAX kéréssel egy Php feldolgozó fájlnak. Annyiban más mint egy régebben publikált változat, hogy a tartalmi oldalakat így a keresők is látják, és nem kell eseménykezeléssel tarkítani a forrást. Bár annyira nem szalonképesek a berántott HTML tartalmak, mert nem tartalmazzák a teljes HTML oldalakra vonatkozó struktúrát, de még mindig jobb, mintha egy dekát sem látnak az oldalunkból.
Volt már ilyen kezdeményezésem, Prototype és Php alapokon, de most elkészült a jQuery-vel hajtott verzió, ami kevesebb kóddal többet tud, mint az előző verziók.
Hogyan működik:
Fő HTML sablonunk az index.html fájl, ez állítja össze az oldal grafikáját és tölti be a jQuery Lib-et a navigacio.js, (itt a linkeket kezeljük a HTML tag), valamint a form.js fájlt amiben az űrlapok feldolgozását végezzük.
A navigacio.js fájlban van egy függvény a clickLoad() ami javaScript értelmező meglétekor a Link (a) elemek felett egy picit átveszi az irányítást.
Konkrétan ha relatív helyre mutat a link és Php vagy HTML fájlra, akkor megkísérli betölteni az oldalt. Ha ez nem sikeredik, akkor a pages/hu/404.html fájt tölti be Viszont ha a szerveren előzőleg egy központi hibaüzi oldalt állítottunk be, akkor ő lesz a befutó. Minden más esetben visszaadja a vezérlést, tehát a külső linkek, képek megnyitása működni fog.
A Link létrehozásakor írjuk be a href tagba a betölteni kívánt html tartalom útvonalát és fájlnevét, ahogy ezt szokás volna. Pl:
Az betöltött oldalakon is működni fog a linkelés.
Űrlapok:
Ha van JavaScript akkor AJAX kéréssel lesz elküldve az űrlap, a letölthető állomány tartalmaz egy példát a php-sources mappában. Itt is normál űrlapra kell gondolni, az action és a method attribútumokból lesz a kérés felállítva, és az input mezők értékeit fogja megkapni a Php Szkript.
Itt még annyi, ha nincs javaScript akkor az action útvonalat /php-sources/fajl.php módon kell beállítani
A tartalmi részbe kattintáskor becsatolt HTML fájlról oldalról:
Ami nem árt ha megvan egy HTML elem amire a .mist class van aggatva. pl.:
Az oldalon a head/Title tag erre fog cserélődni. Ha nincs, nem gond, marad az alapértelmezett. A fájlt többi részébe jöhet a HTML tartalom.
Fontos:
Az index.html fájlban helyezzük el az Induló oldal tartalmát. Bár lehetőség van, oldalbetöltéskor betölteni, de ez jobb ha alapból megvan.
Hol kerülnek meghívásra a függvények:
- js/navigacio.js fájlban a nem tömörített rész.
Tekintsd meg működés közben vagy töltsd le a jQuery Loadert.
hasonló bejegyzés:
0