如何在winjs上制作一个splitview菜单

Question

我正在尝试通过 javascript 制作一个通用应用程序。我在 msdn 网站上尝试了一个示例，但是当您打开 splitview 时 "nav-commands" class 没有显示。我使用 closedDisplayMode = 'none'.

<div id="app">
    <div class="header">
        <button class="win-splitviewpanetoggle"
                data-win-control="WinJS.UI.SplitViewPaneToggle"
                data-win-options="{ splitView: select('.splitView') }"></button>

    </div>
    <div class="splitView" data-win-control="WinJS.UI.SplitView"
         data-win-options="{ closedDisplayMode :'none' , openedDisplayMode : 'inline'}">
        <!-- Pane area -->
        <div><div class="header">
                 <div class="nav-commands">
                     <div data-win-control="WinJS.UI.SplitViewCommand" data-win-options="{ label: 'Home', icon: 'home'}"></div>
                     <div data-win-control="WinJS.UI.SplitViewCommand" data-win-options="{ label: 'Favorite', icon: 'favorite'}"></div>
                     <div data-win-control="WinJS.UI.SplitViewCommand" data-win-options="{ label: 'Settings', icon: 'settings'}"></div>

                 </div>  </div>

        <!-- Content area -->
        <div class="contenttext" id="clock"> </div>
    </div>
</div>

我正在使用从 http://try.buildwinjs.com/playground/ 中找到的这段代码。但是当我使用该应用程序时，没有显示 nac 命令，它只显示 splitview 窗格

Answer 1

我想你在 VS 中使用的是 WinJS 项目模板。 VS 中最新的 WinJS 项目模板使用 WinJS 4.0.1。对于该版本，没有 WinJS.UI.SplitViewCommand 控件。

[NavBarCommand is no longer available for use as of Windows Library for JavaScript (WinJS) 4.2. Instead, use SplitViewCommand. ]

参见 WinJS.UI.NavBarCommand。

因此您可以改用 WinJS.UI.NavBarCommand。

或者您可以从 here 下载最新的 WinJS。替换项目中的 WinJS 库，然后编辑 <script> 和 <link> 标记以引用 index.html 文件中的新库。

如何在winjs上制作一个splitview菜单

how to make a splitview menu on winjs

html

javascript

winjs

win-universal-app