jQuery in Windows 8 apps

Though there are numerous work-arounds floating around the web to get jQuery in Windows 8 apps, I have taken it upon myself to port jQuery for Windows 8. Why?

  • Because I wanted plugin-like access to the WinJS events and hooks
  • I don’t need to be cross-browser friendly so I can just use all of the native HTML5, CSS3 and ECMA 5.1 goodness (so it’s a wee-bit faster)
  • Instead of jQuery implementations of ajax, animations and the like, I just provide a jQuery interface to these items to take advantage of the speed of the WinJS library

Source code here: WinJQ

jQuery in Windows 8 apps

Documentation

Below is the documentation I’ve been able to come up with so far, it is a work in progress; comment with any questions or feature suggestions.

Glossary

It’s being updated quite frequently, so please check back often and submit any bugs you find or feature requests.

General Usage

<code>
$(function(){ // shorthand for $(document).ready(function(){});
   $('a').each(function(){
       $(this).onclick(function(){
           console.log($(this).attr('href'))
       });
   });

   $('#some_div').hide();

   $('#some_div').fadeIn();
});

$(document).ready(function(){
   console.log('I loaded!');
})
</code>

Asynchronous Requests

The familiar jQuery async request methods are available: get, post, ajax, getJSON, load and I’ve added an additional method “require” that loads javascript libraries and provides success and error callbacks. This is the way plugins are loaded internally.

<code>
$.getJSON('http://www.remotesite.com/api/search', { 'q': 'How to gravity' }, function(response){
    console.log(response);
});
</code>

Facebook Authentication

<code>
$.facebook.authorize({
   client_id: YOUR_FACEBOOK_CLIENT_KEY,
   scope: ['read_stream', 'email']
}, function(){
   console.log($.session('auth'));
});
</code>

Session Storage

Store items such as a cart or user authentication tokens in the session for temporary storage

<code>
$.session('auth', {
   'token': 'OFI$#JFQ#(FJ#)F',
   'name': 'Rob'
});
</code>

Persistent Storage

<code>
$.storage('settings', {
   'hide_notifications': true,
   'receives_newsletter': false
});
</code>

Animation

<code>
$('#page').enterPage({ top: "0px", left: "200px", rtlflip: true });
</code>

Badge and Live Tiles

Coming Soon

<code>
// working on this
</code>

Dialogs, Modals and Flyouts

Coming Soon

<code>
// working on this
</code>

4 thoughts on “jQuery in Windows 8 apps

  1. I really like this idea, and respect to you for putting it together…… but unfortunately it seems too “lean” for my purposes.

    I could see myself using this in a Windows 8 app if I start constructing a new one from scratch… but I would like to port one of my existing web projects over to a metro app, and my existing solution makes heavy use of jQuery and seems to use various features that don’t appear to be available in your cut-down jQuery emulation…. so perhaps your library wouldn’t work too well in my situation?

Leave a Reply