DOJO - 爲DropDownMenu隱藏菜單項

第一次加載時菜單項散亂。尋找一種方法來隱藏組件，直到它完全加載並適合頁面。DOJO - 爲DropDownMenu隱藏菜單項

<script> 
    require([ "dijit/DropDownMenu", "dijit/MenuSeparator", 
      "dijit/PopupMenuItem", "dijit/MenuItem", 
      "dijit/TooltipDialog" ]); 
</script> 

<div data-dojo-type="dijit.DropDownMenu" id="navMenu" > 

<div data-dojo-type="dijit.MenuItem" class="item dijitMenuItemSelected">Home</div> 

<div data-dojo-type="dijit.PopupMenuItem" class="item"> 
    <span>Services</span> 
    <div data-dojo-type="dijit.DropDownMenu" id="submenu2"> 
     <div data-dojo-type="dijit.MenuItem" data-dojo-props="onClick:function(){}">Consulting</div> 
    </div> 
</div> 

<div data-dojo-type="dijit.MenuItem" class="item">Why us?</div> 

<div data-dojo-type="dijit.MenuItem" class="item">FAQs</div> 

<div data-dojo-type="dijit.MenuItem" class="item">Contact us</div>

來源

2012-02-26 vinodn

你總是可以添加樣式=「顯示：無」到你navMenu，然後在它的頁面變化的結束「顯示：塊」或「顯示：內聯」這取決於你如何希望它看起來。 – scheibk 2012-02-26 19:29:54

這工作..很酷！ – vinodn 2012-02-27 05:32:52

從你<script>我必須改變這一點。並添加功能改變風格，這將在加載完成。

<script> 
    require(["dojo/dom", "dojo/dom-style", "dijit/DropDownMenu", "dijit/MenuSeparator", "dijit/PopupMenuItem", "dijit/MenuItem", "dijit/TooltipDialog", "dojo/domReady!"], 

    function (dom, domStyle) { 
     var controlDisplay = dom.byId("controlDisplay"); 
     domStyle.set(controlDisplay, "display", "block"); 
    }); 
</script>

在正文中，我添加了隱藏所有項目的<div>。

<div id="controlDisplay" style="display:none;"> 
    <div data-dojo-type="dijit.DropDownMenu" id="navMenu"> 
     <div data-dojo-type="dijit.MenuItem" class="item dijitMenuItemSelected">Home</div> 
     <div data-dojo-type="dijit.PopupMenuItem" class="item"> 
      <span>Services</span> 
      <div data-dojo-type="dijit.DropDownMenu" id="submenu2"> 
       <div data-dojo-type="dijit.MenuItem" data-dojo-props="onClick:function(){}">Consulting</div> 
      </div> 
     </div> 
     <div data-dojo-type="dijit.MenuItem" class="item">Why us?</div> 
     <div data-dojo-type="dijit.MenuItem" class="item">FAQs</div> 
     <div data-dojo-type="dijit.MenuItem" class="item">Contact us</div> 
    </div> 
</div>

首先，它不會出現，直到負載完成。 JS將更改<div>的樣式以顯示全部。

見JSFiddle

來源

2012-02-27 02:19:32 OammieR

它的工作後，我添加了顯示下面的腳本：沒有風格。

require(["dojo/ready", "dojo/parser", "dijit/registry", "dijit/Dialog"], function(ready, parser, registry){ 
ready(function(){ 
    require(["dojo/_base/fx", "dojo/on", "dojo/dom", "dojo/domReady!"], function(fx, on, dom) { 
     fx.fadeOut({duration: 250, node: dom.byId("loader"), onEnd: function() { loader.style.display = "none"; } }).play(250); 
    }); 
}); });

來源

2012-02-27 08:12:07 vinodn

DOJO - 爲DropDownMenu隱藏菜單項

回答

相關問題