YUI3皮膚類的位置變化外觀

在下面的HTML，如果你從身體標記移動class="yui3-skin-sam"到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>

來源

2012-04-13 BigMac66

幾乎所有的YUI部件的使用CSS樣式聲明，看起來像

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

而不是

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

因此，有一個隱含的假設，即小部件是在一個有皮膚類的容器的孩子。這通常是最有意義的，因爲通常情況下，您想要將一組小部件與一致的外觀組合在一起。所以（正如你發現的那樣）應用皮膚最簡單的方法是隻有一個額外的包含div的應用皮膚類到菜單。

來源

2012-04-20 17:04:44 mjhm

YUI3皮膚類的位置變化外觀

回答

相關問題