Share
In deze tutorial nemen we je gemiddelde dagelijkse website en verbeteren deze met jQuery. We zullen ajax-functionaliteit toevoegen zodat de inhoud in de relevante container wordt geladen in plaats van dat de gebruiker naar een andere pagina moet navigeren. We zullen ook enkele geweldige animatie-effecten integreren.
Dus eerst en vooral heb ik een heel eenvoudige lay-out voor dit voorbeeld samengesteld. Hier is een screenshot en de HTML-code die we zullen gebruiken.
mmm ... Ajax! ajax ... nettuts
- Welkom
- wat betreft
- portefeuille
- contact
- termen
Welkom!
Tekst
Tutorial door James voor NETTUTS
Eerste ding eerst, ga en download de laatste stabiele versie van jQuery en koppel ernaar in je document:
Een van de beste dingen, naar mijn mening, is jQuery's eenvoud. We kunnen de hierboven beschreven functionaliteit combineren met verbluffende effecten in slechts enkele regels code.
Laten we eerst de jQuery-bibliotheek laden en een functie starten wanneer het document gereed is (wanneer de DOM is geladen).
$ (document) .ready (function () // Dingen hier);
Dus wat we willen doen is ervoor zorgen dat wanneer een gebruiker klikt op een link in het navigatiemenu op onze pagina, de browser niet naar de overeenkomstige pagina navigeert, maar in plaats daarvan de inhoud van die pagina binnen de huidige pagina laadt.
We willen de links in het navigatiemenu targeten en een functie uitvoeren wanneer erop wordt geklikt:
Accentsconagua
$ ('# nav li a'). klik (functie () // functie hier); Laten we samenvatten wat we willen dat deze functie doet in de volgorde van gebeurtenissen:
We moeten definiëren op welke pagina de gegevens moeten worden opgehaald wanneer op een koppeling wordt geklikt. Het enige wat we hier moeten doen, is het 'href'-attribuut van de geklikte link verkrijgen en dat definiëren als de pagina om de gegevens te callen, plus we moeten de whereabouts op de gevraagde pagina definiëren om de gegevens eruit te halen, dwz we doen dit niet wil ALLE gegevens verzamelen, alleen de gegevens binnen de 'content' div, dus:
var toLoad = $ (this) .attr ('href') + '#content'; Om te illustreren wat de bovenstaande code doet laten we ons voorstellen dat de gebruiker klikt op de 'about'-link die linkt naar' about.html '- in deze situatie zou deze variabele zijn:' about.html #content '- dit is de variabele die we' Ik verzoek in de ajax-oproep. Maar eerst moeten we een leuk effect creëren voor de huidige pagina-inhoud. In plaats van het gewoon te laten verdwijnen, gebruiken we de 'hide'-functie van jQuery als volgt:
$ ( '# Content') te verbergen ( 'snel', loadContent).;
De bovenstaande functie 'verbergt' de #inhoud-div met een hoge snelheid en zodra dat effect is voltooid, wordt de functie "loadContent" gestart (laad de nieuwe inhoud [via ajax]) - een functie die we later zullen definiëren (in stap 4 ).
Zodra de oude inhoud met een geweldig effect verdwijnt, willen we niet dat de gebruiker zich afvraagt voordat de nieuwe inhoud binnenkomt (vooral als ze een trage internetverbinding hebben) dus we zullen een beetje "inladen" maken zodat ze weten er gebeurt iets op de achtergrond:
$ ( '# Wrapper'). Toevoegen ('BEZIG MET LADEN… '); $ ( '# Load') FadeIn ( 'gewone').; Hier is de CSS toegepast op de nieuw gemaakte #load div:
#load display: none; positie: absoluut; rechts: 10px; top: 10px; achtergrond: url (images / ajax-loader.gif); breedte: 43px; hoogte: 11 px; text-indent: -9999em;
Dus deze 'load'-spanwijdte wordt standaard ingesteld om te worden weergegeven: none, maar wanneer de fadeIn-functie wordt gestart (in de bovenstaande code), verdwijnt deze in de rechterbovenhoek van de site en wordt onze geanimeerde GIF weergegeven totdat deze wordt weergegeven vervaagde weer.
Tot nu toe, wanneer een gebruiker op een van de links klikt, gebeurt het volgende:
Laten we nu de loadContent-functie schrijven die we eerder noemden:
functie loadContent () $ ('# content'). load (toLoad, ", showNewContent) De functie loadContent roept de gevraagde pagina aan en roept vervolgens de functie 'showNewContent' als dit is gebeurd:
functie showNewContent () $ ('# content'). show ('normaal', hideLoader); Deze showNewContent-functie maakt gebruik van de showfunctie van jQuery (wat eigenlijk een erg saaie naam is voor een erg cool effect) om de nieuwe (aangevraagde) content weer te geven in de divine '#content'. Nadat het de inhoud heeft aangeroepen, wordt de functie 'hideLoader' gestart:
function hideLoader () $ ('# load'). fadeOut ('normaal'); We moeten niet vergeten om "false retourneren" aan het einde van onze klikfunctie - dit is zodat de browser niet naar de pagina navigeert
Het zou nu perfect moeten werken. Je kunt hier een voorbeeld van zien: [LINK]
Hier is de code tot nu toe:
$ (document) .ready (function () $ ('# nav li a'). klik (function () var toLoad = $ (this) .attr ('href') + '#content'; $ (' #content '). hide (' fast ', loadContent); $ (' # load '). remove (); $ (' # wrapper '). append ('BEZIG MET LADEN… '); $ ( '# Load') FadeIn ( 'gewone').; functie loadContent () $ ('# content'). load (toLoad, ", showNewContent ()) show showNewContent () $ ('# content'). show ('normaal', hideLoader ()); functie hideLoader () $ ('# load'). fadeOut ('normaal'); return false;);); Je zou daar kunnen stoppen, maar als je je zorgen maakt over bruikbaarheid (wat je zou moeten zijn), is het belangrijk om wat meer werk te doen. Het probleem met onze huidige oplossing is dat het de URL verwaarloost. Wat als een gebruiker naar een van de 'pagina's' wilde linken? - Er is geen manier voor hen om het te doen omdat de URL altijd hetzelfde is.
Dus, een betere manier om dit te doen zou zijn om de 'hash'-waarde in de URL te gebruiken om aan te geven wat de gebruiker bekijkt. Dus als de gebruiker de 'about'-inhoud bekijkt, kan de URL zijn:' www.website.com/#about '. We hoeven slechts één regel code aan de 'klik'-functie toe te voegen om de hash aan de URL toe te voegen wanneer de gebruiker op een navigatielink klikt:
window.location.hash = $ (this) .attr ('href'). substr (0, $ (this) .attr ('href'). length-5); De bovenstaande code verandert in principe de URL-hash-waarde in de waarde van het kenmerk 'href' van de aangekoppelde link (minus de extensie '.html'. Dus wanneer een gebruiker op de koppeling 'home' klikt (href = index.html), wordt de hash gebruikt waarde zal '#index' lezen.
We willen het ook mogelijk maken voor de gebruiker om de URL in te typen en de juiste pagina te ontvangen. Hiertoe controleren we de hash-waarde wanneer de pagina wordt geladen en de inhoud dienovereenkomstig wordt gewijzigd:
var hash = window.location.hash.substr (1); var href = $ ('# nav li a'). each (function () var href = $ (this) .attr ('href'); if (hash == href.substr (0, href.length-5 )) var toLoad = hash + '. html #content'; $ ('# content'). load (toLoad)); Hierin inbegrepen is alle vereiste JavaScript-code: (plus de jQuery-bibliotheek)
$ (document) .ready (function () // Controleer naar hash-waarde in URL var hash = window.location.hash.substr (1); var href = $ ('# nav li a'). each (function ( ) var href = $ (this) .attr ('href'); if (hash == href.substr (0, href.length-5)) var toLoad = hash + '. html #content'; $ (' #content '). load (toLoad)); $ (' # nav li a '). click (function () var toLoad = $ (this) .attr (' href ') +' #content '; $ ('#content'). hide ('fast', loadContent); $ ('# load'). remove (); $ ('# wrapper'). append ('BEZIG MET LADEN… '); $ ( '# Load') FadeIn ( 'gewone').; window.location.hash = $ (this) .attr ('href'). substr (0, $ (this) .attr ('href'). length-5); functie loadContent () $ ('# content'). load (toLoad, ", showNewContent ()) show showNewContent () $ ('# content'). show ('normaal', hideLoader ()); functie hideLoader () $ ('# load'). fadeOut ('normaal'); return false;);); Het mooie van deze methode is dat deze aanpasbaar is en binnen enkele minuten op een site kan worden toegepast. Het is volledig onopvallend en de website werkt normaal als de gebruiker JS heeft uitgeschakeld.
Bekijk het definitieve werkvoorbeeld
Download de HTML, JS, CSS & afbeeldingen
