Outils pour utilisateurs

Outils du site


cours2011:bases_de_la_programmation_orientee_objets_et_evenementielle:indicateur_de_page

Indicateur de page

Animer un élément ou un style figurant la page courante vers une autre entrée menant à une autre page.

Le code de départ (à télécharger) :

  • Les CSS déjà en place.
  • Le code JavaScript pour extraire le nom de fichier sans extension d'une URL.

Le but est d'obtenir le résultat visible dans cette vidéo :

  • Au chargement de la page, une classe CSS est ajoutée à BODY : “page-nom_fichier_url_document”
  • Au survol d'une entrée de menu, deux classes CSS sont ajoutées à BODY : “over over-nom_fichier_href_lien”

Travail

Au chargement de la page

  • Lire l'adresse de la page : document.location.pathname
  • Extraire le nom de fichier sans extension avec la fonction fournie : nom_fichier_url_document
  • Ajoutez la classe “page-nom_fichier_url_document” à BODY.

Au survole d'une entrée du menu

  • Mettre en place le gestionnaire d'événement
    • Lire l'attribut href du lien survolé.
    $('#navigation').on("mouseenter","a",function () {
        var href = $(this).attr("href");
        // et la suite...
    });
  • Extraire le nom de fichier sans extension de l'attribut href avec la fonction fournie : nom_fichier_href_lien
  • Ajouter les classes “over over-nom_fichier_href_lien” à BODY.
  • Mettre en place un gestionnaire d'événement exécuté une seule fois (one) au lien survolé ( $(this) ).
    • Dedans, retirer les classes mises en place.
            $(this).one("mouseleave",function () {
                $('body').removeClass(className);
            });
cours2011/bases_de_la_programmation_orientee_objets_et_evenementielle/indicateur_de_page.txt · Dernière modification: 2012/05/19 22:00 (modification externe)