Come caricare e animare il contenuto con jQuery

In questo tutorial prenderemo il tuo sito web medio di tutti i giorni e lo miglioreremo con jQuery. Aggiungeremo una funzionalità ajax in modo che il contenuto venga caricato nel contenitore pertinente anziché che l'utente debba navigare verso un'altra pagina. Integreremo anche fantastici effetti di animazione.

Quindi, prima di tutto, ho messo insieme un layout molto semplice per questo esempio. Ecco uno screenshot e il codice HTML che useremo.

    mmm ... Ajax!       ajax ... nettuts
  benvenuto
 di
 portafoglio
 contatto
 condizioni
 
  benvenuto!
 Testo
 
 Tutorial di James per NETTUTS

Passo 1

Per prima cosa, vai e scarica l'ultima versione stabile di jQuery e collegala ad essa nel tuo documento:

Una delle cose migliori, secondo me, su jQuery è la semplicità. Possiamo ottenere la funzionalità sopra descritta accoppiata con effetti sorprendenti solo in alcune righe di codice.

Innanzitutto cariciamo la libreria jQuery e iniziamo una funzione quando il documento è pronto (quando il DOM è caricato).

$ (document) .ready (function () // Stuff here);

Passo 2

Quindi, quello che vogliamo fare è fare in modo che quando un utente fa clic su un collegamento nel menu di navigazione sulla nostra pagina, il browser non naviga alla pagina corrispondente, ma carica il contenuto di quella pagina all'interno della pagina corrente.

Vogliamo indirizzare i collegamenti all'interno del menu di navigazione ed eseguire una funzione quando vengono cliccati:

$ ('# nav li a'). click (function () // function here);

Riassumiamo cosa vogliamo che questa funzione faccia nell'ordine dell'evento:

Rimuovi il contenuto della pagina corrente.
Ottieni nuovi contenuti di pagina e aggiungi al contenuto DIV.

Dobbiamo definire quale pagina per ottenere i dati da quando viene fatto clic su un collegamento. Tutto quello che dobbiamo fare qui è ottenere l'attributo 'href' del link cliccato e definirlo come la pagina da cui chiamare i dati, oltre a definire la posizione della pagina richiesta per estrarre i dati da - cioè non vuoi tirare TUTTI i dati, solo i dati all'interno del div "content", quindi:

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

Per illustrare ciò che il codice sopra fa immaginiamo che l'utente clicchi sul link "about" che collega a "about.html" - in questa situazione questa variabile sarebbe: "about.html #content" - questa è la variabile che noi ll richiesta nella chiamata Ajax. Prima però, dobbiamo creare un buon effetto per il contenuto della pagina corrente. Invece di farlo scomparire, useremo la funzione "nascondi" di jQuery in questo modo:

$ ( '# Content') nascondere ( 'veloce', LoadContent).;

La funzione sopra 'nasconde' il div #content ad una velocità elevata, e una volta che l'effetto ha finito, avvia la funzione "loadContent" (carica il nuovo contenuto [via ajax]) - una funzione che definiremo più avanti (nella fase 4 ).

Passaggio 3

Una volta che il vecchio contenuto scompare con un effetto fantastico, non vogliamo semplicemente lasciare l'utente a chiedersi prima che arrivi il nuovo contenuto (specialmente se hanno una connessione internet lenta) quindi creeremo un po 'di "caricamento" grafico in modo che sappiano qualcosa sta accadendo in background:

$ ( '# Wrapper'). Append ('CARICAMENTO IN CORSO… '); $ ( '# Load') fadeIn ( 'normale').;

Ecco il codice CSS applicato al div #load appena creato:

#load display: none; posizione: assoluta; a destra: 10px; inizio: 10px; background: url (images / ajax-loader.gif); larghezza: 43 px; altezza: 11px; text-indent: -9999em;

Quindi, per impostazione predefinita, questo span 'load' è impostato per la visualizzazione: none, ma quando viene avviata la funzione fadeIn (nel codice sopra) si dissolvera 'nell'angolo in alto a destra del sito e mostra la nostra GIF animata fino a che non viene svanì di nuovo.

Passaggio 4

Finora, quando un utente fa clic su uno dei collegamenti, si verificherà quanto segue:

Il contenuto attuale scompare con un effetto interessante
Viene visualizzato un messaggio di caricamento

Ora, scriviamo la funzione loadContent che abbiamo chiamato prima:

function loadContent () $ ('# content'). load (toLoad, ", showNewContent)

La funzione loadContent chiama la pagina richiesta, quindi, una volta eseguita, chiama la funzione 'showNewContent':

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

Questa funzione showNewContent utilizza la funzione show di jQuery (che in realtà è un nome molto noioso per un effetto molto interessante) per far apparire il nuovo contenuto (richiesto) all'interno del div '#content'. Una volta chiamato il contenuto, avvia la funzione "hideLoader":

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

Dobbiamo ricordare di "restituire false" alla fine della nostra funzione di clic: è così che il browser non naviga verso la pagina

Dovrebbe funzionare perfettamente ora. Puoi vedere un esempio di questo qui: [LINK]

Ecco il codice fino ad ora:

$ (document) .ready (function () $ ('# nav li a'). click (function () var toLoad = $ (this) .attr ('href') + '#content'; $ (' #content '). hide (' veloce ', loadContent); $ (' # load '). remove (); $ (' # wrapper '). append ('CARICAMENTO IN CORSO… '); $ ( '# Load') fadeIn ( 'normale').; function loadContent () $ ('# content'). load (toLoad, ", showNewContent ()) function showNewContent () $ ('# content'). show ('normal', hideLoader ()); function hideLoader () $ ('# load'). fadeOut ('normal'); return false;););

Passaggio 5

Potresti fermarti lì, ma se sei preoccupato dell'usabilità (che dovresti essere), è importante fare un po 'più di lavoro. Il problema con la nostra attuale soluzione è che trascura l'URL. Cosa accadrebbe se un utente volesse collegarsi a una delle "pagine"? - Non c'è modo per loro di farlo perché l'URL è sempre lo stesso.

Quindi, un modo migliore per farlo sarebbe utilizzare il valore "hash" nell'URL per indicare ciò che l'utente sta visualizzando. Pertanto, se l'utente sta visualizzando il contenuto "circa", l'URL potrebbe essere: "www.website.com/#about". Abbiamo solo bisogno di aggiungere una riga di codice alla funzione "clic" affinché l'hash sia aggiunto all'URL ogni volta che l'utente fa clic su un link di navigazione:

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

Il codice sopra riportato modifica sostanzialmente il valore hash dell'URL sul valore dell'attributo 'href' del link cliccato (meno l'estensione '.html'. Quindi, quando un utente fa clic sul link 'home' (href = index.html), allora l'hash il valore leggerà '#index'.

Inoltre, vogliamo consentire all'utente di digitare l'URL e ottenere la pagina corretta. Per fare questo controlliamo il valore dell'hash quando la pagina si carica e cambia il contenuto di conseguenza:

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));

Con questo incluso qui è tutto il codice javascript richiesto: (più la libreria jQuery)

$ (document) .ready (function () // Verifica il valore hash 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 ('veloce', loadContent); $ ('# load'). remove (); $ ('# wrapper'). append ('CARICAMENTO IN CORSO… '); $ ( '# Load') fadeIn ( 'normale').; window.location.hash = $ (this) .attr ('href'). substr (0, $ (this) .attr ('href'). length-5); function loadContent () $ ('# content'). load (toLoad, ", showNewContent ()) function showNewContent () $ ('# content'). show ('normal', hideLoader ()); function hideLoader () $ ('# load'). fadeOut ('normal'); return false;););

Finito…

Il bello di questo metodo è che è adattabile e può essere applicato a un sito in pochi minuti. È completamente discreto e il sito web funzionerà normalmente se l'utente ha disabilitato JS.

Visualizza l'esempio di lavoro finale

Scarica HTML, JS, CSS e immagini

Codice