Useful jQuery plugins a Web Development bag by Robin Layfield on Bagcheck
Here is a collection of useful jQuery plugins that can make any developer’s life that little bit easier. Part asset, part archive, it turns out that BagCheck may well be the best place to store this info!
I’m sure this list is going to keep on growing. There’s so much good stuff out there being created every day.
This looks really promising – finally a way to control the output of type at the character level through jQuery + CSS. Kern with ease, style with grace. Type is the next frontier of web design and this plugin brings it one step closer.
jFormer – jQuery Form Framework
jQuery form handling
A bit more complex to use than the other plugins in this bag (in Haynes-manual speak this would be a “4 spanner job”), this plugin lets you create really clean forms with good user feedback and AJAX interactions. I think anything that gets developers closer to the goal of producing great forms and form interactions has got to be a good thing for the web in general.
Uniform – Custom cross-browser form elements
This plugin gives your form elements a consistent and clean look across multiple browsers, hence then name, Uni-form!
DontType! (Password entry replacement)
Passwords are so passé!! Remembering them and typing them in is such a chore. If only there was a way you could flick your mouse and send a unique code to the web site…. Oh wait! There is… it’s called Don’t Type
Fancybox (Lightbox alternative)
popup frame, lightbox, jQuery
There’s a hell of a lot of lightbox and gallery window plugins out there for jQuery. This is one of the best: Clean and simple to implement and very presentable.
tipsy (Pop-up tooltips)
Facebook-style tooltip plugin for jQuery
Very simple jQuery tooltip script. It draws the tool tip in a very classy looking bubble with a pointer to N, E, S, W.
jQuery Validation Engine (Form validation)
form validation, jQuery
This is a dynamic form field validator. It has a number of easy-to-implement comparison and validation methods. Any form field that fails validation will cause the form to scroll to its position and a prettified message to appear above the field in a red callout.
It’s neat and very visually effective.
Simple Validation (Form validation)
simple form validation, jQuery
This site combines my love of bass-playing with coding to provide help in the form of bassistance! No really, it does…
This is a very simple and effective form validator that creates and reveals a hidden message beneath any improperly formed fields. Much simpler than the Validation Engine above, it’s often a better fit for web sites that just need the validation and no messing.
jQuery UI (Widgets, transitions visual effects)
User Interface Elements
This is a bit of a no-brainer really. A collection of elements, effects and useful extensions to jQuery, all wrapped up in an easy-to-customise theme.
Widgets include: calendar datepicker, accordion and tab views, autoocomplete and dialog boxes.
jQuery Mobile (Mobile app building)
I had to include this. Even though it is still in alpha (alpha3 at the time of inclusion) it is slick, neat and conceptually well put-together.
If you want to make cross-platform mobile enabled apps with the minimum of effort, then jQuery Mobile is the way to go.
It builds upon the work done by Sencha Touch spinoff jQTouch and the only thing that is holding it back at the moment is a lack of clear tutorials.
Modernizr (Browser capability detection)
Not actually a jQuery plugin but an invaluable asset to the developer. Modernizr helps you target browser-enabled features and provide fallback solutions when those features aren’t available.
It does this by parsing the HTML and adding a css class to each element that indicates whether a certain new or desirable feature is or isn’t present.
Noise texture generator (Graphical effects)
screen noise, jQuery
In these days of textured backgrounds, it’s nice to know that a simple script is available that can do this for you.
Jcrop (Image cropper)
image cropping, jquery
Jcrop is great. Really great. I use this for making instant croppable profile pictures when people sign into personalised web sites. It’s neat, lightweight and very classy looking.
jQuery Waypoints (Page navigation)
I haven’t used this, I just stumbled across it today but it looks really interesting; you can trigger events when a user scrolls to a specific point on the page. Very useful for one page websites!
mapkey – keypress handler
This is a really neat solution for handling keypresses on your web site. You can bind a keypress to a rel tag (eg. rel=”next”) to move the focus through a page, or even trigger a function, eg a scroll or visual effect. It has a simple syntax that builds upon jQuery so you can use it with the minimum of effort.