如何将 WinJS.UI.Menu 放在 win-splitview-content 部分? [英] How do I put a WinJS.UI.Menu inside of a win-splitview-content section?

查看：24
本文介绍了如何将 WinJS.UI.Menu 放在 win-splitview-content 部分?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

<div class="win-splitview-pane">
<div class="win-splitview-content"><button id="selectionButton">选择</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>

用于此的 JavaScript 代码很简单(initSelection 在 app.onactivated 部分中调用):

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

这甚至可能吗?如何?提前致谢.

解决方案

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

<div class="win-splitview-pane">
<div class="win-splitview-content"><button id="selectionButton">选择</button>

<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>

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

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

I have a very simple app. I started with the WinJS App (Universal Windows) template in VS2015. I have a split view and inside the split view content section I have a menu. The menu appears when the control button is clicked but none of the options are selectable.

<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>

The JavaScript code for this is simple (initSelection is called in the app.onactivated section):

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

Is this even possible? How? thank you in advance.

解决方案

Looks like you have to put the selection menu outside of the split view content section like this:

<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>

This is the recommendation from the WinJS team: https://github.com/winjs/winjs/issues/1553#issuecomment-159416488

Once you do this it'll work.

这篇关于如何将 WinJS.UI.Menu 放在 win-splitview-content 部分?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆