Enables you to include an HTML page dynamically. As part of the constructor, you must include an option indicating 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:
Methods
The HtmlControl object has these methods.
| Method | 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 ToggleSwitch 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 ToggleSwitch below.</p> <div data-win-control="WinJS.UI.ToggleSwitch"></div> </div>
When you run the app, you should see the button, text, and ToggleSwitch. To remove this content, you can simply set the DIV element's innerHtml property to the empty string ("").
If you want to load the HtmlControl programmatically and not declaratively, use 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
|
Namespace |
WinJS.UI |
|---|---|
|
Library |
|
See also
Build date: 12/5/2012
