Question

我是WinJS开发的新手，我开始使用WinJS教程。更新我的HTML并添加WinJS.UI.SplitView后，我看不到WinJS.UI.SplitViewCommands。

BTW当我切换窗格时，我看不到图标

结果

这是我的代码。

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>WePin</title>

    <!-- WinJS references -->
    <link href="WinJS/css/ui-dark.css" rel="stylesheet" />
    <script src="WinJS/js/base.js"></script>
    <script src="WinJS/js/ui.js"></script>

    <!-- WePin references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
  </head>
  <body class="win-type-body">
    <div id="app" class="show-home">
      <div class="splitView" data-win-control="WinJS.UI.SplitView">
        <!-- Pane area -->
        <div>
          <div class="header">
            <!--this is a button that allows you to "toggle" the menu in and out of view -->
            <button class="win-splitviewpanetoggle" data-win-control="WinJS.UI.SplitViewPaneToggle"
                        data-win-options="{ splitView: select('.splitView') }"></button>
            <div class="title">SplitView Pane area</div>
          </div>

          <!--this is where the navigation icons go -->
          <div class="nav-commands">
            <div data-win-control="WinJS.UI.SplitViewCommand" data-win-options="{
                    label: 'Alki Trail',
                    icon: 'mappin',
                    onclick: mySplitView.trailClicked
                }"></div>
            </div>
          </div>
          <!--/ Pane area-->

          <!-- Content area -->
          <div class="contenttext"><h2 class="win-h2">SplitView Content area</h2></div>
          <!--/ Content area -->
        </div>
      </div>
    </body>
  </html>

CSS

.content,
#app {
  height: 100%;
}
#app .win-splitviewpanetoggle {
  float: left;
}

/* SplitView pane content style*/
#app .header {
  white-space: nowrap;
}

#app .title {
  font-size: 25px;
  left: 50px;
  margin-top: 6px;
  vertical-align: middle;
  display: inline-block;
}

#app .nav-commands {
  margin-top: 20px;
}

#app .win-splitview-pane-closed .win-splitviewcommand-label {
  /*  Make sure pane content doesn't scroll if 
      SplitViewCommand label receives focus while pane is closed.
  */
  visibility: hidden;
}

/*SplitView content style*/
#app .win-splitview-content {
  background-color: rgb(112,112,112);
}

#app .contenttext {
  margin-left: 20px;
  margin-top: 6px;
}

的Javascript

(function () {
"use strict";

var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;

app.onactivated = function (args) {
    if (args.detail.kind === activation.ActivationKind.launch) {
        if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
            // TODO: This application has been newly launched. Initialize your application here.
        } else {
            // TODO: This application was suspended and then terminated.
            // To create a smooth user experience, restore application state here so that it looks like the app never stopped running.
        }

        args.setPromise(WinJS.UI.processAll());

    }
};

app.oncheckpoint = function (args) {
    // TODO: This application is about to be suspended. Save any state that needs to persist across suspensions here.
    // You might use the WinJS.Application.sessionState object, which is automatically saved and restored across suspension.
    // If you need to complete an asynchronous operation before your application is suspended, call args.setPromise().
};

app.start();
})();

Answer 1

我遇到了同样的问题。通过将WinJS更新为latest version来修复。基于changelog，SplitViewCommand是WinJS v4.2的新功能

为什么我看不到SplitViewCommand输入？

1 个答案: