Question

我想为子菜单创建弹出子菜单项。请找小提琴：http://jsfiddle.net/nw9tU/353/。我有一个菜单栏，点击它，它会显示子菜单项，当我将鼠标悬停在Save子菜单项上时，它必须弹出其他2个子菜单项，如Save ALL和Save AS。请建议如何将弹出子菜单项添加到子菜单项。

请找到以下代码：

require(["dijit/form/DropDownButton", "dijit/DropDownMenu", "dijit/MenuItem", "dojo/dom", "dojo/domReady!"],
        function(DropDownButton, DropDownMenu, MenuItem, dom){
    var menu = new DropDownMenu({ style: "display: none;"});
    var menuItem1 = new MenuItem({
        label: "Save",
        iconClass:"dijitEditorIcon dijitEditorIconSave",
        onClick: function(){ alert('save'); }
    });
    menu.addChild(menuItem1);

    var menuItem2 = new MenuItem({
        label: "Cut",
        iconClass:"dijitEditorIcon dijitEditorIconCut",
        onClick: function(){ alert('cut'); }
    });
    menu.addChild(menuItem2);

    var button = new DropDownButton({
        iconClass:"dijitEditorIcon dijitEditorIconCut",
        name: "programmatic2",
        dropDown: menu,
        id: "progButton"
    });
    dom.byId("dropDownButtonContainer").appendChild(button.domNode);
});

我正在使用dropdownButton和DropDownMenu API，因为我需要显示菜单项的图标而不是显示名称，如上面的小提琴所示。

Answer 1

您应该查看this，了解构建弹出子菜单所需的工具。

基本上，您需要使用MenuItems创建一个菜单，然后将弹出菜单项添加到原始DropDownMenu。请参阅以下代码：

    var saveMenu = new Menu();
    var saveAllItem = new MenuItem({
        label: "Save All",
        onClick: function () {
            alert('save all');
        }
    });
    var saveAsItem = new MenuItem({
        label: "Save As",
        onClick: function () {
            alert('save as');
        }
    });
    saveMenu.addChild(saveAllItem);
    saveMenu.addChild(saveAsItem);
    menu.addChild(new PopupMenuItem({
        label: "Save",
        iconClass: "dijitEditorIcon dijitEditorIconSave",
        popup: saveMenu
    }));

您还可以在此处查看更新的小提琴：http://jsfiddle.net/nw9tU/355/

将弹出子菜单项添加到子菜单

1 个答案: