Question

仅在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包装起来，它就可以了。为什么？是否有可能让它只对一个DIV起作用，就像它对整个BODY和包裹的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>

Answer 1

几乎所有的YUI小部件都使用类似于

的CSS样式声明

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

而不是

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

因此，隐含的假设是窗口小部件位于某个容器的子容器中，该容器具有外观类。这通常是最有意义的，因为通常你会想要将一堆具有一致皮肤的小部件组合在一起。因此（正如您所发现的）应用皮肤的最简单方法是只添加一个包含div的外观，将皮肤类应用于菜单。

YUI3皮肤类的位置改变了外观

1 个答案: