Blog

Get upto date news on SEO, Web design, Jquery, CSS and programming tips and tricks.

Reference   [03 May 2010]

10 Quick Win jQuery Plugins

 

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

 

datepickerDatePicker 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:

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

2) Google Charts Plugin

 

googlechartsPeople 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:

 

3) mbTooltip

 

tooltip

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

 

scrollThis 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!

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.

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

6) Juitter

 

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!

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.


crossslide

8) 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:


pagination

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…

 

Comments [0]