快速入门：为布局和导航使用中心控件

项目
12/11/2015

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅最新文档 ]

了解如何使用 JavaScript 将一个 Hub 控件添加到你的 Windows 应用商店应用中。

有关为你的应用选择最佳导航模式的帮助，请参阅导航模式。

同样，你可以在操作时参阅平面导航和分层导航模式，它们是应用功能大全系列的一部分。

先决条件

说明

1. 使用 Blank App 模板新建项目

启动 Microsoft Visual Studio Express 2013 for Windows。
在“起始页”选项卡中，单击“新建项目”****。随即将打开“新建项目”对话框。
在“已安装”****窗格中，展开“模板”和“JavaScript”****并单击“Windows 应用商店应用”模板类型。JavaScript 可用的项目模板随即将显示在对话框的中心窗格中。
在中心窗格中，选取“空白应用程序”****项目模板。
在“名称”文本框中，键入“集线器演示”****。
单击“确定”以创建项目。

2. 将集线器定义添加到该项目

Hub 控件既可以声明方式在 HTML 页面中进行定义，也可在运行时使用与此页面一起加载的 JavaScript 进行定义。此示例将使用 HTML 标记以声明方式创建集线器。

打开 default.html 并将以下 HTML 插入 body 元素中。集线器必须是 body 元素的直接子元素。在文档对象模型 (DOM) 中，最好在放置上下文命令之前放置全局命令，以便在用户调整你的应用大小时获得最佳布局。

本示例声明性地添加一个集线器，它包含 3 个 HubSection 对象，其中第二个 HubSection 是 Hub 中第一个可见的部分。为 Hub 和 HubSection 控件使用默认样式或编写自己的级联样式表 (CSS)。


<div data-win-control="WinJS.UI.Hub" id="hub"
    data-win-options="{
        sectionOnScreen : '1',
    }">
    <div data-win-control="WinJS.UI.HubSection"
        data-win-options="{
            header: 'Ancient Greek authors',
            isHeaderStatic: true
        }">
        My favorite authors of Ancient Greek (Homeric, Attic, Ionic):
        <ul>
            <li>Homer</li>
            <li>Herodotus</li>
            <li>Thucydides</li>
            <li>Plato</li>
        </ul>
    </div>
    <div data-win-control="WinJS.UI.HubSection"
        data-win-options="{
            header: 'Latin authors'
        }">
        <div>
            My favorite authors of works in Classical Latin:
            <ul>
                <li>Marcus Tullius Cicero</li>
                <li>Caius Julius Caesar</li>
                <li>Publius Virgilius Maro (Virgil)</li>
                <li>Titus Livius Patavinus (Livy)</li>
            </ul>
        </div>
    </div>
    <div data-win-control="WinJS.UI.HubSection"
        data-win-options="{
            header: 'English authors',
            isHeaderStatic: false
        }">
        My favorite authors of works in Middle and Early Modern English: 
        <ul>
            <li>Geoffrey Chaucer</li>
            <li>William Shakespeare</li>
            <li>Christopher Marlowe</li>
        </ul>
    </div>
</div>

3. 添加代码来处理集线器事件

本示例中的两个 HubSection 对象具有动态标头：默认情况下，它们将在单击时引发 Hub.onheaderinvoked 事件。要设置动态或静态标头，请使用 HubSection.isHeaderStatic 属性，它在默认情况下设置为 false。

在 Hub.onheaderinvoked 事件标头中，HubSection 对象或已调用的 HubSection 对象的索引可以从事件参数中提取出来（该索引基于零）。

下面的示例为 Hub.onheaderinvoked 事件添加了一个处理程序。该处理程序获取被调用的 HubSection 的索引并设置 Hub.sectionOnScreen 值。

在“解决方案资源管理器”中，打开 js 文件夹中的 default.js。

在 default.js 文件中，将现有代码替换为以下代码。


(function () {
    "use strict";

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

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // Add your initialization code here.
            } else {
                // Restore app state here.
            }
            args.setPromise(WinJS.UI.processAll());
        }

        // Get the hub control from the HTML page and
        // add a handler to the headerInvoked event.
        hub = WinJS.Utilities.query("#hub")[0];
        hub.winControl.onheaderinvoked = onHeaderInvoked;
    };

    app.oncheckpoint = function (args) {
        // Add app suspension code here.
    };

    // When a HubSection header is clicked, call this code to
    // make the section completely visible within the hub.
    function onHeaderInvoked(args) {
        hub.winControl.sectionOnScreen = args.detail.index;
    }

    app.start();
})();

将运行时环境设置为“模拟器”****并按 F5 以运行应用。
更改模拟器窗口的分辨率，使中心页面向左平移时，最后的中心部分的一部分处于屏幕外。
单击中心内最后的部分可见部分的标头以平移中心页面，以便使中心部分完整可见。

4. 在中心应用内导航

中心应用采用称为分层导航模式的模式。有关 Windows 应用商店应用中导航用户体验的其他信息，请参阅导航模式。

如果应用包含用户可以浏览的较大内容集或许多不同部分的内容，你通常要为用户提供一种方法来按照他们向前导航的同一路径快速向后导航。中心应用中的页面和部分标题可以托管 BackButton 控件。每个页面可以托管一个后退按钮，该按钮将保持隐藏状态，直到你从另一个页面导航到该页面为止，此时后退按钮将在页面上可见。BackButton 控件可以声明方式在页面的 HTML 中创建，或使用 JavaScript 在运行时创建。

BackButton 控件并不要求你进行大量工作。实际上，大部分与后退按钮的导航功能相关联的代码都已内置到 Windows JavaScript 库 (WinJS) 平台中。你仅需在你的 HTML 标记中声明该控件，如下所示。

<!DOCTYPE html>
<html>
<head>
    <title>home</title>
</head>
<body>
    <header role="banner">
        <button data-win-control="WinJS.UI.BackButton"></button>
        <h1 class="titlearea">Home</h1>
    </header>
</body>
</html>

如果不设置样式，BackButton 控件将显示在页面标题上方单独的块中。为了实现 Windows 样式（其中后退按钮将与标题内联显示），你必须向你的项目添加一些自定义 CSS。具体而言，你需要在父元素（<section> 标记）内创建可以并排排列两个元素的网格。

在default.css（在 css 文件夹中）中，添加以下 CSS 代码以调整 BackButton 控件的布局和页面上的标题。

#contenthost {
    height: 100%;
    width: 100%;
}

header[role=banner] {
    display: -ms-grid;
    -ms-grid-columns: 37px 83px 1fr;
    -ms-grid-rows: 1fr;
}

    header[role=banner] button {
        -ms-grid-column: 2;
        margin-top: 57px;
    }

    header[role=banner] h1 {
        -ms-grid-column: 3;
        margin-top: 37px;
    }

摘要

在本快速入门中，你已添加带三个 HubSection 对象的 Hub 控件。此外，还向 Hub.onheaderinvoked 事件中添加一个简单的处理程序函数。

你还向应用中的每个应用添加了 BackButton 控件。

Share via