Table des matières

Simples interactions

Simples interactions

Code minimal

HTML (fichier ”base-jQuery.html”) :

url pour charger jQuery depuis Google https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js

JavaScript (fichier ”base-jQuery.js”) :

Tester :

Ouvrez la page dans un navigateur et afficher le console.
- Vous devez voir les résultats affichés par ”console.log(…)”
Tester des commandes :
- ”$('h1')” : sélectionne l'élément H1
- ”$('h1').hide()” … ? (indice)

Les ”console.log(…)” servent à vérifier que votre code est bien chargé. Vous pouvez les retirer :

Ce code est la “base” de tout projet utilisant jQuery.

Interactions basiques

Mise en place d'un gestionnaire d'événement

Ajouter à votre code un gestionnaire d'événement qui réagit au “click” sur un élément H1 :

Tester : Cliquer sur le H1.

Un effet visuel

Ajout de styles CSS

Ajouter à votre page une feuille de style et utiliser le style :

CSS (fichier ”base-jQuery.css”) :

Tester : le H1 s'affiche en rouge.

Test de commande jQuery

On va utiliser la méthode toggleClass de jQuery.

Chaque fois que c'est possible, vous devez tester les commandes JavaScript/jQuery dans la console avant d'essayer de les utiliser dans votre code :

Tester :

Vérifier que le texte passe alternativement de la couleur rouge à la couleur noire.
- Vous pouvez visualiser que jQuery retire ou ajoute la Classe CSS ”en-rouge” à l'élément.

Utiliser la commande dans le gestionnaire d'événement

Tester : la couleur du titre doit changer suite à un “click” dessus.

"this" dans un gestionnaire d'événement

Ajouter à votre page un autre élément H1 :

Tester : Vous devez constater que les DEUX titre (H1) changent de couleur (quel que soit le titre sur lequel l'on clic).

Explication :

”$('h1')” sélectionne tous les éléments H1 de la page.
- Donc tous réagissent au “click”.
- Mais aussi tous sont affectés par la commande ”$('h1').toggleClass("en-rouge")”

Pour éviter cela, l'on peu utiliser ”this” qui dans un gestionnaire d'événement désigne spécifiquement sur “qui” l'événement a été déclenché.

Tester : seul le titre sur lequel l’on click doit changer de couleur.

Bonus : animation

Ajouter à votre code CSS :

h1 {
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

Exemple pratique : un accordéon horizontal

Code HTML/CSS

<body>
  <h1>Accordéon - jQuery</h1>
  <ul id="accordeon">
    <li>
      <figure>
        <img src="http://immediatenet.com/t/s?Size=1024x768&amp;URL=src-media.com" alt="src-media.com" width="102" height="77">
        <figcaption>
          <h3>Le DUT des métiers du web</h3>
          <p>département SRC de montbéliard</p>
        </figcaption>
      </figure>
    </li>
    <li class="actif">
      <figure>
        <img src="http://immediatenet.com/t/s?Size=1024x768&amp;URL=xaviersenente.pu-pm.univ-fcomte.fr" alt="xaviersenente.pu-pm.univ-fcomte.fr" width="102" height="77">
        <figcaption>
          <h3>xaviersenente.pu-pm.univ-fcomte.fr</h3>
          <p>Site Web de Xavier SENENTE</p>
        </figcaption>
      </figure>
    </li>
    <li>
      <figure>
        <img src="http://immediatenet.com/t/s?Size=1024x768&amp;URL=pracht.org" alt="pracht.org" width="102" height="77">
        <figcaption>
          <h3>Pracht Pierre - Cours</h3>
          <p>Cours de Pierre Pracht</p>
        </figcaption>
      </figure>
    </li>
  </ul>
</body>

Écrire le code CSS pour obtenir la présentation suivante :

Vous pouvez démarrer avec le code suivant :

Tester : Dans la console les commandes suivante :

Les méthodes ”.addClass()” et ”.removeClass()” sont des variantes de ”.toggleClass()” utilisé précédemment.

Complétez le code JavaScript :

Pour les bons

Faire le même en vertical

Pracht Pierre - Cours

Outils pour utilisateurs

Outils du site