Share
Dans ce didacticiel, nous allons améliorer votre site Web quotidien quotidien avec jQuery. Nous ajouterons la fonctionnalité ajax afin que le contenu soit chargé dans le conteneur approprié au lieu que l'utilisateur ait à naviguer vers une autre page. Nous allons également intégrer des effets d’animation impressionnants.
Donc tout d’abord, j’ai mis au point une présentation très simple pour cet exemple. Voici une capture d'écran et le code HTML que nous allons utiliser.
mmm… Ajax! ajax… nettuts
- Bienvenue
- sur
- portefeuille
- contact
- termes
Bienvenue!
Texte
Tutoriel de James pour NETTUTS
Commençons par télécharger la dernière version stable de jQuery et la lier à celle-ci dans votre document:
À mon avis, l'une des meilleures choses à propos de jQuery est sa simplicité. Nous pouvons obtenir la fonctionnalité décrite ci-dessus associée à des effets étonnants en seulement quelques lignes de code..
Commençons par charger la bibliothèque jQuery et lancer une fonction lorsque le document est prêt (lorsque le DOM est chargé).
$ (document) .ready (function () // Stuff here);
Nous voulons donc faire en sorte que, lorsqu'un utilisateur clique sur un lien dans le menu de navigation de notre page, le navigateur n'accède pas à la page correspondante, mais charge plutôt le contenu de cette page dans la page en cours..
Nous voulons cibler les liens dans le menu de navigation et exécuter une fonction lorsque l'utilisateur clique dessus:
Accentsconagua
$ ('# nav li a'). click (function () // function here); Résumons ce que nous voulons que cette fonction fasse dans l'ordre des événements:
Nous devons définir la page sur laquelle extraire les données lorsqu'un lien est cliqué. Tout ce que nous avons à faire ici est d’obtenir l’attribut 'href' du lien cliqué et de le définir comme page d’appel des données. De plus, nous devons définir la localisation sur la page demandée pour extraire les données - c’est-à-dire que nous ne le faisons pas. vouloir extraire TOUTES les données, uniquement celles contenues dans la div "content", de sorte:
var toLoad = $ (this) .attr ('href') + '#content'; Pour illustrer ce que fait le code ci-dessus, imaginons que l'utilisateur clique sur le lien "à propos de" qui renvoie à "about.html" - dans cette situation, cette variable serait: "à propos de.html #content" - il s'agit de la variable que nous " ll demande dans l'appel ajax. Cependant, nous devons d’abord créer un bel effet pour le contenu de la page actuelle. Au lieu de simplement le faire disparaître, nous allons utiliser la fonction 'hide' de jQuery comme ceci:
$ ('# content'). hide ('fast', loadContent); La fonction ci-dessus "masque" rapidement la div #content, et une fois que cet effet est terminé, elle lance ensuite la fonction "loadContent" (charge le nouveau contenu [via ajax]) - une fonction que nous définirons plus tard (à l'étape 4). ).
Une fois que l'ancien contenu disparaît avec un effet impressionnant, nous ne voulons pas laisser l'utilisateur s'interroger avant que le nouveau contenu n'arrive (surtout s'il a une connexion Internet lente), nous allons donc créer un petit graphique de "chargement" pour qu'il sache quelque chose se passe en arrière-plan:
$ ('# wrapper'). append ('CHARGEMENT… '); $ ('# load'). fadeIn ('normal'); Voici le CSS appliqué à la #load div nouvellement créée:
#load display: none; position: absolue; à droite: 10px; en haut: 10 px; fond: url (images / ajax-loader.gif); largeur: 43px; hauteur: 11px; retrait du texte: -9999em;
Donc, par défaut, cette étendue 'load' est configurée pour afficher: aucune, mais lorsque la fonction fadeIn est lancée (dans le code ci-dessus), elle apparaît en fondu dans le coin supérieur droit du site et affiche notre GIF animé jusqu'à ce qu'il soit affiché. effacé à nouveau.
Jusqu'à présent, lorsqu'un utilisateur clique sur l'un des liens, les événements suivants se produisent:
Maintenant, écrivons cette fonction loadContent que nous avons appelée précédemment:
function loadContent () $ ('# contenu'). load (à charger, ", showNewContent) La fonction loadContent appelle la page demandée, puis une fois que cela est fait, appelle la fonction 'showNewContent':
function showNewContent () $ ('# contenu'). show ('normal', hideLoader); Cette fonction showNewContent utilise la fonction show de jQuery (qui est en réalité un nom très ennuyeux pour un effet très cool) afin que le nouveau contenu (demandé) apparaisse dans le div '#content'. Une fois le contenu appelé, il lance la fonction 'hideLoader':
function hideLoader () $ ('# load'). fadeOut ('normal'); Nous devons nous rappeler de "renvoyer faux" à la fin de notre fonction de clic - c'est pour que le navigateur ne navigue pas vers la page
Cela devrait fonctionner parfaitement maintenant. Vous pouvez voir un exemple ici: [LINK]
Voici le code jusqu'à présent:
$ (document) .ready (fonction () $ ('# nav li a'). cliquez sur (fonction () var toLoad = $ (this) .attr ('href') + '#content'; $ (' #content '). hide (' fast ', loadContent); $ (' # load '). remove (); $ (' # wrapper '). append ('CHARGEMENT… '); $ ('# load'). fadeIn ('normal'); function loadContent () $ ('# contenu'). load (à charger, ", showNewContent ()) fonction showNewContent () $ ('# contenu'). show ('normal', hideLoader ()); fonction hideLoader () $ ('# load'). fadeOut ('normal'); return false;);); Vous pouvez vous arrêter là, mais si vous êtes préoccupé par la facilité d'utilisation (ce que vous devriez être), il est important de travailler un peu plus. Le problème avec notre solution actuelle est qu’elle néglige l’URL. Que faire si un utilisateur souhaite créer un lien vers l'une des "pages"? - Ils n'ont aucun moyen de le faire car l'URL est toujours la même..
Une meilleure façon de procéder serait donc d’utiliser la valeur "hash" de l’URL pour indiquer ce que l’utilisateur visualise. Ainsi, si l'utilisateur visualise le contenu "about", l'URL peut être: "www.website.com/#about". Il suffit d'ajouter une ligne de code à la fonction "clic" pour que le hachage soit ajouté à l'URL chaque fois que l'utilisateur clique sur un lien de navigation:
window.location.hash = $ (this) .attr ('href'). substr (0, $ (this) .attr ('href'). length-5); Le code ci-dessus modifie fondamentalement la valeur de hachage de l'URL par la valeur de l'attribut 'href' du lien cliqué (moins l'extension '.html'. Ainsi, lorsqu'un utilisateur clique sur le lien 'home' (href = index.html), le hachage la valeur indiquera '#index'.
Nous souhaitons également permettre à l'utilisateur de saisir l'URL et de recevoir la page correcte. Pour ce faire, nous vérifions la valeur de hachage lors du chargement de la page et modifions le contenu en conséquence:
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'; $ ('# # contenu'). load (toLoad)); Avec cela inclus, voici tout le code javascript requis: (plus la bibliothèque jQuery)
$ (document) .ready (function () // Vérifier la valeur de hachage dans l'URL var var = = 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 '). cliquez sur (function () var toLoad = $ (this) .attr (' href ') +' #content '; $ ('#content'). hide ('fast', loadContent); $ ('# load'). remove (); $ ('# wrapper'). append ('CHARGEMENT… '); $ ('# load'). fadeIn ('normal'); window.location.hash = $ (this) .attr ('href'). substr (0, $ (this) .attr ('href'). length-5); function loadContent () $ ('# contenu'). load (à charger, ", showNewContent ()) fonction showNewContent () $ ('# contenu'). show ('normal', hideLoader ()); fonction hideLoader () $ ('# load'). fadeOut ('normal'); return false;);); L'avantage de cette méthode est qu'elle est adaptable et peut être appliquée à un site en quelques minutes. C'est complètement discret et le site web fonctionnera normalement si l'utilisateur a JS désactivé.
Voir le dernier exemple de travail
Téléchargez le HTML, JS, CSS et Images
