YUI3 Position der Hautklasse ändert Aussehen

Getestet nur in Firefox 9 (bisher).YUI3 Position der Hautklasse ändert Aussehen

Im folgende HTML, wenn Sie die class="yui3-skin-sam" aus dem BODY-Tag zum MAIN_MENU DIV-Tag wie so bewegen:

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

Du ein ganz anderes Aussehen bekommen (die Grafik im Menü Hintergrund fehlt). Wenn ich jedoch mein main_menu DIV mit einem anderen DIV umhülle, das die class="yui3-skin-sam" Skin anwendet, funktioniert es gut. Warum? Ist es möglich, es mit nur einem DIV zu bearbeiten, so wie es für den ganzen BODY und den eingewickelten DIV funktioniert?

<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>

Quelle

2012-04-13 BigMac66

Fast alle der YUI-Widgets verwenden, um eine CSS-Stildeklaration, die dort wie

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

statt

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

So sieht es eine implizite Annahme, dass das Widget ist in einem Kind eines Containers, der eine Hautklasse hat. Dies ist normalerweise am sinnvollsten, da Sie normalerweise eine Gruppe von Widgets mit einer konsistenten Skin gruppieren möchten. Also (wie Sie herausgefunden haben) ist der einfachste Weg, die Skin anzuwenden, nur ein Extra zu haben, das div enthält, das die Skinklasse auf das Menü anwendet.

Quelle

2012-04-20 17:04:44 mjhm

YUI3 Position der Hautklasse ändert Aussehen

Antwort

Verwandte Themen