為什么我看不到SplitViewCommand輸入？

Question

我是WinJS開發的新手，我從WinJS教程開始。 更新我的HTML並添加WinJS.UI.SplitView之后，我看不到WinJS.UI.SplitViewCommands。

順便說一句，當我切換窗格時，我也看不到任何圖標

結果

這是我的代碼。

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更新到最新版本來修復。 基於更改日志，SplitViewCommand是WinJS v4.2的新功能

為什么我看不到SplitViewCommand輸入？

問題描述

1 個解決方案

解決方案1
2 已采納 2015-10-21 03:39:24

為什么我看不到SplitViewCommand輸入？

問題描述

1 個解決方案

解決方案1 2 已采納 2015-10-21 03:39:24

解決方案1
2 已采納 2015-10-21 03:39:24