使用 Dojo 开发菜单应用（5）静态菜单

look_w

静态菜单静态菜单是静态定为到窗体某个位置的菜单，如下图所示：
图 5. 静态菜单静态菜单与上下文菜单的显示效果是一样的，然而，静态菜单会在网页加载完后固定显示于窗体某个位置，并且不会像上下文菜单一样会因鼠标事件的发生而消失或显示，它的典型应用为作为导航菜单显示在窗体的左侧，用户可以根据其菜单项进行信息的过滤和查找。
实现上述功能菜单的代码为：
清单 6. 静态菜单

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55

<!-- 静态菜单，不需要绑定 DOM 节点，加载时直接显示在页面上 --> <div dojoType="dijit.Menu" id="navMenu"> <!-- 其他用法与上下文菜单相同 --> <div dojoType="dijit.PopupMenuItem">   <span>Africa</span>   <div dojoType="dijit.Menu">    <div dojoType="dijit.MenuItem">Egypt</div>    <div dojoType="dijit.MenuItem">Kenya</div>    <div dojoType="dijit.MenuItem">Sudan</div>   </div> </div> <div dojoType="dijit.PopupMenuItem">   <span>Asia</span>   <div dojoType="dijit.Menu">    <div dojoType="dijit.MenuItem">China</div>    <div dojoType="dijit.MenuItem">India</div>    <div dojoType="dijit.MenuItem">Russia</div>    <div dojoType="dijit.MenuItem">Mongolia</div>   </div> </div> <div dojoType="dijit.PopupMenuItem">   <span>Europe</span>   <div dojoType="dijit.Menu">    <div dojoType="dijit.MenuItem">Germany</div>    <div dojoType="dijit.MenuItem">France</div>    <div dojoType="dijit.MenuItem">Spain</div>    <div dojoType="dijit.MenuItem">Italy</div>   </div> </div> <div dojoType="dijit.PopupMenuItem">   <span>North America</span>   <div dojoType="dijit.Menu">    <div dojoType="dijit.MenuItem">Mexico</div>    <div dojoType="dijit.MenuItem">Canada</div>    <div dojoType="dijit.MenuItem">United States of America</div>   </div> </div> <div dojoType="dijit.PopupMenuItem">   <span>South America</span>   <div dojoType="dijit.Menu">    <div dojoType="dijit.MenuItem">Brazil</div>    <div dojoType="dijit.MenuItem">Argentina</div>   </div> </div> <div dojoType="dijit.MenuSeparator"></div>    <div dojoType="dijit.PopupMenuItem">   <span>Different Popup</span>   <div dojoType="dijit.ColorPalette"></div> </div> <div dojoType="dijit.MenuSeparator"></div>    <div dojoType="dijit.CheckedMenuItem" checked="true"   onChange="if(arguments[0]) console.log('checked');   else console.log('unchecked');">Checked</div>

可以看出，静态菜单的实现与上下文菜单的代码几乎是一样的，有区别的地方在于：

• 静态菜单的 style 中 display 取的是默认值 inline，因为它要求页面加载完就显示给用户。
• 静态菜单的 contextMenuForWindow 取的是默认值 false，避免用户在浏览器任意位置右键单击后重新加载该菜单。
• 静态菜单不需要绑定 targetNodeIds，不会因用户在特定节点右键单击后浏览器重新加载该菜单。