jQuery + Superfish + Supersubs + Прототип + IE = FAIL! - PullRequest
Новая
       9

jQuery + Superfish + Supersubs + Прототип + IE = FAIL!

0 голосов
/ 03 марта 2010

Я использую плагин меню Superfish для jQuery для отображения вертикального меню на некоторых страницах. Я также использую плагин Supersubs.js, чтобы убедиться, что каждый уровень в системе меню такой же широкий, как и самый широкий элемент LI.

Я взял файл EXAMPLE.HTML, включенный в zip-файл загрузки, и просто добавил библиотеку prototype.js в исходный код.

Как и следовало ожидать, FF, Chrome, Safari правильно отображают меню и используют плагин supersubs, чтобы убедиться, что каждый уровень меню по крайней мере такой же ширины, как и самый широкий элемент.

А потом есть IE .....

Как только вы добавляете библиотеку Prototype.js на страницу, IE игнорирует плагин Supersubs.

Вот пример 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>

Я пробовал jQuery.noConflict (). Я изменил источник в файлах плагинов, чтобы использовать jQuery вместо $, хотя они используют формат (function ($) {}) (jQuery); и это не должно иметь значения.

Может кто-нибудь помочь с этим? Бут, чтобы вырвать мои волосы.

Заранее спасибо!

1 Ответ

0 голосов
/ 04 марта 2010

Ищите экземпляры в плагине, имена переменных которых совпадают с именами классов или идентификаторами, такими как 

menu = $('#menu');

и вместо этого сделайте 

var menu = $('#menu');

Это выстрел в темноте, но всякий раз, когда у меня IE, только ошибки, я ищу это при использовании Prototype.js.

...