关于菜单栏以显示图标

Question

我想在菜单栏上显示一个图标。我使用dojo创建菜单栏。 请找到小提琴： http : //jsfiddle.net/nw9tU/351/

我尝试了uisng icon属性在菜单栏上显示图标，但是没有用。 下面是示例代码：

require([
    "dijit/MenuBar",
    "dijit/PopupMenuBarItem",
    "dijit/Menu",
    "dijit/MenuItem",
    "dijit/DropDownMenu",
    "dijit/PopupMenuItem",
    "dojo/domReady!"
],function(MenuBar, PopupMenuBarItem, Menu, MenuItem, DropDownMenu,PopupMenuItem){
    var pMenuBar = new MenuBar({
     });


   var pSubMenu = new DropDownMenu({});
    pSubMenu.addChild(new MenuItem({
        label: "File item #1"
    }));
    pSubMenu.addChild(new MenuItem({
        label: "File item #2"
    }));

    pMenuBar.addChild(new PopupMenuBarItem({
        label : "Home",
       icon: 'https://avatars1.githubusercontent.com/u/5500999?v=2&s=16',
        popup: pSubMenu
    }));

    var withdrawMenu = new Menu({
                id: "withdrawMenu"
            });
    withdrawMenu.addChild(new MenuItem({
                id: "savings",
                label: "Savings Acc"
            }) );
    withdrawMenu.addChild(new MenuItem({
                id: "checking",
                label: "Checking Acc"
            }) );

    var pSubMenu2 = new DropDownMenu({});
    pSubMenu2.addChild(new MenuItem({
        label: "Credit"
    }));

     pSubMenu2.addChild(new PopupMenuItem({
                id: "withdraw",
                label: "Withdraw",
                popup: withdrawMenu
            }) );

    pSubMenu2.addChild(new MenuItem({
        label: "Retail"
    }));  

    pMenuBar.addChild(new PopupMenuBarItem({
        label: " || Banking",
        popup: pSubMenu2
    }));

    pMenuBar.placeAt("menuBar");
    pMenuBar.startup();
});

请建议如何在菜单项上显示图标，而不是显示标签。

Answer 1

根据文档，无法使用dijit/PopupMenubarItem进行此操作。 http://dojotoolkit.org/reference-guide/1.9/dijit/MenuBar.html#icons

另一种方法是使用dijit / ToolBar和相应的下拉按钮

另外，要使用图标，您还需要使用iconClass属性，并将CSS样式添加到文档中。 例如

在javascript文件中。

new MenuItem({
        label: "File item #1",
        iconClass:'myIcon'
    }

在CSS文件或样式标签中，添加以下CSS。

.myIcon {
            background-image: url("https://avatars1.githubusercontent.com/u/5500999?v=2&s=16");
            width: 18px;
            height: 18px;
        }

EDIT1：

如上所述，您需要结合使用dijit / ToolBar ，dijit / DropDownMenu和dijit / form / DropDownButton 。 查看链接。

http://dojotoolkit.org/reference-guide/1.9/dijit/form/DropDownButton.html