2015-05-20 4 views
0

Я хочу отобразить значок на панели меню. Я создаю меню, используя додзё. Пожалуйста, найдите скрипту: 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(); 
}); 

Пожалуйста, подсказывают, как показывать значок на пункт меню вместо того чтобы показывать этикетку.

ответ

1

Это невозможно сделать с помощью dijit/PopupMenubarItem согласно документу. http://dojotoolkit.org/reference-guide/1.9/dijit/MenuBar.html#icons

Альтернативой является использование dijit/ToolBar с соответствующими dropdownbuttons

также использовать значок, который вы должны использовать свойство 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

+0

С благодарностью @frank. Но можем ли мы достичь такого же раскрывающегося меню, как показано на http://jsfiddle.net/nw9tU/351/, когда мы используем dijit/ToolBar с соответствующими dropdownbuttons. Любые предложения будут полезны. Благодарю. – user3692021

+0

Проверьте отредактированный ответ. – frank

Смежные вопросы