Friday, February 25, 2011

JQuery and CSS3 : Way to create Powerful Web Pages


JQuery is doing magic. 
Recently in a small project I had a chance to use JQuery. I was very surprised at seeing the amazing powe rof the JQuery. What I used to do in a day using Javascript is now possible in minutes. 
I took me few minutes to make the divisions draggable, resizable and selectable.   


It haandles everything from event handing, animating, and Ajax without actually specifying the javascript functions at each element level but by just binding using a selctor using id, class, or at any other attribute.


JQuery is way too powerful and helps to creating rich web interfaces very rapidally. 


For what i used to write a cumbersome code like, 

 document.getElementById("x").xxxxx


in JQuery,
--> $("#x").xxxx


To make element draggable,
    $("#x").draggable();


To make element resizable,
    $("#x").resizeable();




$(".icon")
.bind('click',function(event) { ... }


And all elements with class="icon" will be bind with onclick = function


$(".icon").hover(function() { ...}


similarly, for hover ....




Ajax is as simiple as this,
$.ajax({
   url: "member/chat",
   cache: false,
   type:"POST",
   data:myparam,
   success: function(data) {
       $(msgWin).html(data);
   },
   error: function(xhr, ajaxOptions, thrownError) {
     alert("An error has occurred");
     alert(xhr.responseText);
     alert(ajaxOptions);
     return false;
    }
});
   
and much more.... http://docs.jquery.com/Main_Page




If I remember, Google Web kit, many Java frameworks tried to solve this problem by creating a cumbersome framework which will allow java programmer to create interfaces which will create javascript transparently. I always found them problematic. I had always preffered to code my client interactions in Javascript.


With JQuery coming in, I think those frameworks are redundant. 


CSS3
Other thing, I used in my project was CSS3. I am really amazed at what is being made possible by CSS3. I could provide shadow, round rectangles, skew rectangles, transform, translate, animate etc. 
I do not think I would need to use images to so any effect, I can as well do it using CSS3.


I was surprised at the power of CSS3 of making so many things possible which I never thought is possible in Web pages.




JQuery and CSS3 are 2 technologies which I will recommend for anyone to learn as they will definately shape how the web pages  will be created in future. I definitely am a fan of both of them.

No comments:

Post a Comment