我想在菜单栏上显示一个图标。我使用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();
});

请建议如何在菜单项上显示图标,而不是显示标签。

#1楼 票数:1

根据文档,无法使用dijit/PopupMenubarItem进行此操作。 http://dojotoolkit.org/reference-guide/1.9/dijit/MenuBar.html#icons

另一种方法是使用dijit / ToolBar和相应的下拉按钮

另外,要使用图标,您还需要使用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

  ask by user3692021 translate from so

未解决问题?本站智能推荐:

2回复

基于基于列表的菜单隐藏或显示div内容的最佳方法

我必须根据菜单选择显示或隐藏div的内容。 下面是我的结构 我也找到了一个关于堆栈溢出的例子,它做了类似的事情。 好像使用我不熟悉的Dojo 。 还有其他简单的脚本来做到这一点吗? 我的小提琴示例: http : //jsfiddle.net/bG46Z/1/
4回复

CSS菜单vsJavaScript菜单

在制作下拉菜单时,有jQuery菜单,例如superfish和纯CSS菜单。 JS菜单和CSS菜单之间有什么区别吗? 我不需要onclick事件来覆盖默认锚点。 我只需要能够单击菜单项,然后按照<a href="...">...</a>到另一个页面。
3回复

什么样的库可用于显示图形对象和右键单击上下文菜单

目标:开发一个基于Web的NMS界面,以显示网络拓扑(例如,交换机,路由器,链接,端主机)。 每个节点都应该是“可移动的”(可以手动拖动到适当的位置,也可以通过算法计算出它们的最佳位置)。 我应该能够放大网络图(例如,是否有许多节点集群,而我想专注于特定的节点集群)。 我应该能够右键单击任
1回复

Dojo树菜单展开节点OnMouserOver

嗨我在我的应用程序中使用dojo树菜单。 我正在使用onClick事件来扩展特定的树节点。 我想要的是,每当我将鼠标悬停在正图像上时,它应该通过将鼠标悬停在它上面来扩展该节点的内容。 这是代码 - 我该怎么做 ? 有人可以帮忙吗?
1回复

使用javascript从html选择菜单更改dojo滑块的最小值

我想使用html选择菜单更改dojo滑块的最小值。 我尝试使用onchange函数,但遇到了一些问题。 这是我的起始代码。 require(["dojox/form/HorizontalRangeSlider", "dojo/dom", "dojo/domReady!"], func
1回复

dojoxhrgetloadhtml不显示dojo对象

我正在使用dojo 1.9。 使用xhr.get加载包含dojo对象的html文件。 尽管html页面显示文本,但没有显示dojo对象。 Coad如下窃听。 main.js page1.html index.html
1回复

显示鼠标指针问题附近的信息

我有可用的JQuery和Dojo,并且需要在鼠标指针附近显示信息(如工具提示)。 更清楚地说,我有Dojo滑块,而在用户滑动时,我需要像工具提示一样在鼠标周围显示一些信息(小时和分钟)。 如何解决呢? 在Dojo或Jquery或JavaScript中是否已完成此功能?
1回复

显示未来的日期和时间

我想在日期和时间字段组件中显示将来的日期和时间。 下面是示例代码: 在上面的代码中, 最小约束用于禁用8:00 AM之前的时间,但是我想禁用过去的时间,如果用户选择将来的日期,则不应禁用该时间。请提出建议。 谢谢。 -编辑-jsp页面: JS: