Slik laster du inn og animerer innhold med jQuery

I denne opplæringen tar vi din gjennomsnittlige daglige nettside og forbedrer den med jQuery. Vi legger til ajax-funksjonalitet slik at innholdet lastes inn i den aktuelle beholderen i stedet for at brukeren må navigere til en annen side. Vi vil også integrere noen fantastiske animasjonseffekter.

Så først og fremst har jeg satt sammen et veldig enkelt oppsett for dette eksempelet. Her er et skjermbilde og HTML-koden vi skal bruke.

    mmm ... Ajax!       ajax ... nøtter
  Velkommen
 handle om
 portefølje
 ta kontakt med
 vilkår
 
  Velkommen!
 Tekst
 
 Tutorial av James for NETTUTS

Trinn 1

Første ting er først, gå og last ned den nyeste stabile utgivelsen av jQuery og lenke til den i dokumentet ditt:

En av de beste tingene, etter min mening, om jQuery er det enkle. Vi kan oppnå funksjonaliteten beskrevet ovenfor kombinert med imponerende effekter i bare noen få linjer med kode.

Først la oss laste inn jQuery-biblioteket og starte en funksjon når dokumentet er klart (når DOM er lastet).

$ (dokument) .ready (funksjon () // Stuff her);

Steg 2

Så hva vi vil gjøre er å gjøre det slik at når en bruker klikker på en kobling i navigasjonsmenyen på vår side, navigerer ikke nettleseren til den tilsvarende siden, men laster i stedet innholdet på den aktuelle siden på gjeldende side.

Vi ønsker å målrette koblingene i navigasjonsmenyen og kjøre en funksjon når de klikkes:

$ ('# nav li a'). klikk (funksjon () // funksjon her);

La oss oppsummere hva vi vil at denne funksjonen skal gjøres i hendelsesordre:

Fjern nåværende sideinnhold.
Få nytt sideinnhold og legg til innhold DIV.

Vi må definere hvilken side for å få dataene fra når en kobling klikkes på. Alt vi trenger å gjøre her, er å få href-attributtet til den klikkede lenken, og definere at som siden for å ringe dataene fra, pluss vi må definere oppholdssted på den forespurte siden for å trekke dataene fra - det vil vi ikke ønsker å trekke ALLE dataene, bare dataene i "innhold" div, så:

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

For å illustrere hva koden ovenfor gjør, kan vi forestille brukeren klikker på "om" -linken som lenker til "about.html" - i denne situasjonen vil denne variabelen være: 'about.html #content' - dette er variabelen som vi ' Jeg vil be om i ajax-anropet. Først skjønt må vi skape en fin effekt for det nåværende sidens innhold. I stedet for å få det til å forsvinne, skal vi bruke jQuery's "hide" -funksjon som denne:

$ ( '# Innhold') skjule ( 'rask', loadContent.);

Den ovennevnte funksjonen "skjuler #content div med rask hastighet, og når den effekten er ferdig, starter den" loadContent "-funksjonen (last det nye innholdet [via ajax]) - en funksjon som vi definerer senere (i trinn 4 ).

Trinn 3

Når det gamle innholdet forsvinner med en fantastisk effekt, vil vi ikke bare la brukeren lure på før det nye innholdet kommer (spesielt hvis de har en sakte internettforbindelse) så vi lager en liten "lasting" grafikk slik at de vet noe skjer i bakgrunnen:

$ ( '# Wrapper'). Append ('LOADING ... '); $ ( '# Load') fadeIn ( 'normal.');

Her brukes CSS til den nylig opprettede #load div:

#load display: none; posisjon: absolutt; høyre: 10px; topp: 10px; bakgrunn: url (bilder / ajax-loader.gif); bredde: 43px; høyde: 11px; tekstindeks: -9999em;

Så, som standard, er denne "last" -spenningen satt til visning: ingen, men når fadeIn-funksjonen er startet (i koden ovenfor) vil den falme inn i øverste høyre hjørne av nettstedet og vise vår animerte GIF til den er bleknet ut igjen.

Trinn 4

Så langt, når en bruker klikker på en av koblingene, vil følgende skje:

Det nåværende innholdet forsvinner med en kul effekt
En lastingsmelding vises

La oss skrive den loadContent-funksjonen som vi ringte tidligere:

funksjon loadContent () $ ('# content'). last (toLoad, ", showNewContent)

LastContent-funksjonen kaller den forespurte siden, og når det er gjort, kaller "showNewContent" -funksjonen:

funksjon showNewContent () $ ('# content'). show ('normal', hideLoader);

Denne showNewContent-funksjonen bruker jQuery's show-funksjon (som egentlig er et kjedelig navn for en veldig kul effekt) for å få det nye (forespurte) innholdet til å vises i '#content'-diven. Når den har kalt innholdet, starter den "hideLoader" -funksjonen:

funksjon hideLoader () $ ('# load'). fadeOut ('normal');

Vi må huske å "returnere falsk" på slutten av vår klikkfunksjon - dette er slik at nettleseren ikke navigerer til siden

Det burde fungere perfekt nå. Du kan se et eksempel på det her: [LINK]

Her er koden så langt:

$ (dokument) .ready (funksjon () $ ('# nav li a'). klikk (funksjon () var toLoad = $ (dette) .attr ('href') + '#content'; $ #content '). Skjul (' fast ', loadContent); $ (' # load '). fjern (); $ (' # wrapper ').LOADING ... '); $ ( '# Load') fadeIn ( 'normal.'); funksjonsbelastningsinnhold () $ ('# innhold'). laste (toLoad, ", showNewContent ()) funksjon showNewContent () $ ('# innhold'). hideLoader () $ ('# load'). fadeOut ('normal'); return false;););

Trinn 5

Du kan stoppe der, men hvis du er bekymret for brukervennlighet (som du burde være), er det viktig å gjøre litt mer arbeid. Problemet med vår nåværende løsning er at den ignorerer nettadressen. Hva om en bruker ønsket å lenke til en av sidene? - Det er ingen måte for dem å gjøre det fordi nettadressen er alltid den samme.

Så en bedre måte å gjøre dette på er å bruke "hash" -verdien i nettadressen for å indikere hva brukeren ser på. Så hvis brukeren ser på "om" innholdet, kan nettadressen være: 'www.website.com/#about'. Vi trenger bare å legge til en linje med kode til "klikk" -funksjonen for hash som skal legges til nettadressen når brukeren klikker på en navigasjonslink:

window.location.hash = $ (dette) .attr ('href'). substr (0, $ (dette) .attr ('href'). lengde-5);

Koden ovenfor endrer i utgangspunktet URL-hashverdien til verdien av den klikkte lenkenes "href" -attributt (minus ".html" -utvidelsen. Så når en bruker klikker på "hjem" -linken (href = index.html), så har hash verdien vil lese '# index'.

Vi vil også gjøre det mulig for brukeren å skrive inn nettadressen og få servert den riktige siden. For å gjøre dette, kontrollerer vi hashverdien når siden laster og endrer innholdet i henhold til dette:

var hash = window.location.hash.substr (1); var href = $ ('# nav li a'). hver (funksjon () var href = $ (dette) .attr ('href'); hvis (hash == href.substr (0, href.length-5 )) var toLoad = hash + '. html #content'; $ ('# innhold'). last (toLoad));

Med dette inkludert her er alt javascript koden kreves: (pluss jQuery-biblioteket)

$ (dokument) .ready (funksjon () // Kontroller hashverdi i URL var hash = window.location.hash.substr (1); var href = $ ('# nav li a'). hver (funksjon ) var hL = = hhv. klikk på (funksjon ) var toLoad = $ (dette) .attr ('href') + '#content'; $ ('#content'). skjul ('fast', loadContent); $ ('# load'). fjern (); $ ('# wrapper').LOADING ... '); $ ( '# Load') fadeIn ( 'normal.'); window.location.hash = $ (dette) .attr ('href'). substr (0, $ (dette) .attr ('href'). lengde-5); funksjonsbelastningsinnhold () $ ('# innhold'). laste (toLoad, ", showNewContent ()) funksjon showNewContent () $ ('# innhold'). hideLoader () $ ('# load'). fadeOut ('normal'); return false;););

Ferdig ...

Den gode tingen om denne metoden er at den er tilpassbar og kan brukes på et nettsted i løpet av få minutter. Det er helt diskret og nettsiden vil fungere normalt hvis brukeren har JS deaktivert.

Se det endelige arbeidseksemplet

Last ned HTML, JS, CSS og bilder

Kode