Exploring WinJS controls and styles

Windows library for JavaScript provides a rich set of controls, databinding options, and promises and in this section we will explore a few popular controls and styling options.

None of the WinJS controls have separate markup, instead WinJS library provides several attributes that can be used with the existing HTML elements.

Adding WinJS controls

As we have seen, there are no any markups for WinJS controls and they can be added through attributes on the HTML elements. WinJS controls can be added by adding any HTML element and setting its data-win-control attribute value to the name of the WinJS control.

In the following example, we are changing a simple HTML button element into the back button usually seen in store apps. And this can be done by adding the data-win-control attribute and setting a fully qualified name to WinJS.UI.BackButton.

Here is the HTML markup:

<button data-win-control="WinJS.UI.BackButton">WinJS button</button>

When you run it...