0

Firefox 9 でのみテスト済み (今のところ)。

次の HTML で、次のようclass="yui3-skin-sam"に BODY タグから main_menu DIV タグに移動すると:

<div id="main_menu" class="yui3-skin-sam yui3-menu yui3-menu-horizontal yui3-menubuttonnav">

非常に異なる外観になります (メニュー背景のグラフィックがありません)。ただし、main_menu DIV と、class="yui3-skin-sam"スキンを適用する他の DIV をラップすると、問題なく動作します。なんで？BODY全体とラップされたDIVで機能するのと同じように、1つのDIVで機能させることは可能ですか?

<html>
<head>
    <script src="http://yui.yahooapis.com/3.5.0/build/yui/yui-min.js">
    </script>
</head>
<body class="yui3-skin-sam">
    <div id="main_menu" class="yui3-menu yui3-menu-horizontal yui3-menubuttonnav">
        <div class="yui3-menu-content">
            <ul class="first-of-type">
                <li class="yui3-menu-item">
                    <a class="yui3-menuitem-content" href="#">Home</a>
                </li>
                <li>
                    <a class="yui3-menu-label" href="#search_menu"><em>Search</em></a>
                    <div id="search_menu" class="yui3-menu">
                        <div class="yui3-menu-content">
                            <ul>
                                <li class="yui3-menuitem">
                                    <a class="yui3-menuitem-content" href="http://www.google.ca">Google</a>
                                </li>
                                <li class="yui3-menuitem">
                                    <a class="yui3-menuitem-content" href="http://www.yahoo.ca">Yahoo</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <script>
        YUI().use('node-menunav', function(Y) 
        {
            var menu = Y.one("#main_menu");

            menu.plug(Y.Plugin.NodeMenuNav);

            menu.get("ownerDocument").get("documentElement").removeClass("yui3-loading");
        });
    </script>
</body>

4

1 に答える 1

1

ほぼすべてのYUIウィジェットは、次のようなCSSスタイル宣言を使用します。

.yui3-skin-sam .yui3-some-widget-name ... {
   ...
}

それよりも

.yui3-skin-sam.yui3-some-widget-name ... {
   ...
}

したがって、ウィジェットがスキンクラスを持つコンテナの子にあるという暗黙の仮定があります。通常、これは最も理にかなっています。なぜなら、通常、一貫したスキンを持つ一連のウィジェットをグループ化する必要があるからです。したがって、（あなたが発見したように）スキンを適用する最も簡単な方法divは、スキンクラスをメニューに適用する追加のコンテンツを用意することです。

于 2012-04-20T17:04:44.290 に答える