后退按钮未出现在地铁风格应用程序中

我已经按照MSDN上的教程进行操作了。html/javascript metro 风格应用程序的默认后退按钮不会出现在任何地方。

然后，我创建了新项目（网格应用程序、空白应用程序、导航应用程序），即使它是在代码中定义的，它也不会显示。但是，从 Windows 应用商店安装的其他应用都显示后退按钮。

还有其他人在后退按钮上有这个问题吗？

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>homePage</title>
    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0.RC/css/ui-light.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>
    <link href="/css/default.css" rel="stylesheet" />
    <link href="/pages/home/home.css" rel="stylesheet" />
    <script src="/pages/home/home.js"></script>
</head>
<body>
    <!-- The content that will be loaded and displayed. -->
    <div class="fragment homepage">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Dude!</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <p>Content goes here.</p>
        </section>
    </div>
</body>
</html>

也许你已经尝试过了，但HTML本身是不够的。模板添加的按钮需要 JavaScript 才能启用后退按钮。

默认情况下，该按钮与 disabled 属性集一起添加，但如果脚本确定有要导航回的内容，则会删除该属性。

例如，下面是网格应用模板中的相关部分（在/js/navigator.js 中）：

        // This function updates application controls once a navigation
        // has completed.
        navigated: function () {
            // Do application specific on-navigated work here
            var backButton = this.pageElement.querySelector("header[role=banner] .win-backbutton");
            if (backButton) {
                backButton.onclick = function () { nav.back(); };
                if (nav.canGoBack) {
                    backButton.removeAttribute("disabled");
                } else {
                    backButton.setAttribute("disabled", "disabled");
                }
            }
        },

您可以看到它按类.win-backbutton查找后退按钮，如果nav.canGoBack为 true，则通过删除禁用来启用后退按钮。 :)

相关内容

最新更新

热门标签：