如何将 WinJS.UI.Menu 放入 win-splitview-content 部分？

Question

我有一个非常简单的应用程序。我从 VS2015 中的 WinJS App (Universal Windows) 模板开始。我有一个拆分视图，在拆分视图内容部分中我有一个菜单。单击控制按钮时会出现菜单，但可以选择 none 个选项。

<div data-win-control="WinJS.UI.SplitView" data-win-options="{closedDisplayMode: 'overlay',panePlacement:'left'}">
    <div class="win-splitview-pane">
    </div>
    <div class="win-splitview-content">
        <button id="selectionButton">Selection</button>
        <div id="selectionMenu" data-win-control="WinJS.UI.Menu">
            <button data-win-options="{label:'Forward',type:'toggle'}" data-win-control="WinJS.UI.MenuCommand"></button>
            <button data-win-options="{label:'Reply',type:'toggle'}" data-win-control="WinJS.UI.MenuCommand"></button>
            <button data-win-options="{label:'Reply All',type:'toggle'}" data-win-control="WinJS.UI.MenuCommand"></button>
        </div>
    </div>
</div>

JavaScript 代码很简单（initSelection 在 app.onactivated 部分调用）：

function initSelection() {
    document.getElementById("selectionButton").addEventListener("click", showFlyout, false);
}
function showFlyout() {
    document.getElementById("selectionMenu").winControl.show(document.getElementById("selectionButton"), "bottom", "left");
}

这可能吗？如何？提前谢谢你。

Answer 1

看来您必须像这样将选择菜单放在拆分视图内容部分之外：

<div data-win-control="WinJS.UI.SplitView" data-win-options="{closedDisplayMode: 'overlay',panePlacement:'left'}">
    <div class="win-splitview-pane">
    </div>
    <div class="win-splitview-content">
        <button id="selectionButton">Selection</button>

    </div>
</div>
<div class="win-interactive" id="selectionMenu" data-win-control="WinJS.UI.Menu">
    <button class="win-interactive" data-win-options="{label:'Forward'}" data-win-control="WinJS.UI.MenuCommand"></button>
    <button class="win-interactive" data-win-options="{label:'Reply'}" data-win-control="WinJS.UI.MenuCommand"></button>
    <button class="win-interactive" data-win-options="{label:'Reply All'}" data-win-control="WinJS.UI.MenuCommand"></button>
</div>

这是 WinJS 团队的推荐：https://github.com/winjs/winjs/issues/1553#issuecomment-159416488

一旦你这样做，它就会起作用。

如何将 WinJS.UI.Menu 放入 win-splitview-content 部分？

How do I put a WinJS.UI.Menu inside of a win-splitview-content section?

javascript

winjs

windows-10

windows-10-universal