Question

我有以下代码：

require(['dojo/dom', 'dijit/Menu', 'dijit/MenuItem', 'dijit/CheckedMenuItem', 'dijit/MenuSeparator', 'dijit/PopupMenuItem', 'dojo/on'],
    function(dom, menu, menuItem, checkedMenuItem, menuSeparator, popupMenuItem, on)
    {
        var pMenu= new menu({
            targetNodeIds: ['moreOptionsImage1', 'moreOptionsImage2'],
            leftClickToOpen: true
        });


        pMenu.addChild(new menuItem({
            label : "See Description",
            iconSrc: "description.png"
        }));

        pMenu.startup();


    });

但是菜单中没有显示文件description.png。我做的事情显然是非常错误的吗？

编辑：我认为CSS中有一个叫做图像类的东西，可以使用它插入图像。但还有其他办法吗？不使用图像类吗？

Answer 1

Dijits中没有支持图标的iconSrc参数。指定自定义图标的默认Dijit方式是在初始化Dijit时使用iconClass参数：

pMenu.addChild(new menuItem({
    label : "See Description",
    iconClass: "myCustomIcon"
}));

您需要在样式表中为myCustomIcon类添加规则：

.myCustomIcon {
    background-image: url('myCustomIcon.png');
    background-repeat: no-repeat;
    width: 18px;
    height: 18px;
    text-align: center;
}

那就是它，仅此而已。如果你想添加多个自定义图标，你可以考虑为它们创建一个imagesprite，一个很好的阅读，＆＃34;主题和主题＆＃34;可以在参考指南中找到：

https://dojotoolkit.org/reference-guide/1.10/dijit/themes.html#icons

如何在dijit.menuItems中使用自己的图标？

1 个答案: