Grails UI Menu comportement flakey dans IE

Question

J'utilise une interface utilisateur GRAILS (1.2-SNAPSHOT) et son implémentation de la barre de menu YUI (YUI 2.7.0.1). Je vois le comportement de mouseover flakey dans IE (Firefox est ok). Lorsque je souris sur l'élément de menu avec un sous-menu, il apparaîtra. Lorsque j'essaie de passer la souris sur le sous-menu, le sous-menu disparaît avant que je puisse cliquer. Cela se produit dans un schéma que je n'ai pas complètement compris. Habituellement, la première fois que je sélectionne un menu c'est bien, mais si je me déplace dans le menu à un élément de menu, le sous-menu commence à afficher ce comportement. En cliquant et en maintenant le bouton de la souris, je peux habituellement obtenir le sous-menu pour rester.

J'ai palé avec diverses configurations comme keepopen et automenudisplay mais ils ne semblent pas changer le comportement. Je n'ai pas vu beaucoup posté à ce sujet. Mais je ne vois pas non plus de menus documentés dans le plugin de l'interface utilisateur. Je pourrais vraiment utiliser certains commentaires si le menu de l'interface utilisateur n'est pas encore prêt pour la prime time ou s'il me manque quelque chose d'autre. Je n'ai pas travaillé avec beaucoup d'AJAX avant.

Voici le code avec les options supplémentaires que j'ai joué avec qui n'a pas eu un impact positif.

<gui:menubar id='menubar' renderTo='mainmenu' autosubmenudisplay="false" shadow="true" keepopen="true"> 
<gui:menuitem url="/esmzone">Home</gui:menuitem> 
     <gui:submenu label='Profile'> 
      <gui:menuitem url="${createLink(controller:'memberProfile', action:'view')}">View</gui:menuitem> 
      <gui:menuitem url="${createLink(controller:'memberProfile', action:'profile')}">Edit</gui:menuitem> 
      <gui:menuitem url="${createLink(controller:'user', action:'account')}">Settings</gui:menuitem> 
      <gui:menuitem url="#">Subscription</gui:menuitem> 
     </gui:submenu> 

Voici le code généré par le plugin:

<script> 
YAHOO.util.Event.onDOMReady(function() { 
    GRAILSUI.menubar = new YAHOO.widget.MenuBar("menubar_div", {'autosubmenudisplay': false, 
'shadow': true, 
'keepopen': true}); 
    GRAILSUI.menubar.render('mainmenu'); 
}); 
</script> 

Answer 1

J'ai fait quelques progrès dans ce domaine par la recherche de la bibliothèque YUI. Il y a un bug documenté avec IE7. Apparemment, le plugin grails-ui n'aborde pas le problème. Je teste avec IE8 mais je suppose qu'il est toujours là. Il semblerait que vous deviez définir la propriété zoom sur 1 (zoom: 1) pour la classe bd. Il semblerait que vous deviez définir la propriété zoom sur 1 (zoom: 1). Je ajouté le code suivant à ma feuille de style

div.yuimenubar .bd { 
zoom: 1; 
} 

et il semble aider. Je ne vois aucun effet secondaire dans Firefox, mais je n'ai pas vérifié de façon dynamique pour la version du navigateur que je aurais besoin de pirater le code qui génère le javascript YUI et mis en

if (YAHOO.env.ua.ie === 7) { 
YAHOO.util.Dom.addClass(document.body, "ie7"); 
} 

après l'appel render(). Ensuite, au lieu du style que j'ai ajouté, vous pourriez faire un style IE7 (probablement> = 7).

C'est ce que le site Yahoo avait à dire à son sujet:

L'application suivante de « zoom: 1 » définit la « hasLayout » propriété « true » et empêche les sous-menus premier niveau de une barre de menu de se cacher lorsque la souris se déplace d'un élément dans un sous-menu MenuBar à un dans IE 7. pour en savoir plus sur la propriété « hasLayout »: http://msdn.microsoft.com/en-us/library/ms533776(VS.85).aspx