WinJS.UI.HtmlControl object

Artikel
01/26/2017

Enables you to include an HTML page dynamically. As part of the constructor, you must include an option that indicates the URI of the page.

Syntax

<div data-win-control="WinJS.UI.HtmlControl" data-win-options="{uri: 'page.html'}"></div>

var object = new WinJS.UI.HtmlControl(element, {uri: 'page.html'});

Members

The HtmlControl object has these types of members:

Constructors

Constructors

The HtmlControl object has these constructors.

Constructor	Description
HtmlControl	Initializes a new instance of HtmlControl to define a new page control.

Examples

The following HTML shows the kind of content that can be loaded by using HtmlControl declaratively.

<!-- Include this file in your project.
<!-- samplePageControl.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>samplePageControl</title>
</head>
<body>
    <div class="samplePageControl">
        <p class="samplePageControl-text"><span data-win-bind="textContent: controlText">This is an HtmlControl. </span>
        <button class="samplePageControl-button" style="background-color: green">Click</button></p>
        <p>Page controls can also contain WinJS controls. They are activated automatically, like the toggle switch below.</p>
        <div class="samplePageControl-toggle" data-win-control="WinJS.UI.ToggleSwitch"></div>
    </div>
</body>
</html>

Add the following HTML to the body of the default.html page of your project.

<div class="samplePageControl">
    <p><span data-win-bind="textContent: controlText">This is an HtmlControl. </span>
    <button style="background-color: green">Click</button></p>
    <p>Page controls can also contain WinJS controls. They are activated automatically, like the toggle switch below.</p>
    <div data-win-control="WinJS.UI.ToggleSwitch"></div>
</div>

When you run the app, you should see the button, text, and toggle switch. To remove this content, set the DIV element's innerHtml property to the empty string ("").

If you want to load the HtmlControl programmatically and not declaratively, use the HtmlControl constructor in the following code for the same samplePageControl.html page.

<div id="controlDiv"></div>
<script type="text/javascript">
    var htmlControl = new WinJS.UI.HtmlControl(document.getElementById("controlDiv"), {uri: 'samplePageControl.html'});
    WinJS.UI.processAll();
</script>

Requirements

Minimum WinJS version	WinJS 3.0
Namespace	WinJS.UI

Dela via