data-win-options property

Sets the specified properties and values for a Windows Library for JavaScript control.

Syntax

<div data-win-control="control" data-win-options="{ property : value}" />

Property value

Type: String

One or more property-value pairs. Separate multiple pairs with commas.

Remarks

When you create an HTML control, you can set its properties using dedicated attributes. For example, to set the type, min, and max properties of an input control, you can set the type, min, and max attributes in your markup:

<input type="range" min="0" max="20" />

Unlike HTML controls, Windows Library for JavaScript controls don't have dedicated element or attribute tags; for example, you couldn't create a Rating control and set its properties using the following markup:

<!-- Not valid markup. -->
<rating maxRating="10" averageRating="6" />

Instead, you use the data-win-options attribute to set a property in markup. The data-win-options attribute uses the following syntax:

To set multiple properties, you separate them with a comma:

The following example creates a Ratings control and sets its maxRating and averageRating properties.

<div id="ratingControlHost" 
     data-win-control="WinJS.UI.Rating"
     data-win-options="{maxRating: 10, averageRating: 6}">
</div>

For a list of properties supported by a given Windows Library for JavaScript control, see its reference page.

You can also set the properties of a Windows Library for JavaScript control programmatically. To access the control in code, you call the WinJS.UI.Pages.get function to retrieve the control from its host element.

Requirements

See also

Quickstart: adding WinJS controls

Build date: 12/5/2012