關於菜單欄顯示圖標

我想在menubar.Iam上使用dojo創建菜單欄來顯示圖標。請找到提琴：http://jsfiddle.net/nw9tU/351/關於菜單欄顯示圖標

我試過uisng圖標屬性來顯示菜單欄上的圖標，但它沒有奏效。下面是示例代碼：

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(); 
});

請建議如何顯示在菜單項上，而不是顯示標籤圖標。

來源

2015-05-20 user3692021

根據文檔，不可能使用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

來源

2015-05-20 19:15:20 frank

Thanks @frank。但是，當我們使用dijit/ToolBar和相應的下拉按鈕時，我們是否可以實現與http://jsfiddle.net/nw9tU/351/中顯示的相同類型的下拉菜單。任何的意見都將會有幫助。謝謝。 – user3692021

檢查編輯的答案。 – frank

關於菜單欄顯示圖標

回答

相關問題