Кнопка «Назад» не отображается в приложении в стиле Metro

Я следил за учебником в MSDN. Кнопка «Назад» по умолчанию для приложений в стиле метро html/javascript нигде не отображается.

Затем я создал новые проекты (сетевое приложение, пустое приложение, навигационное приложение), и хотя оно определено в коде, оно не отображается. Однако все другие приложения, установленные из Магазина 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>

javascript html microsoft-metro winjs windows-8
person jay_t55    schedule 17.08.2012    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Возможно, вы уже пробовали это, но одного HTML будет недостаточно. Кнопка, добавленная шаблонами, требует JavaScript, чтобы активировать кнопку «Назад».

По умолчанию кнопка добавляется с установленным атрибутом disabled, но скрипт удаляет этот атрибут, если определяет, что есть что-то, к чему можно вернуться.

Например, вот соответствующая часть шаблона приложения Grid (в /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 истинно, включает кнопку «Назад», удаляя отключение. :)

person Chris Bowen - MSFT    schedule 17.08.2012
comment
Интересно. Спасибо за подробный ответ @Chris, очень признателен. :) - person jay_t55; 18.08.2012