jQuery with WinJS in Windows Store Application

Introduction
As we all know, we can design Windows store applications using HTML, CSS and JavaScript. We can use jQuery along with the WinJS as well.

Description
Let’s open up the Visual Studio and create a new navigation project under JavaScript with a name called jqTest.
Now we will get the project created and opened with the default.html page.SolutionExplorer

 

Let’s get download the jQuery and place that in js folder in Solution Explorer.

AddedjQuery

Note : jQuery 2.0 + versions work best with Windows store apps

Now let’s navigate to the Pages/home folder in Solution Explorer and open the home.Html. In the home.html, we need to add the reference to jQuery in order to use that.

HomeHtml

We will add a button and on click of that button we will change the default text content of the <p> tag by using  jQuery element selector and event handling mechanism.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>homePage</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
    <script src="../../js/jquery-2.1.1.min.js"></script>

    <link href="/css/default.css" rel="stylesheet" />
    <link href="/pages/home/home.css" rel="stylesheet" />

    <script src="/pages/home/home.js"></script>
</head>
<body>
    <!-- The content that will be loaded and displayed. -->
    <div class="fragment homepage">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Welcome to jqTest!</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <p id="myCon" style="display: block;">Content goes here.</p>
            <input type="button" id="btnMyBt" value="Click Me" />
        </section>
    </div>
</body>
</html>

Since the elements are now placed in the HTML file, now it’s time to add code into the JS file in order to make the elements functional. So let’s add the below code to the home.js file.

(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/home/home.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {
            // TODO: Initialize the page here.

            $('#btnMyBt').click(function () {
                $('#myCon')[0].innerText = "You clicked me";
            });

        }
    });
})();

Now let’s hit the run button to run the application in the local machine. On click of the button, it will change the default “Content goes here.” text to “You clicked me”.

Hope this will help.

Written By: Nirmal Hota, Cross-Platform Mobile Lead, Mindfire Solutions

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s