J'utilise le plugin de menu Superfish pour jQuery pour afficher un menu vertical sur certaines pages. J'utilise également le plugin Supersubs.js pour m'assurer que chaque niveau du système de menu est aussi large que l'élément LI le plus large.jQuery + Superfish + Supersubs + Prototype + IE = ÉCHEC!
J'ai pris le fichier EXAMPLE.HTML qui est inclus dans le fichier zip de téléchargement et j'ai simplement ajouté la bibliothèque prototype.js à la source. Comme on pouvait s'y attendre FF, Chrome, Safari rendent le menu correctement et utilisent le plugin supersubs pour s'assurer que chaque niveau du menu est au moins aussi large que l'élément le plus large.
Et puis il y a IE .....
Dès que vous incluez la bibliothèque Prototype.js sur la page IE ne tient pas compte du plugin Supersubs.
est ici la source de example.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>A very basic Superfish menu example</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/superfish.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/superfish-vertical.css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"></script>
<script type="text/javascript" src="js/hoverIntent.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript" src="js/supersubs.js"></script>
<script type="text/javascript">
//jQuery.noConflict();
// initialise plugins
jQuery(function() {
jQuery('ul.sf-menu').supersubs({
minWidth: 12,
maxWidth: 30,
extraWidth: 2
}).superfish();
});
</script>
</head>
<body>
<ul class="sf-menu sf-vertical">
<li class="current">
<a href="#a">menu item</a>
<ul>
<li>
<a href="#aa">menu item that is quite long</a>
</li>
<li class="current">
<a href="#ab">menu item</a>
<ul>
<li class="current"><a href="#">menu item</a></li>
<li><a href="#aba">menu item</a></li>
<li><a href="#abb">menu item</a></li>
<li><a href="#abc">menu item</a></li>
<li><a href="#abd">menu item</a></li>
</ul>
</li>
<li>
<a href="#">menu item</a>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
<li>
<a href="#">menu item</a>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">menu item</a>
</li>
<li>
<a href="#">menu item</a>
<ul>
<li>
<a href="#">menu item</a>
<ul>
<li><a href="#">short</a></li>
<li><a href="#">short</a></li>
<li><a href="#">short</a></li>
<li><a href="#">short</a></li>
<li><a href="#">short</a></li>
</ul>
</li>
<li>
<a href="#">menu item</a>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
<li>
<a href="#">menu item</a>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
<li>
<a href="#">menu item</a>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
<li>
<a href="#">menu item</a>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">menu item</a>
</li>
</ul>
</body>
</html>
J'ai essayé jQuery.noConflict(). J'ai changé la source dans les fichiers plugin pour utiliser jQuery au lieu de $ même s'ils utilisent le format de (function ($) {}) (jQuery); et cela ne devrait pas avoir d'importance.
Quelqu'un peut-il vous aider? Bout pour tirer mes cheveux.
Merci d'avance!
Salut Christian. Merci pour la réponse. Je vais jeter un coup d'oeil à cela. Il semble presque que quelque chose dans la librairie Prototype fasse passer IE8 en mode quirks ou quelque chose comme ça. Je perds le bouton "Compatibility Mode" quand tous les fichiers JavaScript que je mentionne sont présents ensemble. Si j'utilise la barre d'outils Developer avec IE8 et force le navigateur dans le mode de rendu IE7, tout fonctionne comme prévu. Pas d'erreurs Je le mets en mode de rendu IE8 et pas de joie. Complètement frustrant. –
Dans les outils de développement IE (appuyez sur F12), vous pouvez voir dans quel mode se trouve la page. Si vous voyez l'actualisation de la page et un ballon indiquant qu'un problème avec cette page a provoqué une actualisation de la compatibilité, cela signifie vous avez en effet atteint un "hard assert" (bogue dans le code de mise en page IE) qui devra être travaillé pour garder la page en mode IE8 Standards. – EricLaw