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

Question

我正在尝试通过 javascript 制作一个通用应用程序。我在 msdn 网站上尝试了一个示例，但是当您打开 splitview 时，“nav-commands”类没有显示。我使用 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 Pane

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 文件中引用新库的标签。