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样式。 e.g

在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

关于菜单栏显示图标

1 个答案: