html添加月份查询控件,快速入门：添加 Page 控件 (HTML)

快速入门：添加 Page 控件 (HTML)

03/04/2016

本文内容

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

了解如何创建和显示 PageControl 对象。

先决条件

我们假设你可以创建使用 JavaScript 的基本 Windows 应用商店应用，该应用使用 Windows JavaScript 库控件。有关如何开始使用 WinJS 控件的说明，请参阅快速入门：添加 WinJS 控件和样式。

创建 PageControl

与其他 Windows Library for JavaScript 控件不同，你不用直接实例化 PageControl。相反，你可通过调用 WinJS.UI.Pages.define 方法，传递定义 PageControl 的 HTML 文件的统一资源标识符 (URI) 和定义 PageControl 成员的对象来创建 PageControl。

这里是 PageControl 定义的示例。由三个文件组成：HTML 文件、CSS 文件和 JavaScript 文件。

/* 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 中创建 Page 控件，请从主菜单中选择“项目”>“添加新项”，然后选择“Page 控件”。****

显示 PageControl

一旦你定义了 PageControl，有几种方式可以显示：

// 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。

// 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"

});

实例化 HTML 控件，就像是 JavaScript 控件的 Windows 库(事实如此)。你必须为此公开暴露 PageControl 对象的构造函数以进行处理。

摘要和后续步骤

你已了解了如何创建和显示 PageControl 对象。