代码之家  ›  专栏  ›  技术社区  ›  TheTodd

如何放置WinJS.UI。win splitview内容部分内的菜单?

  •  0
  • TheTodd  · 技术社区  · 8 年前

    我有一个非常简单的应用程序。我从VS2015中的WinJS App(Universal Windows)模板开始。我有一个拆分视图,在拆分视图内容部分有一个菜单。单击控制按钮时会显示菜单,但所有选项都不可选。

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

    这可能吗?怎样提前谢谢你。

    1 回复  |  直到 8 年前
        1
  •  0
  •   TheTodd    8 年前

    看起来您必须将选择菜单放在拆分视图内容部分之外,如下所示:

    <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

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