Dans ce tuto JQuery en vidéo, nous allons voir ensemble comment utiliser la méthode .load() de jQuery pour charger du contenu externe. Les différentes étapes de ce tutoriel vidéo sont :

1ère partie

  • Introduction sur la méthode .load() via la page officielle de cette librairie
  • Lier Jquery à notre page HTML
  • Création d'un bouton permettant de charger une div provenant d'un autre fichier HTML

2ème partie

  • Ajout des liens dans le menu
  • Dupliquer la page index pour créer 2 autres pages
  • Créer et lier un fichier js externe pour écrire notre code javascript
  • Tester le fonctionnement pas à pas du script et du résultat dans le navigateur

Des bases de HTML sont nécessaires pour suivre ce tuto. Pour le reste, tout est expliqué dans la vidéo pour que vous puissiez arriver au même résultat montré dans l'extrait. Toutes les sources sont bien évidemment fournies.

Bon tuto !

Jetez un oeil à ces autres tuto jQuery 1.6

Changer le contenu d'une div avec un selectChanger le contenu d'une div…
Dans cette formation Jquery en vidéo, nous verrons comment…

Donnez de l'importance à vos photos sur le webDonnez de l'importance à…
Dans ce tuto jQuery, HTML et CSS, en vidéo, vous allez apprendre…

Limiter le nombre de caractères d'un champsLimiter le nombre de caractères…
Dans ce tuto Jquery en vidéo, vous apprendrez à limiter le…

Créer des effets sur les images mapCréer des effets sur les…
Dans ce tuto jQuery vous découvrirez comment réaliser une…

Changer le contenu d'une div avec un selectChanger le contenu d'une div…
Dans cette formation Jquery en vidéo, nous verrons comment…

Créer des effets sur les images mapCréer des effets sur les…
Dans ce tuto jQuery vous découvrirez comment réaliser une…

Donnez de l'importance à vos photos sur le webDonnez de l'importance à…
Dans ce tuto jQuery, HTML et CSS, en vidéo, vous allez apprendre…

Créer une infobulleCréer une infobulle
Voici un tuto jQuery gratuit pour apprendre à créer une infobulle…

Pour vous faire un avis, voici un extrait de quelques secondes. La version complète et téléchargeable de ce tuto jQuery 1.6 de 30 minutes est proposée dans une résolution plus grande que l’extrait suivant :

Partagez cet extrait

Lien vers cet extrait : Embed code :

spykrew07 , formateur certifié

Salut à tous ! Je m'apelle Adrien j’ai 29 ans et je suis Webdesigner spécialiste WordPress depuis 7 ans. Ancien élève de l'ESMA à Montpellier, j’ai travaillé en agence de communication pendant 4 ans et depuis 3 ans je me suis lancé en freelance. Formateur certifié sur tuto.com, je partage mes connaissances et mes découvertes dans différents domaines : web design, logo, html, wordpress, php, css jquery ... Ma devise : Webdesign is not a job, it’s a passion !

Toutes les formations de Spykrew07


Témoignage des clients de spykrew07

Je trouve que Spykrew07 est un très bon formateur !

Très bon formateur !!!

tutos clair et précis!

Très bien, de bonnes explications très précises. Un bon rythme pendant les tutos

Tuto utile et super précis ! Merci

Lire les autres témoignages

 

D'autres tuto de spykrew07

Changer le contenu d'une div avec un selectChanger le contenu d'une div avec un select
Dans cette formation Jquery en vidéo, nous verrons comment changer le contenu d'une…

Proposez du contenu privé aux membres de votre site webProposez du contenu privé aux membres de votre site web
Dans cette formation Wordpress en vidéo, nous allons voir ensemble comment privatiser…

Apprenez les Bases du HTMLApprenez les Bases du HTML
Dans cette formation en vidéo, nous apprendrons les bases du HTML qui sont souvent négligés…

Créer un logo simpleCréer un logo simple
Dans ce tuto Illustrator, vous apprendrez à manipuler les outils de base du logiciel…

voir tous les tuto de spykrew07

Notes attribuées par les utilisateurs (6 votes)

Note moyenne des utilisateurs  

Votez pour ce tuto


 

Les avis / Questions des utilisateurs (12)

par spykrew07
(auteur de ce tuto - 16 août 2012)

" @Pumbostar Tu as un exemple en ligne ? "

par Pumbostara voté :
(a acheté ce tuto - 16 août 2012)

" Très bon et efficace, comme d'habitude !

Une petite question : je souhaite insérer via la méthode load() un accordéon (développé via la formation que tu propose "Créer un menu accordéon et personnaliser le curseur"). Malheureusement, quand la div se charge via la méthode load(), le Javascript de l'accordéon n'est pas actif.

Une idée ?

Merci encore pour ton travail "

par artwoa voté :
(a acheté ce tuto - 06 août 2012)

" @spykrew07 ça à l'air de fonctionner pas mal online finalement… Je ne comprends pas pourquoi ce n'est pas le cas en local "

par artwoa voté :
(a acheté ce tuto - 06 août 2012)

" @spykrew07 Oui, je suis en train de bosser sur ça (je supprimerais le commentaire après): http://romainrouault.com/perso/Tytan - Le tuto est utilisé à la partie "Our Works" (d'autres de tes tuto aussi d'ailleurs, encore merci) afin de switcher entre les catégories. Merci pour ta réactivité aussi! "

par spykrew07
(auteur de ce tuto - 06 août 2012)

" @artwo C'est vraiment bizarre car je fais tous mes tutos sous Chrome... Tu as l'exemple en ligne quelque part ? "

par artwoa voté :
(a acheté ce tuto - 06 août 2012)

" Cela fonctionne très bien sous FF mais pas sous Chrome, pourquoi? Je suis très embêté… (sinon, très bon tuto par ailleurs, comme d'habitude) J'ai également téléchargé les sources avec le tuto et c'est la même chose: gros problèmes sous chrome. "

par tailivana voté :
(a acheté ce tuto - 16 juin 2012)

" 10/10
tuto super, mais comme tous les tutos de Spykrew. "

par spykrew07
(auteur de ce tuto - 30 décembre 2011)

" @mezigh OK, je prend note ! Ce sera peut être l'objet d'un projet tuto. Sinon en attendant, je te met sur la piste d'un plugin : Jquery Cookie... Merci de ton achat et de ton retour positif ;) "

par mezigha voté :
(a acheté ce tuto - 30 décembre 2011)

" Excellent tuto ... mais peut-être qu'une deuxième partie concernant la barre d'adresse du navigateur.
Je m'explique imaginons : javascript activer. Comment faire un signet sur la page équipe.
La barre d'adresse du navigateur ne tient pas compte du changement de page, et si par exemple je souhaite envoyer le lien de cette page à un pote !?!
J'ai bien compris que les pages seront correctement indexées par les moteurs de recherche puisque le javascript n'est pas "intrusif" .
Je pense qu'une deuxième partie pour ce tuto serait nécessaire pour gérer la barre d'adresse du navigateur.

En tout cas bravo pour l'efficacité de tes tutos
Olivier "

par spykrew07
(auteur de ce tuto - 01 décembre 2011)

" @Adel1982 Si bien sur que ça fonctionne avec les pages en PHP, l'exemple est avec du HTML pour rester simple. "

par Adel1982a voté :
(a acheté ce tuto - 01 décembre 2011)

" Excellent tuto, justement j'utilise la première méthode pour site perso et je ne comprends pas pourquoi vous utilisez une page .html pour stocker le contenu.

ça ne pourrait pas fonctionner avec une page .php ? "

par benoitardoina voté :
(a acheté ce tuto - 20 novembre 2011)

" Très bon tuto, bon début d'apprentissage à JQuery. Merci. "

 

Donnez votre avis ou posez une question au formateur.

Vous souhaitez commenter ce tuto vidéo ? Créez un compte gratuit. Déjà membre ? Identifiez-vous

Ce tuto en résumé ...

Ce tuto jQuery 1.6 d’une durée de 30 minutes a été acheté 130 fois et a reçu une note moyenne de 4/5.

Ce tuto a été publié le 7 novembre 2011 par spykrew07, formateur certifié par Tuto.com, ayant reçu une note moyenne de 4,8/5 pour l’ensemble de ses vidéos, dans la catégorie Tuto jQuery Menu.

Tous les fichiers sources sont fournis avec cette formation. Ces derniers vous permettront de reproduire les manipulations expliquées dans cette formation.

Ce tuto video vous expliquera étape par étape, toutes les manipulations présentées par le formateur.

Toutes nos vidéos sont visionnées par notre équipe, avant d’être mises en ligne, garantissant ainsi la qualité des produits téléchargés.

N'hésitez pas à nous contacter si vous avez la moindre question !