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…
Dans cette formation Jquery en vidéo, nous verrons comment…
Donnez de l'importance à…
Dans ce tuto jQuery, HTML et CSS, en vidéo, vous allez apprendre…
Limiter le nombre de caractères…
Dans ce tuto Jquery en vidéo, vous apprendrez à limiter le…
Créer des effets sur les…
Dans ce tuto jQuery vous découvrirez comment réaliser une…
Changer le contenu d'une div…
Dans cette formation Jquery en vidéo, nous verrons comment…
Créer des effets sur les…
Dans ce tuto jQuery vous découvrirez comment réaliser une…
Donnez de l'importance à…
Dans ce tuto jQuery, HTML et CSS, en vidéo, vous allez apprendre…
Cré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 :
spykrew07
, formateur certifié
Salut à tous !
Je m'apelle Adrien j’ai 28 ans et je suis Webdesigner spécialiste WordPress depuis plus de 6 ans. Ancien élève de l'ESMA à Montpellier, j’ai travaillé en agence de communication pendant plus de 3 ans et depuis 1 an et demi 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
![]()
Rien à dire, tuto expliqué de manière claire. Formateur Pro, allez-y.
![]()
extrêmement complet ! très pédagogique ! Top !
![]()
Je trouve très intéressante votre vidéo sur la création d'un site OnePage. Je l'ai vu plusieurs fois et vais me lancer bientôt dans la création d'un site en m'inspirant de vos idées. Pour le reste "Jquery, css, ...) cela ne me fait plus peur . Merci.
![]()
Du très bon travail ! Encore merci pour ces formations nécessaires à mon apprentissage dans le graphisme.
![]()
Tutos simples et efficaces !
Lire les autres témoignages
D'autres tuto de spykrew07
Changer 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 web
Dans cette formation Wordpress en vidéo, nous allons voir ensemble comment privatiser…
Apprenez 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 simple
Dans ce tuto Illustrator, vous apprendrez à manipuler les outils de base du logiciel…
Notes attribuées par les utilisateurs (6 votes)
Les avis / Questions des utilisateurs (12)
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é 120 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.












(auteur de ce tuto - 16 août 2012)
" @Pumbostar Tu as un exemple en ligne ? "
(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 "
(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 "
(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! "
(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 ? "
(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. "
(a acheté ce tuto - 16 juin 2012)
" 10/10
tuto super, mais comme tous les tutos de Spykrew. "
(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 ;) "
(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 "
(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. "
(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 ? "
(a acheté ce tuto - 20 novembre 2011)
" Très bon tuto, bon début d'apprentissage à JQuery. Merci. "