JQuery, Drupals best friend

Drupal is a great for quickly creating professional websites. But one problem with Drupal, as a PHP platform, is that it spits out HTML. In the past HTML always was this great language to make web pages. But the web pages always where static. With web 2.0 plain HTML pages are a thing of the past and now everything has to be active, dynamic, flashing.

 

Javascript legacies
One approach to create these effects was by using browser plugins like Adobe Flash, Microsoft Silverlight and maybe (if it ever becomes popular) Sun JavaFX.

Another approach is JavaScript. JavaScript always was this annoying language that worked different on every browser. So most developers tried to stay away from Javascripting as much as possible, unless CSS couldn’t solve the problem. But now with JavaScript libraries like Jquery, Prototype and Mootools, JavaScripting has become easier than ever.

 

Jquery makes JavaScript development very easy and it helps you creating great effects. Jquery is used by Drupal and I’m starting to love this framework more and more. Using Jquery is easy, with just a bit of CSS it becomes a powerful framework right of the bat. Even the documentation is great; How different from other open source projects.

 

So what does it do?

Jquery helps making your site much more dynamic and can be a great tool for improving your site's usability. Everyone who is interested in web development should take a peek at the Jquery website, http://jquery.com/, especially at the various Jquery plugins, http://plugins.jquery.com/, the tutorials, http://docs.jquery.com/Tutorials, and the documentation, http://docs.jquery.com/Main_Page.

 

One small Jquery snippet which immediately shows the greatness of Jquery. Zebra stripes for tables in 1 line of code:

$("tr:even").css("background-color", "#bbbbff");

Or... just because it’s easy, sliding a paragraph in and out with a button with 3 lines of code:

 

$("button").click(function () {

 

$("p").slideToggle("slow");

});

 

 

Some other great things of Jquery is that it works the same on every browser so you don’t need to write tons of if statements to check every property and function that you use just to check if this browser supports it.

 

JQuery Example

 

Smashing Magazine recently made this great post that wraps up a number of Jquery scripts. This list is amazing and shows the true power of Jquery. Also remember, Jquery is built into Drupal and thus implementing these effects in Drupal should be very easy:

http://www.smashingmagazine.com/2009/01/15/45-new-jquery-techniques-for-a-good-user-experience/

 

Smashing Magazine also made this great post giving an introduction into Jquery and some great articles with more information about Jquery:

http://www.smashingmagazine.com/2008/09/16/jquery-examples-and-best-practices/

 

If you're into serious webdevelopment, you'd better grab some JQuery one of these days!

Post new comment
The content of this field is kept private and will not be shown publicly.
By submitting this form, you accept the Mollom privacy policy.