Cum se încarcă și anima conținutul cu jQuery

În acest tutorial vom lua site-ul mediu de zi cu zi și consolidându-l cu jQuery. Vom adăuga funcționalitatea ajax astfel încât conținutul să se încarce în containerul respectiv, în loc să fie necesar ca utilizatorul să navigheze către o altă pagină. Vom integra, de asemenea, unele efecte minunate de animație.

Așadar, în primul rând, am realizat un aspect foarte simplu pentru acest exemplu. Iată o captură de ecran și codul HTML pe care îl vom folosi.

    mmm ... Ajax!       ajax ... nettuts
  Bine ati venit
 despre
 portofoliul
 a lua legatura
 termeni
 
  Bine ati venit!
 Text
 
 Tutorial de James pentru NETTUTS

Pasul 1

Primul lucru este primul, du-te și descărcați ultima versiune stabilă a jQuery și legați-o cu ea în documentul dvs.:

Unul dintre cele mai bune lucruri, în opinia mea, despre jQuery este simplitatea. Putem realiza funcționalitatea descrisă mai sus, împreună cu efecte uimitoare în doar câteva rânduri de cod.

Mai întâi, să încărcăm biblioteca jQuery și să inițiem o funcție când documentul este gata (când DOM este încărcat).

$ (document) .ready (funcția () // Stuff here);

Pasul 2

Deci, ceea ce dorim să facem este ca atunci când un utilizator face clic pe un link din meniul de navigare din pagina noastră browserul nu navighează către pagina corespunzătoare, ci încarcă conținutul acelei pagini în pagina curentă.

Vrem să direcționăm linkurile din meniul de navigare și să executăm o funcție când le faceți clic pe:

$ ('# nav li a') faceți clic pe (funcția () // funcția aici);

Să rezumăm ceea ce dorim ca această funcție să facă în ordinea evenimentului:

Eliminați conținutul paginii actuale.
Obțineți conținut nou al paginii și adăugați conținut DIV.

Trebuie să definim ce pagină să obținem datele de la momentul când se face clic pe un link. Tot ceea ce trebuie să facem aici este să obținem atributul "href" al link-ului dat și să definim ca fiind pagina de apelare a datelor, plus trebuie să definim locul de pe pagina solicitată pentru a trage datele - adică Noi nu doriți să trageți TOATE datele, doar datele din div "conținutul", astfel:

var toLoad = $ (acest) .attr ('href') + '#content';

Pentru a ilustra ceea ce face codul de mai sus, să presupunem că utilizatorul face clic pe linkul "despre" care se leagă de "about.html" - în această situație, această variabilă ar fi: "about.html #content" Voi cere în apelul ajax. În primul rând, trebuie să creați un efect frumos pentru conținutul actual al paginii. În loc să o facem să dispară, vom folosi funcția "ascunde" a lui jQuery, astfel:

$ ( '# Conținut') ascunde ( 'rapid', loadContent).;

Funcția de mai sus "ascunde" divulța #content cu viteză rapidă și odată ce efectul a fost terminat, se inițiază funcția "loadContent" (încărcați noul conținut [prin ajax]) - o funcție pe care o vom defini mai târziu (la pasul 4 ).

Pasul 3

Odată ce vechiul conținut dispare cu un efect minunat, nu vrem să lăsăm utilizatorul să se întrebe înainte ca noul conținut să sosească (mai ales dacă are o conexiune lentă la internet), așa că vom crea un pic de "încărcare" ceva se întâmplă în fundal:

$ ( '# Înveliș'). Adăugați (“SE INCARCA… „); $ ( '# De încărcare') fadeIn ( 'normal').;

Aici este CSS aplicat pentru nou creat #load div:

#load display: none; poziția: absolută; dreapta: 10px; top: 10px; fundal: url (imagini / ajax-loader.gif); lățime: 43px; înălțime: 11px; text-liniuță: -9999em;

Deci, în mod implicit, acest interval de încărcare este setat să afișeze: none, dar când este inițiată funcția fadeIn (în codul de mai sus), va dispărea în colțul din dreapta sus al site-ului și va arăta animația GIF până când este a scăpat din nou.

Pasul 4

Până în prezent, când un utilizator face clic pe unul dintre link-uri, se vor întâmpla următoarele:

Conținutul curent dispare cu un efect rece
Apare un mesaj de încărcare

Acum, să scriem acea funcție loadContent pe care am apelat-o mai devreme:

funcția loadContent () $ ('# content') încărcați (toLoad, ", showNewContent)

Funcția loadContent apelează pagina solicitată, apoi, odată terminată, apelează funcția 'showNewContent':

funcția showNewContent () $ ('# content') arată ('normal', hideLoader);

Această funcție showNewContent utilizează funcția de afișare a jQuery (care este de fapt un nume foarte plictisitor pentru un efect foarte cool) pentru a face ca noul conținut (solicitat) să apară în div "#content" div. După ce a sunat conținutul, inițiază funcția "hideLoader":

funcția hideLoader () $ ('încărcare'). fadeOut ('normal');

Trebuie să ne amintim să "întoarcem falsul" la sfârșitul funcției noastre de clic - așa că browserul nu navighează spre pagină

Ar trebui să funcționeze perfect acum. Puteți vedea un exemplu aici: [LINK]

Iată codul de până acum:

$ (') () () () () () () () #content ') ascunde (' rapid ', loadContent); $ (' #load ') remove (); $ ('SE INCARCA… „); $ ( '# De încărcare') fadeIn ( 'normal').; ()) funcția loadNewContent () $ ('# content') arată (funcția 'normal', hideLoader ()); hideLoader () $ ('încărcare') fadeOut ('normal'); return false;););

Pasul 5

Ai putea să te oprești acolo, dar dacă ești îngrijorat de utilitatea (care ar trebui să fii) este important să faci puțin mai multă muncă. Problema cu soluția noastră actuală este faptul că neglijează adresa URL. Ce se întâmplă dacă un utilizator dorea să se conecteze la una dintre "paginile"? - Nu există nici o cale de a face acest lucru, deoarece adresa URL este întotdeauna aceeași.

Deci, o modalitate mai bună de a face acest lucru ar fi să utilizați valoarea "hash" în URL pentru a indica ce vizionează utilizatorul. Deci, dacă utilizatorul vizualizează conținutul "despre", atunci URL-ul ar putea fi: "www.website.com/#about". Trebuie doar să adăugăm o singură linie de cod funcției "clic" pentru ca hash-ul să fie adăugat la adresa URL ori de câte ori utilizatorul face clic pe un link de navigare:

window.location.hash = $ (acest) .attr ('href'). substr (0, $ (acest) .attr ('href').

Codul de mai sus modifică în mod esențial valoarea hash-ului URL-ului la valoarea atributului "href" al clicului de legătură (minus extensia ".html".) Atunci când un utilizator dă clic pe linkul "home" (href = index.html) valoarea va citi "#index".

De asemenea, vrem să permitem utilizatorului să introducă URL-ul și să servească pagina corectă. Pentru a face acest lucru, verificăm valoarea hash când pagina se încarcă și modifică conținutul în consecință:

var hash = fereastră.locație.hash.substr (1); var (href), dacă (hash == href.substr (0, href.length-5 (var)) )) var toLoad = hash + '. html #content'; $ ('# content') încărcare (toLoad));

Cu acest lucru este inclus aici codul javascript necesar: (plus biblioteca jQuery)

$ (document) .ready (functie () // Verifica valoarea hash in URL var hash = window.location.hash.substr (1); var href = $ (' ) var href = $ (acest) .attr ('href'); if (hash == href.substr (0, href.length-5)) var toLoad = #content '; $ ())); $ ()); $ (' # nav li a '). ('# content') ascunde ('fast', loadContent); $ ('#load') remove (); $ ('SE INCARCA… „); $ ( '# De încărcare') fadeIn ( 'normal').; window.location.hash = $ (acest) .attr ('href'). substr (0, $ (acest) .attr ('href'). ()) funcția loadNewContent () $ ('# content') arată (funcția 'normal', hideLoader ()); hideLoader () $ ('încărcare') fadeOut ('normal'); return false;););

Terminat…

Lucrul minunat în legătură cu această metodă este că este adaptabil și poate fi aplicat pe un site în câteva minute. Este complet discret și site-ul va funcționa normal dacă utilizatorul are JS dezactivat.

Vedeți exemplul final de lucru

Descărcați HTML, JS, CSS & Imagini

Cod