个人中心
gpt4 book ai didi

javascript - 为什么我看不到 SplitViewCommand 输入？

转载 作者：可可西里 更新时间：2023-11-01 11:49:45 26 4
gpt4 key购买 nike

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

顺便说一句，当我切换 Pane 时，我也看不到图标

结果 enter image description here

这是我的代码。

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();
})();

最佳答案

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

关于javascript - 为什么我看不到 SplitViewCommand 输入？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32978807/

26 4 0
文章推荐： windows - 什么是 452/0x1C4 CPU？
文章推荐： linux - 具有多个子目录的 Linux 内核模块的 Makefile
文章推荐： c# - 查找屏幕分辨率会导致线程问题
文章推荐： linux - Linux 中的热感知调度程序
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com