Best jQuery plugins – March 2010

jPhotoGrid

This plugin displays a list of image thumbnails in a grid and allows them to be zoomed open. It’s a cool and simple effect.

PicBox

Picbox is a lightweight JavaScript image viewer, which differentiates itself by allowing easy viewing of images larger than the available screen size.

jQuery slideShow plugin

From small-scale commercial public sites to large-scale CMS, there are needs of slideshow. Here is a simple and graceful to implement a slideshow based on a short piece of HTML Code in a both unobstructive and pleasant way.

maxImage Image Scaling

This plugin will resize targeted images to their max width according to the browser, their ratio, and some simple specs.

Get TopUp!

TopUp is an easy to use Javascript library for unobtrusively displaying images and webpages in a Web 2.0 approach of popups.

(MB)Extruder

This jquery component let you easly build a sliding panel where to insert any kind of content; it has builtin all the functionalities for managing menu lines and sub panels with accordion effect. It can get the content via ajax and therefore you can dynamically build it by passing DATA via request using the metadata attribute settable on the extruder container.

jQuery Slider (Safari style)

jQuery Slider is easy to use and multifunctional jQuery plugin.

jMagnify

jQuery jMagnify, plugin attach a ola effect to some text following the mouse position.

TipTip

TipTip is a very lightweight and intelligent custom tooltip jQuery plugin.

AutoSuggest

AutoSuggest is a very lightweight jQuery plugin that makes auto-completing extremely easy.

TimeSink

Django admin page has a very nice time-based filter on the right to filter out entries. This plug-in filters a list (ul or ol) by a given time anchor – “past month”, “past year”, etc..

jQuery Simple Multi-Select

This plugin replaces a standard multi-select with a simplified version that doesn’t require ctrl+click to select multiple options. Each click simply toggles the given option on or off. This hides the original multi-select, and builds a replacement, but keeps the original updated so that when when your form is submitted, the selected options are submitted.

multiselect2side – Select multiple double side

This plugin implement a version of select multiple (select with multiple=”multiple”) with 2 sides and buttons for move option between the 2 selects.

NobleCount

NobleCount is a customizable jQuery plugin for a more the improved counting of the remaining characters, and resulting behaviors, of a text entry object, e.g. input textfield, textarea.

Text2Pass

Text2Pass is a JQuery plugin, which can be used to temporarily place text in a password field. It’s purpose is to prompt a user to Enter their password in a login or registration form, by appending text such as “Enter Password” in the password field. The text you place inside is fully customizable, and can be used on multiple fields per page

Scrollable Fixed Header Table

Scrollable table with fixed headers to columns vertically and horizontally. This plugin requires JQuery Cookie plugin, and JQuery Dimensions plugin.

Pines Notify

Pines Notify is a Growl like notification plugin.

HookMenu

The hookMenu plugin is a simple method of adding popup menus to headings and other elements while retaining some semantic and logical structure.

Google Chart

Add Google Charts to your pages via a simple JavaScript interface. You provide the data and Google does the rest.

Input Hint Overlay

Adds input hints (via absolute position divs) to a form. It uses the alt tags on each input/textarea as hints. It is called it on the form (or any parent).

jDoubleSelect

This plugin transform one select with optgroups into two distinct selects.

statusmessageQ

Display status messages in a consistent and friendly manner.

jQuery Searchable DropDown Plugin

This plugin extends normal dropdown (select) elements to be searchable.

treeTable

The treeTable plugin allows you to display a tree in a table, i.e. a directory structure or a nested list. Each branch in this tree can be collapsed and expanded, just like in a file explorer in most modern operating systems.

clearLabel

This plugin takes care of hiding your labels and setting them as an input value. Perfect for search forms or short forms without breaking the usability for disabled people, screenreaders and non js-enabled browsers. If you click the field the text disappears so that you can type your own input. If you leave the field blank and click elsewhere the original content is restored. If content was filled in by your application and it’s not the same as your label text. Then it keeps that as a value without disappearing or taking it as a default value.

$(document).ready(function() { $(‘selector’).clearLabel(); });

kOverlay jQuery Overlay Plugin

A simple window overlay that allows multiple overlays over another overlay and works with resizing and scrolling user operations. Dynamically created client content can also be shown as overlay including server side control generated content (ex: ASP.net GRIDVIEW)

// For dynamically created content on DOM set dynamic attribute to true $(“selector”).koverlay({title: ”title1′, dynamic: true}) // static content (renderred by server code) $(“selector”).koverlay({title: ”title1′}) // hiding the overlay $(“selector”).koverlay.hide()

textLimiter

textLimiter is a simple plug-in that let you specify limit to a textarea element.

The default declaration is like this: $(‘#textarea’).textLimiter(10); $(‘#textarea’).textLimiter(10, { truncate: false }); $(‘#textarea’).textLimiter(10, { truncate: false, limitColor: ‘#FF0000′ });

jQuery browser plugin detection

This jQuery plugin extends the jQuery.browser object with properties that might return true of false to check if the browser has that plugin or supports a mimetype.

jQuery.browser.flash // flash support jQuery.browser.sl // silverlight support jQuery.browser.pdf // pdf support jQuery.browser.java // java support jQuery.browser.qtime // quicktime support jQuery.browser.wmp // windows media player support jQuery.browser.shk // shockwave support jQuery.browser.rp // real player support

jQuery FloatBox

This plugin creates by default a floating div in the center of the page using half of the user window size for its width(height is not limited), uses a black background div as well(with opacity), the content of the floating box is the only mandatory parameter, but all others parameter can be passed as well(such as the background and floating box css configuration), the floating box is fixed in the middle of the screen. A link with a class named “close-box” is added in the floating box, this link is responsable for closing(hiding) the floating box.

$(“a#my-link”).click(function () { $.floatbox({ content: “<p>My HTML content here!</p>”, fade: true }); });

jStorage

jStorage is a simple wrapper plugin both for Prototype and jQuery to store data on browser side.

$.jStorage.set(key, value)