Outils pour utilisateurs

Outils du site


cours2011:bases_de_la_programmation_orientee_objets_et_evenementielle:faq_avec_jquery

FAQ avec jQuery

Le but est d'animer une liste de définition (dl,dt,dd) pour obtenir : ceci.

bases

Le but est d'utiliser la délégation :

  • Trouvez la racine de la liste : $('sélecteur pour la racine')
  • Puis connaissant la racine, trouvez tous les éléments que l'on veut écouter : $('sélecteur pour la racine').find('sélecteur pour les enfants à écouter')

Ainsi vous pouvez mettre en place l'écoute des événements en utilisant la délégation :

('sélecteur pour la racine').on("click",'sélecteur pour les enfants à écouter',function (event) {
    console.log("clic sur : ",$(this));
});

Connaissant l'élément cliqué par l'utilisateur ($(this)), on peut trouver le ou les éléments à cacher/montrer. Pour cela utiliser une ou des fonctions de jQuery permettant de parcourir le DOM.

Appliquez l'effet désiré (un simple slideToggle pour débuter)

Penser à tous les cacher par défaut (c.-à-d. au chargement de la page). Un indice, il suffit d'écrire le sélecteur trouvant tous les éléments à cacher et leur appliquer l'effet avec un temps ”0” p

Animer avec une "ellipsis"

On peut utiliser le code CSS suivant :

dd {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  height:1.5em;
}
 
dd.visible {
  height:auto;
  white-space:normal;
}

En remplacent le slideToggle() par toggleClass("visible"), on a l'ellipsis mais plus l'animation.

Combiner les deux (animation et ellipsis).

Vous pourrez avoir besoin de :

// trouve la hauteur par défaut
var height = elem.css({height:"auto"}).height();

Bonus

La même chose, mais avec un seul élément développé (c.-à-d. replier le précédant).

cours2011/bases_de_la_programmation_orientee_objets_et_evenementielle/faq_avec_jquery.txt · Dernière modification: 2012/04/14 22:00 (modification externe)