0

jQuery 用の Superfish メニュー プラグインを使用して、一部のページに垂直メニューを表示しています。また、Supersubs.js プラグインを使用して、メニュー システムの各レベルが最も幅の広い LI 要素と同じ幅になるようにしています。

ダウンロード zip ファイルに含まれている EXAMPLE.HTML ファイルを取得し、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() を試しました。(function($) {})(jQuery); の形式を使用していても、$ の代わりに jQuery を使用するようにプラグイン ファイルのソースを変更しました。それは問題ではありません。

誰でもこれを手伝ってもらえますか？私の髪を引っ張る試合。

前もって感謝します！

4

1 に答える 1

0

クラス名または ID と同じ変数名を持つプラグイン内のインスタンスを探します。

menu = $('#menu');

代わりに

var menu = $('#menu');

これは暗闇の中のショットですが、IE のみのバグがあるときはいつでも、Prototype.js を使用するときにこれを探します。

于 2010-03-03T23:49:05.310 に答える