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
- Your favourite jQuery theme
Creating a new blank JavaScript app
Create a blank JavaScript store app with the name say "JQueryWrapperApp".
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.
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.
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.
Accessing from script
You can access the jQuery control that was created with "jqControl" from the DOM element.
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
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.