Best jQuery plugins – February 2010

Quicksand

Reorder and filter items with a nice shuffling animation. Just specify source container and destination collection which will replace the source collection. New elements will appear with fancy scaling+alpha effect, deleted elements (non-existant in destination collection) will scale out and rearranged items will move to their destination positions.

Embed Picasa Gallery

If you keep your images on PicasaWeb, this plugin lets you integrate an interactive gallery showing images of your choice.

YoxView

YoxView is a popup image viewer, built using jQuery 1.4. It’s simple to use yet quite powerful.

nyroModal

nyroModal is a highly customizable modal window plugin.

Custom browser context menu

Usual right click menu of browser is replaced with a menu created in div and css.

jQuery Text Effects

The jQuery Text Effects plugin is a library of animations for your text (as suggested by one of the jQuery forum users).

jQuery Two Sided Multi Selector

The jQuery Two-Sided Multi-Selector converts a multi-select list into a two-sided select list with Add / Add All and Remove / Remove All options. The list will not affect the post-back as the selector will create the elements with the correct name – this means it can safely be used to add functionality to your multi-select list without needing any changes to how you handle the post-back on the server.

Delicious tagInput

jquery.tagInput is a delicious inspired tagging input field.

autoNumeric

A flexible International numeric formatting, that will automatically place a thousand separator as you type.

TargetTable

Highlights the row and the column to which the mouse-over cell pertains.

After the Deadline – Spell and Grammar Checker for Web Applications

After the Deadline is an open source proofreading service that checks spelling, misused words, style, and grammar in web applications.

SimpleSlider

A nifty little plugin that allows you to have multiple frames that slide between each other.

Just Another Corners&Gradients

A very simple jQuery plugin for creating rounded corners and gradient backgrounds.

tablepaginateQ

Using AJAX, paginate data html tables.

Show password checkbox

To help address the usability problems with password fields which obscure the password text itself , this jQuery plugin adds a “Show password” checkbox after selected password fields. When clicked, the password field changes to a text field, revealing the password text. Unchecking the box obscures the password again.

jSliderListBox

jSlider is a jquery plugin to transform a listbox (select box) in a slider.

Joogle – automatic web search plugin

Joogle leverages Google, Yahoo and Twitter JSON search APIs in order to show search results when the user hovers a selected text element (whose content will be the searched term).

uiState

Simple jQuery plugin that format/unformat an element using the states defined by UI CSS Framework.

TTabs

This plugin just tweaks a html markup and then calls UI Tabs function. You do not need to specify the list of tabs before the first tab section. The plugin creates it from the headings, or you can specify the tab labels right in the javascript code.

jQuery bubble popup

This plugin create easily smart bubble popups with only a line of code in jQuery.

Inline Label

Takes the label text for a field and places it inside the field. You can also put a text of your choice in the field, or use the title attribute, choose which class the field should have and whether the label should be hidden once the text is placed in the field. Verified with jQuery 1.4.x and 1.3.x.

jfastmenu

The jfastmenu plugin is a fast, easy and very useful. Writing a few lines of code can be well prepared a menu based on list xhtml. the jfastmenu is compatible with the following browsers: Internet Explorer, Firefox, Safari, Opera and Chrome.

TagReplacer.js

A simple jQuery function to find HTML elements of a specified type and replace them with something.

$(“body”).replaceTags({tagToReplace:”replaceWith”, p:”div”, b:”span”});

jLoader – Preload your website

Used to preload any div(s), it displays an overlay until all the images and background images in the div are loaded. It can have optional arguments to display and customize a porogress bar and progress text.

var loader= new Loader(“#content”, {userCallback:showContent, showProgress:true, showProgressText:true, textSize:15}); loader.Start();

JSON RPC 2.0

This is JSON RPC 2.0 (Remote Procedure Call) client implementation based on jQuery.

$.jsonRpc(‘functionName’, ['param1', 'param2'], onSuccessCallback, onErrorCallback); // Configuration: $.jsonRpcSetup({ namespace: ‘default’, url: ‘/api/json-rpc’ });

HJS – jQuery Object Oriented Class

A jQuery Object Oriented Class helps you to implement your class in javascript with jQuery library.

// person class var Person = $.Class.create({ // constructor initialize: function(name, family, father_name) { this._name = name; this._family = family; this._father_name = father_name; }, // methods toString: function() { return this.property(‘Name’) + ‘ ‘ + this.property(‘Family’) + ‘ Son of ‘ + this.property(‘FatherName’) + ‘ ‘ + this.property(‘Family’); } }, { // properties getset: [['Name', '_name'], ['Family', '_family'], ['FatherName', '_father_name']] }); var john = new Person(‘John’, ‘Foster’, ‘Bill’); alert(john);

$.onActivation – don’t bind an event to an object, just say an element is active

This little jQuery-plugin defines the position, that developers don’t need to know whether an element was clicked or used with the keyboard – he just needs to know, that an element was activated (by the user). So onActivation binds basically a click- and a keyup-event to a defined element, and the developer makes sure by using this plugin, that even keyboard users are ready to go. Additionally the plugin also prevents double clicks where double clicks shouldn’t be valid.

$(“input[type='submit']“).onActivation(function() { // do something … });

defineDatasets

The HTML 5 Draft Specification defines “custom attributes” of the form data-something=”value”. The specification goes on to say that the strings contained in custom attributes are to be made available in the scripting language (JavaScript) as an object called dataset, with property names taken from the attribute names, but stripped of the “data-” part. For example, if a DOM element specified data-where=”home” data-when=”tomorrow” and data-what=”birthday party”, the dataset object would be initialized as {where:”home”, when:”tomorrow”, what:”birthday party”}.

<script src=”jquery.js”></script> <script src=”jquery.defineDatasets.js”></script> <script> $(document).ready(function() { $(“input[type=text]“).defineDatasets({overwriteExistingDatasets:true}); }); </script>

jSonComments

jSonComments is a jQuery plugin to simply access metadata in JSON format from a HTML comment.

$(document).ready(function() { alert($(‘div#getMyData’).jSonComments().foo); //alerts bar alert($(‘div#getMyData’).data(‘jSonCommentsData’).foo); //alerts bar alert(typeof $(‘div#getMyData’).data(‘anotherKey’)); //alerts undefined alert($(‘div#getMyData2′).jSonComments({dataAttribute:’anotherKey’}).foo); //alerts bar alert($(‘div#getMyData2′).data(‘anotherKey’).foo); //alerts bar });

Autocomplete plugin using Google API

Text completion is a plug-in API for Google to use.