2012-04-13 8 views
0

Firefox 9(これまで)でのみテストされています。以下のHTMLでスキンクラスのYUI3の位置が変更されました

あなたがそうのようなMAIN_MENUのDIVタグにBODYタグからclass="yui3-skin-sam"を移動した場合:

<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のために働くのと同じ方法で、ただ一つの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> 

答えて

1

ほぼすべてのYUIウィジェットのは

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

ではなく

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

のように見えるCSSスタイル宣言を使用するので、そのウィジェット暗黙の前提がありますスキンクラスを持ついくつかのコンテナの子にあります。これは、通常、ウィジェットの束を一貫したスキンと一緒にグループ化する必要があるため、通常は最も理にかなっています。あなたが発見したように、スキンを適用する最も簡単な方法は、メニューにスキンクラスを適用する特別なdivを含むだけです。

関連する問題