WinJS , jQuery question

Question

Usually i use jquery and jquery UI to do animation and dynamic CSS styling and dynamic object creations (insert to DOM). But since it's now better to just use WinJS, i have a couple of few questions:

1. I know i can use jQuery technically, but is it even realistically possible ? I had to change the source code of jQuery just to add DOM objects ( $().html() ), and the $().animate() immediately crashed the program. etc etc.

2. How to animate 1 / a bunch of DOM in WinJS ? I usually use $().animate, but since that is out of the toolbox, what should i use now ?

3. Can you please share a good video tutorials for making Metro using Javascript ?

Answer 1

I am not sure why you had to change the jQuery source. I'm using jQuery and jQueryUI in my project quite a bit and all I had to do is re-encode the source files to UTF8 with BOM since this is a requirement to get bytecache optimizations in the Windows Application Certification Kit.

Apart from that change I didn't have to change anything. I'm using jQuery effects and animations quite a bit.

I'm also using .html() - As long as you don't dynamically generate potentially unsafe HTML  (HTML that contains script elements or click handlers) this methods works fine.

If you do need to create this kind of HTML and you know what you are doing you can use MSApp.execUnsafeLocalFunction to execute that part of code.

If you don't trust the HTML input or you just want to remove any potentially harmful bits before calling .html() you can use toStaticHTML.

From a design standpoint I would say that for Metro-style UI you should use the built-in animations as much as possible to stay consistent with other apps but for custom animations there is nothing preventing you from using jQuery.

Answer 2

what version of jQuery and jQuery UI you used ?

I had to change the source because it immediately crashed, giving an exception that i have to use some method to add HTML elements ( i had to change the $().html() source code). Using $().animate() immediately crashed the program. i'm using the latest jQuery. $().css() worked fine, $().html() worked fine after i changed my code, $().animate() crash. Can you tell me what is the equivalent of this method in Windows ?

$('.divRed').animate('position': 'absolute', 'left' : '500px');

$('.divSmall').animate('width': '500px', 'height' : '600px');

i use toStaticHTML, in the jQuery source code ( i changed the source), jQuery mobile does not work at all though, and i am having trouble with a bug, it seems my CSS file,

body {

 background-image: ***************************************************
}

*** = the url(), no repeat, etc etc.

works on png file, but does not work on other png file, and yes, this is a bug, i just don't know where to report it.

Answer 3

I can use .animate without issues. I'm using jQuery 1.7.2 and jQuery UI 1.8.19 installed via NuGet.

The example methods you mentioned are incorrect by the way (you are missing the {} of the object passed in). It should be $('.divRed').animate({'position': 'absolute', 'left' : '500px'});

Answer 4

Thanks PatrickKlug. I believe yesterday i have those kinds of problems because i was listening to game musics while programming at the same time, bad idea.