Changeset 26728 in spip-zone


Ignore:
Timestamp:
Feb 18, 2009, 11:28:59 AM (11 years ago)
Author:
cedric@…
Message:

debugguer la gestion des tempos dans les menu deroulants,
et eviter de mettre N fois une fonction sur l'evenement hover d'un li (N etant le nombre de liens contenu dans le li)
la navigation clavier est fonctionnelle sur le menu deroulant boussole, mais lente. Voir si on la garde ou si on la zappe en repassant le deroulant en ajax charge uniquement au hover et pas au focus ...

Location:
_plugins_/_core_/bandeau
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/_core_/bandeau/javascript/gadgets.js

    r26718 r26728  
    1010        // enlever ce depliement si passage a la souris,
    1111        // delai de fermeture.
    12         var timer; // pour timeout du menu...
    1312        jQuery.fn.menuFocus = function(){
     13                jQuery(this)
     14                // le replier si un hover de souris sur un autre onglet,
     15                // timer sur la fermeture des onglets pour ne pas que ca aille trop vite
     16                .hover(
     17                        function(){
     18                                /*jQuery(this).parents('ul').find('>li.actif').removeClass('actif');*/
     19                                jQuery(this)
     20                                        .addClass('actif')
     21                                        .parents('li').addClass('actif');
     22                                jQuery(this).siblings('li').removeClass('actif_tempo');
     23                        }
     24                        ,
     25                        function(){
     26                                var me = jQuery(this).removeClass('actif').addClass('actif_tempo');
     27                                setTimeout(function(){
     28                                        me.removeClass('actif_tempo');
     29                                }, 600);
     30                        }
     31                )
     32                // navigation au clavier :
    1433                // deplier le ul enfant
    15                 jQuery(this).focus(function(){
    16                         jQuery('#bando_navigation li.actif').removeClass('actif');
    17                         jQuery(this).parent().addClass('actif');
     34                .find('>a').focus(function(){
     35                        //jQuery(this).parents('ul').find('>li.actif').removeClass('actif');
     36                        jQuery(this).parents('li').addClass('actif');
    1837                })
    1938                // cacher en partant de l'onglet...
    2039                .blur(function(){
    21                         jQuery(this).parents('li.actif').removeClass('actif');
    22                 })
    23                 // remonter au li parent
    24                 .parent()
    25                 // le replier si un hover de souris sur un autre onglet,
    26                 // timer sur la fermeture des onglets pour ne pas que ca aille trop vite
    27                 .hover(function(){
    28                         clearTimeout(timer);
    29                         if (jQuery(this).parent().parent().is('li'))
    30                                 jQuery(this).parent().parent().addClass('actif').siblings('li').removeClass('actif');
    31                         jQuery(this).addClass('actif').siblings('li').removeClass('actif');
    32                 }, function(){
    33                         var me = jQuery(this);
    34                         timer = setTimeout(function(){
    35                                 me.removeClass('actif');
    36                         }, 600);
    37                 })
    38 
    39                 // afficher le menu de l'onglet si un lien enfant devient actif
    40                 .find('li > a').focus(function(){
    41                         jQuery('#bando_navigation li.actif').removeClass('actif');
    42                         jQuery(this).parent().parent().parent().addClass('actif');
     40                        jQuery(this).parents('li').removeClass('actif');
    4341                });
    4442                return this;
    4543        }
    46         jQuery('#bando_navigation li >a').menuFocus();
    47         jQuery('#bando_outils ul.bandeau_rubriques li >a').menuFocus();
     44        jQuery('#bando_navigation li').menuFocus();
     45        jQuery('#bando_outils ul.bandeau_rubriques li').menuFocus();
    4846
    4947        jQuery('#bandeau_haut #formRecherche input').hover(function(){
  • _plugins_/_core_/bandeau/prive/style_prive_plugin_bando.html

    r26725 r26728  
    5252#bando_haut ul.deroulant li { /*position:relative; */float: left; display: block;}
    5353#bando_haut ul.deroulant li ul li {float:none;position:static;}
    54 #bando_haut ul.deroulant li:hover, #bando_haut ul.deroulant li.actif { background-color: #[(#GET{claire}|couleur_eclaircir|couleur_eclaircir)]; }
     54#bando_haut ul.deroulant li:hover, #bando_haut ul.deroulant li.actif,#bando_haut ul.deroulant li.actif_tempo { background-color: #[(#GET{claire}|couleur_eclaircir|couleur_eclaircir)]; }
    5555#bando_haut ul.deroulant li ul {border: 1px solid #666; border-top: 0; text-align: left; height: auto; width: auto; display: block; position:absolute; left:-3000em; z-index: 99; }
    56 #bando_haut ul.deroulant li:hover ul, #bando_haut ul.deroulant li.actif ul { left:auto;}
     56#bando_haut ul.deroulant li:hover ul, #bando_haut ul.deroulant li.actif ul, #bando_haut ul.deroulant li.actif_tempo ul { left:auto;}
    5757#bando_haut ul.deroulant li a { display: block; }
    5858#bando_haut ul.deroulant li ul li { background-color: #fff; border-top: 1px solid #ccc;}
     
    8686
    8787#bando_outils ul.deroulant li ul li {float:none;position:relative;}
    88 #bando_outils ul.deroulant li:hover > ul,#bando_outils ul.deroulant li.actif > ul {border:2px solid #999;}
    89 #bando_outils ul.deroulant li:hover li ul, #bando_outils ul.deroulant li.actif li ul {left:-3000em;}
    90 #bando_outils ul.deroulant li li:hover >ul,#bando_outils ul.deroulant li li.actif >ul  {left:50px;top:1.5em;}
     88#bando_outils ul.deroulant li:hover > ul,#bando_outils ul.deroulant li.actif > ul,#bando_outils ul.deroulant li.actif_tempo > ul {border:2px solid #999;}
     89#bando_outils ul.deroulant li:hover li ul, #bando_outils ul.deroulant li.actif li ul,#bando_outils ul.deroulant li.actif_tempo li ul {left:-3000em;}
     90#bando_outils ul.deroulant li li:hover >ul,#bando_outils ul.deroulant li li.actif >ul,#bando_outils ul.deroulant li li.actif_tempo >ul  {left:50px;top:1.5em;}
    9191
    9292#bando_outils ul.deroulant li ul {width:770px;}
Note: See TracChangeset for help on using the changeset viewer.