In acest tutorial, vom lua un site mediu normal și să-l îmbunătățească prin intermediul jQuery. Vom adăuga AJAX funcționalitate care va permite încărcarea conținutului dinamic de conținut. fără a reîncărca pagina, într-un recipient adecvat. În loc de forțând utilizatorul să se mute la o altă pagină. Și, de asemenea, să integreze unele efecte de animație uimitoare.
De exemplu, am construit mai întâi un aspect foarte simplu. Iată o captură de ecran și HTML de cod pe care le vom folosi.
La început, du-te și descărcați cea mai recentă versiune stabilă de jQuery și adăugați un link către acesta în documentul:
Cred că una dintre cele mai bune caracteristici ale jQuery - este simplitatea. Este posibil pentru a realiza sarcina, cuplat cu efecte uimitoare în doar câteva linii de cod.
În primul rând, să încărcați biblioteca jQuery și funcția începe atunci când un document este pregătit (când DOM este deja încărcată).
Trebuie să ne asigurăm că, atunci când faceți clic pe un link din meniul de navigare pe această pagină, browser-ul nu face trecerea la pagina corespunzătoare, cât și dinamic încărcați conținutul acestei pagini în aspectul nostru, fără a fi necesară o repornire.
Pentru a face acest lucru trebuie să definim link-urile din meniul de navigare și începe această funcție făcând clic pe ele:
Să sublinia ceea ce trebuie să facem în această funcție, în ordine.
Ștergeți conținutul paginii curente.
Ia-o nouă pagină de conținut și adăugați conținutul DIV.
Pentru a demonstra că a face codul de mai sus, să presupunem că un utilizator face clic pe link-ul „despre“. care este asociat cu pagina „about.html“ - variabilă va fi în această situație: „about.html #content“ - și aceasta este variabila pe care o vom cere simplu apel. Cu toate acestea, primul lucru pe care începem - va crea un efect de frumos pentru conținutul paginii curente. În schimb, dispare pur și simplu, vom folosi jQuery «ascunde»:
Această funcție rapid „piei brute» #content div, și o dată efectul se încheie acțiunea sa, este, la rândul său, inițiază funcția „loadContent» (nouă descărcare de conținut [prin ajax]) - o funcție pe care o vom defini mai târziu (în pasul 4 ).
Odată ce conținutul vechi dispare de efectul uimitor, nu putem pleca pur și simplu oameni care așteaptă până când conținutul nou (mai ales în cazul în care acestea au o conexiune lentă la Internet), așa că vom crea un pic de „încărcare“ grafic, astfel încât utilizatorii să știe că ceva Acesta are loc în fundal:
Aici este CSS, este atașat la div #load nou creat:
Astfel, o zona care ar trebui să conțină animație de pornire, nu este afișat inițial. Mai mult, în funcția de inițializare fadeIn () (a se vedea. În codul de mai sus), începe să apară în colțul din dreapta sus al site-ului și arată un GIF animat, până după ceva timp dispare de pe ecran.
După ceva timp, atunci când utilizatorul face clic pe unul dintre link-urile vor începe să apară după cum urmează:
Apare un mesaj la pornire.
Acum să scrie chiar conținutul funcției de descărcare, pe care am discutat mai devreme:
Funcția loadContent solicită pagina solicitată, iar când acest lucru se face, numește „showNewContent“ (care arată noul conținut):
Această caracteristică - showNewContent - utilizări (este numele prea plictisitor este de fapt pentru o astfel de mare efect) functia show () jQuery, astfel încât noul conținut este marcat elementul eticheta „#content“ apare pe pagina. Odată induse, inițiază funcția 'hideLoader' (Fade Out):
Trebuie să ne amintim că funcția trebuie să returneze o procesare clică «fals», browser-ul nu a trece la altă pagină.
Acum, totul ar trebui să funcționeze bine. Un exemplu în acest sens poate fi vazut aici: [LINK]
Codul de mai sus se modifică valoarea URL-ul la valorile prin apăsarea „href“ atributul (cu excepția „.html“ prelungire). Prin urmare, atunci când utilizatorul face clic pe link-ul „acasă“ (href = index.html), valoarea hash va apărea ca „#INDEX“.
Sfârșitul de ...
Pe această problemă este dedicat crearea de descărcare de conținut dinamic, fără a reîncărca pagina, instrumente AJAX și jQuery, finalizat.
Tradus și editat de: Victor Horn și Andrew Bernatsky. Echipa webformyself.
Cele mai multe știri IT si dezvoltare web pe canalul nostru-Telegram
fișier nu există, eliminate ...
Vreau totul făcut pentru mine, și am stat la mama în genunchi și supt sisyu atât chtoli?