WinJS Wrapper Control For jQuery Controls

This article demonstrates how to use jQuery UI and other controls declaratively like that of WinJS controls without using a jQuery control initialization script.

Introduction

This article demonstrates how to use jQuery UI and other controls declaratively like that of WinJS controls without using a jQuery control initialization script. 

Any jQuery control can be added declaratively with the standard WinJS attributes "data-win-control" and "data-win-options". The namespace and controls can be configured (in JQueryWrapper.js). 
 
 Prerequisites
  • jQuery 2.0 
  • jQuery UI 1.10.x
  • Your favourite jQuery theme 
Creating a new blank JavaScript app
 
Create a blank JavaScript store app with the name say "JQueryWrapperApp". 
 
NewApp.png
 
Adding jQuery Script and Stylesheet references
 
Add jQuery 2.0 and jQuery UI 1.10.x in the Js folder and the theme in the css folder. 
 
Open default.html, add the jQuery script and stylesheet references after the WinJS script references. 
 
Scripts.png
 
Adding WinJS control wrapper script
 
Grab JQueryWrapper.js from the attached source code and place it in the Js folder. 
 
Open default.html amd add JQueryWrapper.js after the jQuery script references. 
 
JQueryWrapper.png
 
Wrapper namespace can be any valid namespace. In this example, I'm using JQuery.UI as my wrapper namespace. 
 
You can add any number of jQuery controls but you must reference associated script files in the head section and the name should be the same as used when creating with a script.
 
Example:  jQuery datepicker  
$("#someelement").datepicker(),  

The WinJS wrapper control name is the same as the respective jQuery control name but with the first letter in upper case.  

Example
 
jQuery          WinJS
--------------------------
button          Button

 
Adding jQuery controls 
 
Any jQuery control can be included using the standard WinJS attributes "data-win-control" and "data-win-options" as shown below. You must add your controls to the list in JQueryWrapper.js. 
 
Controls.png
 
Accessing from script
 
You can access the jQuery control that was created with "jqControl" from the DOM element. 

 
ScriptAccess.png
 
Included example code in Custom.js
 
Deploy and run the app. All the jQuery controls included in default.html are rendered on the page.
 
Output
 
ouput.png
 
Summary
 
In this article, I discussed how to add jQuery controls declaratively with the attributes data-win-control and data-win-options.
 
The source code is attached.