Как я могу использовать свои собственные значки в dijit.menuItems?

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 не отображается в меню. Я что-то явно делаю неправильно?

EDIT: Я понял, что в CSS есть что-то вроде класса изображения, и изображения могут быть вставлены с его помощью. Но есть ли другой способ сделать это? Без использования класса изображения, возможно?

Answer 1

В Dijits отсутствует параметр iconSrc, который поддерживает значки. По умолчанию Dijit способ задания пользовательского значка, чтобы использовать параметр iconClass при инициализации вашей Dijit:

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 для них, хорошо читать на том, что, «Тему и тематизацию» можно найти в справочном руководстве:

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