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

Question

我想为子菜单创建弹出式子菜单项。请找到 fiddle: http://jsfiddle.net/nw9tU/353/。我有一个菜单栏，单击它会显示子菜单项，当我将鼠标悬停在“保存”子菜单项上时，它必须弹出其他 2 个子菜单项，如“全部保存”和“另存为”。请建议如何将弹出子菜单项添加到子菜单项。

请找到下面的代码：

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，因为我需要显示菜单项的图标而不是上面显示的名称 fiddle。

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

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

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

adding popup submenu items to the submenu

javascript

dojo

jsp

menu