Краткое руководство: добавление элементов управления страницей (HTML)
[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. В случае разработки приложений для Windows 10 см. раздел последняя документация]
Научитесь создавать и отображать объекты PageControl.
Необходимые условия
Предполагается, что вы умеете создавать простые приложения Магазина Windows на JavaScript с использованием библиотеки Windows для элементов управления JavaScript. Дополнительные инструкции для начала работы с элементами управления из библиотеки WinJS см. в статье Краткое руководство: добавление элементов управления и стилей WinJS.
Создание элемента PageControl
В отличие от других элементов управления из библиотеки Windows для JavaScript не требуется создавать экземпляр PageControl напрямую. Вместо этого создается функция PageControl посредством вызова метода WinJS.UI.Pages.define и передачи ему универсального кода ресурса (URI) HTML-файла, определяющего объект PageControl и объект, который определяет участников PageControl.
Вот пример определения PageControl. Оно состоит из трех файлов: HTML-файла, CSS-файла и файла JavaScript.
<!-- samplePageControl.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>samplePageControl</title>
<!-- WinJS references -->
<link href="/pages/samplePageControl.css" rel="stylesheet">
<script src="/pages/samplePageControl.js"></script>
</head>
<body>
<div class="samplePageControl">
<p class="samplePageControl-text"><span data-win-bind="textContent: controlText">Message goes here</span>
<button class="samplePageControl-button">Click me</button></p>
<p>Page controls can also contain WinJS controls. They are activated automatically.</p>
<div class="samplePageControl-toggle" data-win-control="WinJS.UI.ToggleSwitch"></div>
</div>
</body>
</html>
/* samplePageControl.css */
.samplePageControl
{
padding: 5px;
border: 4px dashed #999999;
}
// samplePageControl.js
(function () {
"use strict";
var ControlConstructor = WinJS.UI.Pages.define("/pages/samplePageControl.html", {
// This function is called after the page control contents
// have been loaded, controls have been activated, and
// the resulting elements have been parented to the DOM.
ready: function (element, options) {
options = options || {};
this._data = WinJS.Binding.as({ controlText: options.controlText, message: options.message });
// Data bind to the child tree to set the control text
WinJS.Binding.processAll(element, this._data);
// Hook up the click handler on our button
WinJS.Utilities.query("button", element).listen("click",
// JavaScript gotcha - use function.bind to make sure the this reference
// inside the event callback points to the control object, not to
// window
this._onclick.bind(this));
// WinJS controls can be manipulated via code in the page control too
WinJS.Utilities.query(".samplePageControl-toggle", element).listen("change",
this._ontoggle.bind(this));
},
// Getter/setter for the controlText property.
controlText: {
get: function () { return this._data.controlText; },
set: function (value) { this._data.controlText = value; }
},
// Event handler that was wired up in the ready method
_onclick: function (evt) {
WinJS.log && WinJS.log(this._data.message + " button was clicked", "sample", "status");
},
// Event handler for when the toggle control switches
_ontoggle: function (evt) {
var toggleControl = evt.target.winControl;
WinJS.log && WinJS.log(this._data.message + " toggle is now " + toggleControl.checked, "sample", "status");
}
});
// The following lines expose this control constructor as a global.
// This lets you use the control as a declarative control inside the
// data-win-control attribute.
WinJS.Namespace.define("Controls_PageControls", {
SamplePageControl: ControlConstructor
});
})();
Чтобы создать элемент управления страницей в Microsoft Visual Studio, выберите в главном меню Проект > Добавить новый элемент, затем выберите Элемент управления страницей.
Отображение элемента PageControl
После определения вашего объекта PageControl доступны несколько способов его отображения:
Использование функции WinJS.UI.Pages.render.
<div class="renderingPageControls-renderedControl"></div>// Render the page control via a call to WinJS.UI.Pages.render. This lets // you render a page control by referencing it via a url. var renderHost = element.querySelector(".renderingPageControls-renderedControl"); WinJS.UI.Pages.render("/pages/SamplePageControl.html", renderHost, { controlText: "This control created by calling WinJS.UI.Pages.render", message: "Render control" }).done();Открытое предоставление конструктора объекта PageControl и его использование для создания объекта PageControl.
<div class="renderingPageControls-createdProgrammatically"></div>// Render the page control by creating the control. var constructedHost = element.querySelector(".renderingPageControls-createdProgrammatically"); new Controls_PageControls.SamplePageControl(constructedHost, { controlText: "This control created by calling the constructor directly", message: "Constructed control" });Использование функции WinJS.UI.Pages.get для получения конструктора для объекта PageControl.
Создание экземпляра элемента управления в HTML в виде элемента управления из библиотеки Windows для JavaScript (которым он и является). Чтобы этот способ работал, конструктор объекта PageControl должен предоставляться открыто.
<div data-win-control="Controls_PageControls.SamplePageControl" data-win-options="{controlText: 'This was created declaratively', message: 'Declarative control' }"> </div>Использование объекта HtmlControl для обработки страницы.
<div class="renderingPageControls-htmlControl" data-win-control="WinJS.UI.HtmlControl" data-win-options="{uri: '/pages/samplePageControl.html', controlText: 'This was rendered via the HtmlControl', message: 'HTML Control loaded control' }"></div>
Краткая сводка и дальнейшие действия
Вы научились создавать и отображать объекты PageControl.
Дополнительные сведения об использовании объектов PageControl см. в разделе Краткое руководство: использование одностраничной навигации.