Let’s face it, there are alot of jQuery plugins out there, it’s easy to get lost. This list is a selection of really quick win plugins that can take your page from bland to spanking in 30 minutes. If they’re not about features, it’s about improving cross compatibility and load times… no-brainers!

1) DatePicker

DatePicker is now actually a jQueryUI plugin, however it’s so easy to implement I had to mention it here. As you can see above, by simply clicking in the “Date” textbox, a snazzy calendar pops up and allows you to select a date. As I said, it’s so easy to implement, it’s silly:

$("#datefield").datepicker();

2) Google Charts Plugin

People love charts, they’re such a great way to show complex data in meaningful ways for the user to absorb. A great plugin called jQuery Google Charts makes the implementation of the Google Charts API super simple. You can choose bar, stacked, line, pie and 3D pie with support for more coming soon. Implementation wise, its a few lines of code:

var api = new jGCharts.Api();
jQuery('<img alt="" />')
.attr('src', api.make({data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]]}))
.appendTo("#bar1");

3) mbTooltip

mbTooltip is a great replacement for the “title” attribute in your HTML. It’ll replace the default browser tooltip with your own pre-configured, sexy tooltip wherever you enter title=”value” in your HTML. A much more user friendly way to show tooltips and give focus to them.

4) simplyScroll

This is a really great way to show a gallery of images within your site in a nice, animated slide effect. Adding a couple of lines of javascript, as well as a UL list of images can get you this effect within 2 minutes… pretty darn good! simplyScroll makes a scary job, into a holiday in Barbados!

<ul id="scroller">
<li><img src="image1.jpg" width="290" height="200"></li>
<li><img src="image2.jpg" width="290" height="200"></li>
<li><img src="image3.jpg" width="290" height="200"></li>
</ul>

5) Lazy

The Lazy plugin is great for one reason – it gives you the ability to load jQuery plugins when you need them, and not all at once on a page load. Simply make a $.lazy call when you need to load a plugin, and Lazy will do the rest for you.

$.lazy('jquery.validation.js','validate');

6) Juitter

So you use Twitter right? I hope so. Anyway, Juitter is a relatively new jQuery plugin which allows you to return tweets from a specific user, or perhaps a specific search term into your website. It’s also self-reloading in a nice ajaxian styleee. Implementation is simple, hook up the plugin files, and place a DIV container for the results. You can also edit the look and feel via CSS. Very cool, and you should all be using it if you are Twitter users!

<div id="juitterContainer"></div>

7) ifixpng

Most new web developers are using PNG files for their images, the reason why is for transparency. Transparency is inherent in PNG files, so you can do some really cool effects with a CSS/PNG implementation. The trouble is, IE6 does not support transparent PNG files, and even more of an issue, IE6 is still prevalent. ifixpng fixes this for you, by hooking into the IE engine and setting the transparent color of your PNG files for you programatically.

$('img[@src$=.png]').ifixpng(); 

CrossSlide

CrossSlide goes one further with image transistions, not only does it animate around the image within a fixed area, it also transitions between images in that same area. Great for sites that are small on space, but need to show an image or images in the entirety. Check out their demo page for more..

9) Sort

The Sort plugin is simple, it allows you to sort through a dataset in the way that you want to. For example, some XML or JSON – you may not want to iterate through them in the order that they’re given to you. Sort figures this out for you, and again, implementation is dead simple:

$(dataSet).sort("userName", "asc");

10) Quick Paginate

Again for users who need to save on space, the Quick Paginate plugin makes it really simple for you to implement a pagination effect through any type of content, images, text, lists etc etc all within a page. Very good for a quick gallery function for example…

Resources to help you learn…

Learning jQuery 1.3	JQuery In Action	jQuery Reference Guide

This entry was posted on Thursday, February 19th, 2009 and is filed under Development, jQuery. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.