Javascript

10+ useful jQuery Plugins for web development

Written by Kevin Liew on 18 Jun 2009
43,654 Views • Shares
7 comments

Introduction

I believe all of us have a list of favourite plugins that have been using it frequently in web development projects. I do have a list of plugins that really helped me and made my life so much better.

The plugins I listed in this post, I use most of them in developing another jquery script. There are small, eficient and robust, just really can save me a lot of works.

  • jQuery Color | Demo
    Adds the ability to do color animations to jQuery. I'm quite surprise to find out that jQuery doesnt support it natively when I was writing the horizontal scrollbar menu tutorial.
  • jQuery Easing | Demo
    A jQuery plugin to give advanced easing options. This is a fantastic plugin, I have been using this in some of my tutorials, I love it!
  • jQuery Background-Position Animation | Demo
    Adds the ability to do background-position animations. This is really cool, just found it recently, and I believe it will be really useful in creating a menu with animated background.
  • CSS Class-based Animations | Demo
    "You might like this plugin if you can't stand CSS/presentation creeping into your JavaScript through jQuery.animate calls. Keep presentation where it should be (in linked or inline CSS class definitions) and just animate to and from CSS classes." Yes, I agreed with that statement, keep the javascript clean. I often found myself mess up my script because of inconsistence CSS properties in CSS file and javascript file.
  • jQuery dropshadow | Demo
    Add really nice drop shadow to your HTML elements. The appearance of the shadow is fully configurable. I found that it slow down the website if you have a lot of animation going on, apart from that, everything works great.
  • jQuery Editable | Demo
    This is a real customizable jQuery editable plugin. Currently it can convert any tag (span, div, p and ...) to text input, password, textarea, drop-down list. You can easily extend it by adding your own input type using its editableFactory object.
  • jQuery Masked Input | Demo
    I really really like this plugin. From a web developer point of view, this enforce the data format to reduce the amount of rubbish data and inconsistencies. I implemented it in some websites, and I've checked the data recorded in the database, the result was amazing.
  • jQuery Form Clear | Demo
    This plugin was designed to help with User Interface Development. This lightweight plugin allows you to clear the value of text, password, and textarea fields when they have the default value or are blank.
  • jQuery Empty value | Demo
    This is a terribly simple plugin (my first one, actually), used for the common practice of applying specific content and design (class name) for a form field while it's empty.
  • jQuery Automated Image preloader | Demo
    This script parses through linked and imported stylesheets and creates an array of all the image urls they contain. Then it loops through the array of urls and creates an image object for each one so they'll be cached and ready for later use.
  • jQuery Periodical Updater | Demo
    This plugin is a port of Prototype's Ajax.PeriodicalUpdater() function, which sends timed Ajax requests to the server, with a built in decay between requests if the content doesn't change. All options are configurable.

 

Let me know what's your favourite jquery plugins, you might have something that I don't know yet! :) Don't forget to share this article to show your support! :)

Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

7 comments
Dan Wellman 7 years ago
jQuery UI natively supports color animations, as well as class transitions :D
Reply
Dan Wellman 7 years ago
Also felt this round-up should've mentioned the simulate plugin which simulates mouse and keyboard events in order to better test plugins you may write. Nice round-up though
Reply
kevin Admin 7 years ago
@Dan: thanks for the information! I haven't really play with jQuery UI yet... see, I learn something new before I went to bed tonight! :)
Reply
John McCollum 7 years ago
Hello! Nice list, thanks for including my periodical updater plugin.

ps @dan, hi, Dan!
Reply
aneslin 7 years ago
thanks a lot bro.
Reply
Cornelius Bergen 7 years ago
I like jquery.corner.js (http://malsup.com/jquery/corner/).

I use it only for IE (conditional comment) and provide CSS:
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
for everyone else.

I'm going to try some of these. Thanks.
Reply