Så här laddar du in och animerar innehåll med jQuery

I denna handledning tar vi din genomsnittliga vardagliga webbplats och förbättrar den med jQuery. Vi lägger till ajax-funktionalitet så att innehållet laddas in i relevant behållare istället för att användaren måste navigera till en annan sida. Vi kommer också att integrera några fantastiska animationseffekter.

Så först och främst har jag lagt en mycket enkel layout för detta exempel. Här är en skärmdump och HTML-koden vi ska använda.

    mmm ... Ajax!       ajax ... nät
  Välkommen
 handla om
 portfölj
 kontakta
 villkor
 
  Välkommen!
 Text
 
 Handledning av James för NETTUTS

Steg 1

Första är först, gå och hämta den senaste stabila versionen av jQuery och länka till den i ditt dokument:

En av de bästa sakerna, enligt min mening, om jQuery är det enkelt. Vi kan uppnå den ovan beskrivna funktionaliteten tillsammans med fantastiska effekter i endast några få rader kod.

Låt oss först ladda jQuery-biblioteket och initiera en funktion när dokumentet är klart (när DOM är laddat).

$ (dokument) .ready (funktion () // Stuff här);

Steg 2

Så vad vi vill göra är att göra det så att när en användare klickar på en länk i navigeringsmenyn på vår sida navigerar inte webbläsaren till motsvarande sida utan laddar istället innehållet på den sidan på den aktuella sidan.

Vi vill rikta in länkarna i navigeringsmenyn och köra en funktion när de klickar:

$ ('# nav li a'). klicka (funktion () // funktion här);

Låt oss sammanfatta vad vi vill att den här funktionen ska göra i händelseorder:

Ta bort aktuellt sidinnehåll.
Få nytt sidinnehåll och lägg till innehåll DIV.

Vi måste definiera vilken sida för att få data från när en länk är klickad på. Allt vi behöver göra här är att få href-attributet för den klickade länken och definiera det som sidan för att ringa upp data från, plus vi måste definiera varifrån på den begärda sidan för att dra data från - det vill vi inte göra vill dra ALLA data, bara data inom "content" div, så:

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

För att illustrera vad ovanstående kod låter oss anta att användaren klickar på länken "om" som länkar till "about.html" - i denna situation skulle denna variabel vara: "about.html #content" - det här är variabeln som vi " Jag begär i ajax-samtalet. För det första måste vi skapa en bra effekt för det aktuella sidinnehållet. Istället för att det bara ska försvinna kommer vi att använda jQuery's "hide" -funktion så här:

$ (# Innehåll) gömma ( 'snabb', loadContent).

Ovanstående funktion "döljer" #content div med snabb hastighet, och när den effekten slutförts initierar den sedan "loadContent" -funktionen (ladda det nya innehållet [via ajax]) - en funktion som vi definierar senare (i steg 4 ).

Steg 3

När det gamla innehållet försvinner med en fantastisk effekt vill vi inte bara låta användaren undra innan det nya innehållet anländer (speciellt om de har en långsam internetuppkoppling) så vi skapar lite "laddnings" grafik så att de vet något händer i bakgrunden:

$ (# Wrapper "). Bifoga ('LÄSER IN… '); $ (# Belastning) FadeIn ( 'normal').

Här tillämpas CSS på den nyligen skapade #load div:

#load display: none; position: absolut; höger: 10px; topp: 10px; bakgrund: url (bilder / ajax-loader.gif); bredd: 43px; höjd: 11px; text-streck: -9999em;

Så som standard är denna "last" -panel inställd att visas: ingen, men när fadeIn-funktionen initieras (i koden ovan) kommer den att blekna in i det högra högra hörnet av webbplatsen och visa vår animerade GIF tills den är bleknade ut igen.

Steg 4

Hittills, när en användare klickar på en av länkarna kommer följande att hända:

Det aktuella innehållet försvinner med en cool effekt
Ett laddningsmeddelande visas

Nu ska vi skriva den loadContent-funktionen som vi ringde tidigare:

funktion loadContent () $ ('# content'). ladda (toLoad, ", showNewContent)

Funktionen loadContent kallar den efterfrågade sidan, så kallas funktionen "showNewContent" när den är klar.

funktion showNewContent () $ ('# content'). visa ('normal', hideLoader);

Den här showNewContent-funktionen använder jQuery's show-funktion (vilket är ett mycket tråkigt namn för en väldigt cool effekt) för att få det nya (begärda) innehållet att dyka upp inom "#content" div. När den har ringt upp innehållet initierar funktionen "hideLoader":

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

Vi måste komma ihåg att "returnera falskt" i slutet av vår klickfunktion - det här är så webbläsaren navigerar inte till sidan

Det borde fungera perfekt nu. Du kan se ett exempel på det här: [LINK]

Här är koden hittills:

$ (dokument) .ready (funktion () $ ('# nav li a'). klicka (funktion () var toLoad = $ (detta) .attr ('href') + '#content'; $ #content '). hide (' fast ', loadContent); $ (' # load '). ta bort (); $ (' # wrapper ').LÄSER IN… '); $ (# Belastning) FadeIn ( 'normal'). funktionen loadContent () $ ('# content'). Laddar (toLoad, ", showNewContent ()) funktion showNewContent () $ ('# content'). hideLoader () $ ('# load'). fadeOut ('normal'); returnera false;););

Steg 5

Du kan sluta där men om du är oroad över användbarhet (vilket du borde vara) är det viktigt att göra lite mer arbete. Problemet med vår nuvarande lösning är att den ignorerar webbadressen. Vad händer om en användare vill länka till en av sidorna? - Det finns inget sätt för dem att göra det eftersom webbadressen alltid är densamma.

Så ett bättre sätt att göra detta skulle vara att använda "hash" -värdet i URL-adressen för att ange vad användaren tittar på. Så om användaren tittar på "om" innehållet kan URL: n vara: "www.website.com/#about". Vi behöver bara lägga till en rad kod till "klicka" -funktionen för att hash ska läggas till URL-adressen när användaren klickar på en navigeringslänk:

window.location.hash = $ (detta) .attr ('href'). substr (0, $ (detta) .attr ('href'). längd-5);

Koden ovan ändrar i grunden URL-hash-värdet till värdet av den klickade länkens "href" -attribut (minus ".html" -tillägget. Så när en användare klickar på länken "hem" (href = index.html), har haschen värdet läser "#index".

Vi vill också göra det möjligt för användaren att skriva in webbadressen och få serverad rätt sida. För att göra detta kontrollerar vi hashvärdet när sidan laddar och ändrar innehållet i enlighet med följande:

var hash = window.location.hash.substr (1); var (href = $ ('# nav li a'). Varje (funktion () var href = $ (detta) .attr ('href'); om (hash == href.substr (0, href.length-5 )) var toLoad = hash + '. html #content'; $ ('# innehåll'). last (toLoad));

Med detta ingår här krävs all javascript-kod: (plus jQuery-biblioteket)

$ (dokument) .ready (funktion () // Kontrollera att hashvärdet i URL var hash = window.location.hash.substr (1); var href = $ ('# nav li a'). ) var href = $ (detta) .attr ('href'); om (hash == href.substr (0, href.length-5)) var toLoad = hash + '. html #content'; $ (' klick (funktion () var toLoad = $ (detta) .attr ('href') + '#content'; $ ('#content'). hide ('fast', loadContent); $ ('# load'). ta bort (); $ ('# wrapper').LÄSER IN… '); $ (# Belastning) FadeIn ( 'normal'). window.location.hash = $ (detta) .attr ('href'). substr (0, $ (detta) .attr ('href'). längd-5); funktionen loadContent () $ ('# content'). Laddar (toLoad, ", showNewContent ()) funktion showNewContent () $ ('# content'). hideLoader () $ ('# load'). fadeOut ('normal'); returnera false;););

Färdiga…

Det fantastiska med denna metod är att det är anpassningsbart och kan appliceras på en webbplats inom några minuter. Det är helt diskreta och webbplatsen fungerar normalt om användaren har JS inaktiverad.

Visa det slutliga arbetsexemplet

Hämta HTML, JS, CSS och bilder

Koda