30 Best jQuery Plugins – May 2009

CrossSelect plugin

This plugin can replace any multiple select element with a “switch item to the other column” interface more intuitive to use, and more similar to that seen in many desktop applications.

vTip

vTip is designed to quickly provide very lightweight (1.11KB js, 272b CSS) tooltips to users of jQuery.

Time Entry Field

Sets an input field up to accept a time value using a spinner.

Path Selector

Path selector is a breadcrumb bar jquery plugin for selection of hierarchic options (similtar to address bar of Vista’s Windows Explorer).

jPlayer

jPlayer is a jQuery plugin that allows you to play and control mp3 files in your webpage

Notifier

A jQuery UI widget to create notifications. Uses the jQuery UI CSS Framework so it can be skinned using ThemeRoller.

opensocial-jquery

opensocial-jquery is jQuery based concise JavaScript Library for rapid OpenSocial Gadgets development. When you use opensocial-jquery, you can develop OpenSocial Gadgets by the method of developing the website by jQuery. opensocial-jquery is a package of customized jQuery and plugins.

Glyph

This plugin inserts a glyph at the end of your article or blog post, just like magazines and newspaper designers do in printed publications, giving it a more professional feel.

CheckTree(ycTIN Edition)

This edition is compatible with CheckTree, fixed some bugs and added some new function. You can easily to integrate and handle AJAX update.

jQuery List DragSort

A lightweight jQuery plugin that provides the ability to sort lists using drag and drop.

HintBox

HintBox is an easy to use search helper and it looks like Google Suggest.

Custom Maxlentgh

This plugin makes it easy to apply a “maxlength” attribute to custom elements for example a textarea.

jQuery Bookmark

A jQuery plugin that sets a div to allow sharing of your page on various bookmarking sites.

Form Wizard plugin

The form wizard plugin is a plugin based on jQuery which can be used to simulate wizard like page flows for forms without having to navigate between different pages.

jQuery Custom Select Box

Replaces the standard HTML form selectbox with a custom looking selectbox. Allows for disable, multiselect, scrolling, and very customizable.

jQuery Modal Dialog

This plugin implements FaceBook-like modal dialog.

epiclock

The epiClock jQuery Plugin allows users to easily create dynamically updating clocks, timers, and stopwatches. Each clock can be styled with custom CSS or images to achieve the proper effect on your page. Users can format the output in any way they desire, as the clock takes formatting strings in a manner similar to that of PHP’s date() function.

mbMenu

This is a powerful jQuery component to build easily a multilevel tree menu or a contextual menu (right click) in an intuitive way.

Droplist Filter

This is a JavaScript tool for adding a little search widget next to any droplist.

jYoutTube

It takes any YouTube video URL or video ID as first parameter and thumbnail size (big or small) as the second parameter. Utility returns that video’s screenshot URL.

<br /> // Returns big screenshot by video id<br /> $.jYoutube(‘rSUfWXcNAOw’);</p> <p>// Returns small thumbnail by YouTube video URL<br /> $.jYoutube(‘http://www.youtube.com/watch?v=rSUfWXcNAOw’, ‘small’);<br />

Drop Curves

Applies rounded edges to images, borders, and a drop shadow. Allows for scaling and X/Y positioning of the image and shadow. Corner radius, border size/color, and shadow color/opacity are configurable as well.

Code example:
<br /> $(‘.curves’).dropCurves({<br /> w:100, // scale image to width 100px<br /> h:120, // scale image to height 120px<br /> sColor:’#000′, // shadow color<br /> sX:-2, // shadow offset X<br /> sY:2, // shadow offset Y<br /> r:10 // corner radius<br /> });<br />

GalleryView

GalleryView is a content-gallery plugin capable of displaying any HTML content in an animated gallery view.

<br /> $(‘#photos’).galleryView({<br /> panel_width: 800,<br /> panel_height: 300,<br /> frame_width: 100,<br /> frame_height: 100<br /> });<br />

Flip!

Flip is a plugin for jquery that will flip your elements in four directions.

<br /> $(“#flipBox”).flip({</p> <p>direction: ‘tb’,<br /> color: ‘#B34212′,<br /> onBefore: function(){alert(“after this alert I’ll start!”)}<br /> onAnimation: function(){alert(“Hey where’s my box?!”)}<br /> onEnd: function(){alert(“Now I’m ready for another spin!”)}</p> <p>});<br />

jQuery Image Cube

A jQuery plugin that sets a division to rotate between images (or other things) as if they were on the faces of a cube.

jquery-validator

A light, extensible, clean and ‘easy-to-use’ form validator.
It’s can validate onblur, onkeyup, onsubmit or you can validate when you want.
You can validate fields in a DIV without a FORM tag.

<br /> $(function() {<br /> $(‘form fieldset’).validator({<br /> liveCallback:function() {console.log(this,arguments);},<br /> liveOnKeyUp:true,<br /> nocache:true,<br /> alert:true,<br /> onFail:function(a) {var t = a;console.error(a);},<br /> onSuccess:function(a) {var t = a;console.info(a);return false;}<br /> });<br /> });<br />

Loading Animation Plugin

A simple Plugin to transparent coloring a area and filling with a loading symbol during a process is running.

<br /> // Start<br /> $(‘selector’).loadAnimation();</p> <p>// Stop<br /> $.loadAnimation.end();<br />

canvasswap

A jQuery plugin to induce an image swap on hover. Although this plugin does it’s job of swapping out images extremely well , that’s not what it’s main intention is. What canvasSwap sets out to do is not only provide a great image swap utility, but it also allows swapping transparent PNG images in IE 6! (with the help of a PNG transparency script)

<br /> $(document).ready(function(){<br /> $.fn.canvasSwap.defaults.suffix = ‘hover’;<br /> $.fn.canvasSwap.defaults.ie6_support = true;<br /> $(‘img.myswap’).canvasSwap();<br /> });<br />

MagicalHover

MagicalHover is a nice rollover images on your website.
It creates an effect of expansion on a rollover image

Bounce

This project allows the user to extend the elements on the web page (created for use with ‘textarea’ elements, but no reason why it cannot be used elsewhere) with a bounce animation.

<br /> $(‘textarea’).bounce();<br /> $(‘textarea’).bounce({bottom: false, open: true});<br /> $(‘textarea’).bounce({bottom: false}).openBouncer(1);<br />

Most Related Posts

• 10 Best jQuery Sliders
• 10 Most Popular JavaScript Frameworks
• 10 Best jQuery Plugins – March 2009