Outils pour utilisateurs

Outils du site


cours2011:jquery_semestre_4:tp:menu_anime

Menu animé

Le but est de réaliser :

Explications

Le principe

On ajoute par le code un élément (DIV) que l'on place initialement “sous” l'entré active du menu.

Au survole d'une entré du menu, on animera la position (est les dimensions) pour placer cet élément sous l'entrée survolé.

Techniques HTML/CSS

L'élément animé doit être en position “absolute” pour pouvoir fixer sa position.

On donne à l'élément animé un ”z-index” (ici 998) pour qu'il sous les entrées du menu. Mais au-dessus des autres éléments.

On donne à toutes les entrés du menu un ”z-index” supérieur (ici 999). On les mets en position “relative” pour que le ”z-index” soit effectif.

Travail :

  • Visualiser ces techniques en inspectant l'exemple (FireBug ou “inspecteur WEB”).
  • Faire le code de base (HTML/CSS/JS) en fichier séparés.

Code jQuery/JavaScript

Faire le code “lignes” par “lignes”. Tester d'abord dans la console. Ajouter des lignes avec des :

console.log("msg instructif : ", ma_var_que_je_ne_sais_pas_ce_quelle_contient_sans_le_voir);

Pseudo Code

Vous connaissez les exercices à trous :

/* Mode strict */
"use strict";
 
/* Quand la page (DOM) est prête */
jQuery(function($) {
 
    /* Touvez la racine du menu : http://api.jquery.com/jQuery/#jQuery1 */
    var $menu = 
    /* Dans le menu trouvez l'entrée par défaut : http://api.jquery.com/find/ */
    var $actif = $menu.
    /* Faire une DIV : http://api.jquery.com/jQuery/#jQuery2 */
    var $elemAnim = $("     ")
        /* Lui fixer des propriétés CSS : http://api.jquery.com/css/ */
 
                /* en position "absolute" */
 
                /* avec un 'z-index' de 998 */
 
                /* sa largeur à celle de l'élément actif : http://api.jquery.com/outerWidth/ */
 
                /* de même que sa hauteur */
 
                /* sa position 'top' comme celle de l'élément actif : http://api.jquery.com/position/ */
 
                /* idem pour 'left' */
 
            })
            /* Lui ajouter une classe pour la mise en forme : http://api.jquery.com/addClass/*/
 
            /* L'ajouter à la racine du menu : http://api.jquery.com/appendTo/ */
 
 
    /* Touver toutes les entrés du menu 
       et changer leurs propriétés CSS */
 
        /* en position "relative" */
 
        /* avec un 'z-index' de 999 */
 
 
 
    /* Ecouter la racine du menu pour : http://api.jquery.com/on/ 
        - un survole "mouseenter"
        - d'une entrée du menu
        - fonction anonyme qui fait le travail et reçoit 'event' */
 
        /* Faire de 'this' un objet jQuery : http://api.jquery.com/jQuery/#using-dom-elements */
        var $this = 
        /* animer la DIV ('$elemAnim') pour la placer "sous" '$this' : http://api.jquery.com/animate/ 
             - identique aux propriétés CSS fixer précédemment (ici pour "coller" à '$this', l'élément survoler)*/
 
            /* sa largeur comme celle de '$this' */
 
            /* sa hauteur idem */
 
            /* position 'top' */
 
            /* position 'left' */
 
          /* Optionnel, fixer les options d'animation : http://api.jquery.com/animate/#animate-properties-options
              - 'easing' le type de transition "swing" est inclus par défaut dans jQuery
              - 'queue' la mettre à 'false' pour que l'animation démarre sans attendre la fin des précédentes */
 
 
 
    /* Ecouter le fait que la souris quitte la racine du menu : http://api.jquery.com/mouseleave/ */
 
        /* animer la DIV ('$elemAnim') pour la placer "sous" l'entrée par défaut ('$active')  */
 
            /* déjà vu */
 
            /* déjà vu */
 
            /* déjà vu */
 
            /* déjà vu */
 
          /* déjà vu */
 
 
 
});

Faire un Plugin

Dans le TD je vous ai parlé des closure qui permettent d'isoler votre code des autres codes de la page.

Faire un plugin jQuery permet de faire de même pour une partie de votre code réalisant un effet particulier. Ainsi vous pourrez aisément le réemployer dans d'autre projet.

La réalisation d'un plugin jQuery est clairement documenté : Plugins/Authoring - jQuery. Je vous encourage fortement à survoler cette documentation, puis la lire et appliquer à vos propre projet quand vous serez plus aguerri en JavaScript.

Le travail que je vous demande pour ce TP consiste simplement à adapter votre code pour qu'il fonctionne dans un plugin.

  • C'est simplement faire en sorte que certaine valeur deviennent des options passé au plugin.
  • Je vous fournis le code réalisant cela.
  • Votre travail consiste simplement à utiliser ces valeurs (options) dans votre code.

Enregistrer sous le nom ”jquery.simple-menu-anim.js” :

/* Mode strict */
"use strict";
 
/* Début dans une closure qui reçoit jQuery en paramètre nommé ('$')*/
(function($) {
 
    /* Ajout du Plug-in à jQuery :
         Une fonction qui reçoit des options (objet en notation littérale) 
         Exemple d'usage :
             $('ul.menu').simpleMenuAnim( { elem:'li }); */
    $.fn.simpleMenuAnim = function(options) {
 
        /* Options par defaut :
             On combine (extend) les 'options' avec des valeurs pad défaut
             'setting' contient les valeurs à utiliser (ex: 'setting.elem') */
        var setting = $.extend({
            elem:'>*',
            active:':first'
            },options);
 
 
        /* Ici est fait le travail du Plug-in
           'this' c'est l'objet sur lequel est appelé le Plug-in 
           Il peut comporter plusieurs élément (ex: utiliser un sélecteur retournant plusieurs menus)
           L'usage de 'each' permet de traiter ces différents éléments (menus), les uns après les autres. */
        return this.each(function() {
 
            /* Le 'this' reçut n'est pas forcement un objet jQuery.
               On l'affecte à '$this' après l'avoir passé à jQuery.
               Ainsi '$this' fait toujours référence à l'objet jQuery permettant de manipuler le menu
                 -- Même dans les fonctions définies à l'intérieure -- */
            var $this = $(this);
 
            /* Ici faire le travail du plug-in en utilisant '$this', 'setting.elem' et 'setting.active' */
 
            /* .......
               .......
               ....... */
 
        }); /* Fin du travail pour chaque élément (menus) : 'each' */
    }; /* Fin du Plug-in : '$.fn.simpleMenuAnim */
})(jQuery); /* Appel de la closure avec jQuery en paramètre */

Adapter votre code HTML pour l'utiliser :

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="jquery.simple-menu-anim.js"></script>
    <script>
    /* Execute le code quand la page est prête 
      ".noConflict()" est optionnel */
    jQuery.noConflict()(function ($) {
    	/* Ici on utilise $ en toute sécurité */
 
        // $('.menu').simpleMenuAnim({elem:'li',active:'li:has(a:not([href]))'});
        $('.menu').simpleMenuAnim({elem:'a',active:'a:not([href])'});
 
    });
    </script>
cours2011/jquery_semestre_4/tp/menu_anime.txt · Dernière modification: 2012/02/09 23:00 (modification externe)