Windows Dev Center

data-win-control property

[This documentation is preliminary and is subject to change.]

Applies to: Metro style apps only

Makes a div element host the specified Windows Library for JavaScript control.


<div data-win-control="controlName" />

Property value

Type: String

The fully qualified name of the Windows Library for JavaScript control to host. For example, "WinJS.UI.Rating".


The Windows Library for JavaScript toolkit provides several useful controls that aren't a part of HTML5, such as the DatePicker, FlipView, ListView, and Rating controls. Unlike HTML controls, Windows Library for JavaScript controls don't have dedicated markup elements: you can't create a Rating control by adding a <rating /> element.

To use a Windows Library for JavaScript control, you create a div element and use the data-win-control attribute to specify the type of control you want. To add a Rating control, you'd set the attribute to "WinJS.UI.Rating".

The following example uses the data-win-control attribute to create a Rating control.

<div data-win-control="controlName" />

Before the control will work, you must activate your controls by calling the WinJS.UI.processAll function from your code behind. The WinJS.UI.processAll function processes the document and activates any Windows Library for JavaScript controls that you've declared in markup.

A good way to activate your controls is to handle the page's DOMContentLoaded event and then call WinJS.UI.processAll in your event handler, as shown in the following example:

(function( ) {

    document.addEventListener("DOMContentLoaded", function(e) {



Minimum supported client

Windows 8 Consumer Preview

Minimum supported server

Windows Server 8 Beta

See also

Quickstart: adding WinJS controls



Build date: 2/10/2012

Ajouts de la communauté

© 2015 Microsoft