Best Collection of Useful jQuery plugins.

Monday, July 27, 2009 0:52
Posted in category Design, Development, Jquery

jqDock

Transform a set of images into a Mac-like Dock menu, horizontal or vertical, with icons that expand on rollover, and optional labels.

NotesForMenu

NotesForMenu is a very simple JQuery plugin to create a multi-level menu with only one line of code. You can also very easily customize it.

jQuery DropLine Menu

This jQuery menu turns a nested UL list into a horizontal drop line menu, with each sub menu appearing as a single row of links beneath its parent menu.

NavigMenu

A menu to site navigating. It shows on double click anywhere in document or in a container/layer.

MegaMenu

Mega Menus refer to drop down menus that contain multiple columns of links. This jQuery script lets you add a mega menu to any anchor link on your page, with each menu revealed using a sleek expanding animation. Customize the animation duration plus delay before menu disappears when the mouse rolls out of the anchor.

ListNav

Supplies an easy way to unobtrusively add a letter-based navigation widget to any UL or OL list. An easily stylable (via CSS) nav bar appears above the list, showing the user the letters A-through-Z. Clicking one of the letters filters the list to show only the items in the list that start with that letter. Hovering over a letter (optionally) shows a count above the letter, indicating how many items will be displayed if that letter is clicked. Other options give you control over the functionality.

jQuery SVG

A jQuery plugin that lets you interact with an SVG canvas.

SuperBox!

jQuery Superbox! is an accessible, highly extensible and customisable “Lightbox” clone.

Step Carousel Viewer

Step Carousel Viewer displays images or even rich HTML by side scrolling them left or right. Users can step to any specific content on demand, or browse the gallery sequentially by stepping through x number of contents each time. A smooth sliding animation is used to transition between steps. The contents for the Step Carousel Viewer can be defined either directly inline on the page, or via Ajax and extracted from an external file instead. In both cases, the contents are simply DIVs with a shared CSS class name that wrap around each individual content.

3D Carousel

3D Carousel creates a mini-interactive page that can be a fun addition to a site.

Ad Gallery

An image gallery plugin with a list of thumbnails below the image. Not quite like Lightbox or Thickbox, but more of a showcase type of gallery.

(mb)ImgNavigator 2.0

A photogallery for extralarg images with navigator. You can drag your extralarge image in the display by the navigator or the image itself.

Watermark

This simple-to-use jQuery plugin adds watermark capability to the INPUT and TEXTAREA HTML elements.

Input Limiter

This jQuery plugin will allow you to limit input into form fields. It can display a message as the user types to let them know how many characters they have remaining.

ShareThis

Provides a button to the ShareThis web service for easily sharing information.

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.

ClockPick

ClockPick is a timepicker plugin, enabling users to enter a time value into a form field. Using a unique popup div UI, ClockPick gets the job done in about 1/5 the time it takes to enter a time value using a traditional select menu UI.

DivCorners

This plugin aims to created an easy way to add border layouts to screen content. It includes three functions that can be called after jquery.pack.js and jquery.divcorners.js are loaded.

Favorite Icon

This plugin intended for adding favicons to external links.

Activebar2

Activebar2 is a crossbrowser information bar mimicking the look and feel of the widely spread bars used in modern browsers. It provides an easy and unobtrusive way of communicating all sorts of messages to your users. Or to provide help by displaying tips and usage informations.

jBreadCrumb

Plugin for creating animated breadcrumbs with jQuery.

jContext

This plugin implements simple lightweight menu.

jSuggest

Suggest is yet another auto-completer for your text input box. It mimics the functionality of Google suggest. jSuggest will also bind item selection to your up and down arrows and also allow you to select the suggestions using your mouse.

jGesture

A cross browser jQuery plugin for detecting mouse gestures. Enable your application with the standard gestures or create your own.

Effect Letterine

This plugin enables an effect “Lettrine”, each first letter of paragrah is replace by a corresponding image of the letter.

DynaCloud

DynaCloud is a jQuery plugin that generates tag or keyword clouds from text on web pages and highlights matching parts once a keyword is clicked.

Drop Shadow

This plugin creates soft drop shadows behind page elements, including text and transparent images. It accepts options for the horizontal and vertical offsets, amount of blur, opacity, and color.

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 Pager

A simple JQuery plugin to provide paging UI functionality for data driven web applications

jQuery Google Charts

This plugin providen an useful wrapper for Google API Chart

jqPuzzle

jqPuzzle lets you easily create sliding puzzles for your web page. Select an image, put it in your page, and add some magic – jqPuzzle will automatically turn it into a full-blown sliding puzzle. If you want, you can highly customize (number of rows/cols, hole position, initial appearance, controls, animation speeds) and style your sliding puzzle according to your needs. The interface is available in several languages, and you can add your own texts on the fly.

Way Farer Tooltip

The “wTooltip” is a lightweight, flexible tooltip that is made to be easily customized. The default behavior is the conversion of the title attribute into the tooltip, which makes quick creation of multiple tooltips on any page a snap.

jHelperTip

jHelperTip is intended to be useful in many situations such as hovering tip and clickable tips. It can get data from a container, through Ajax or even the attributes of the current object.

JMaps Frameworks

The JMaps Framework is a jQuery plugin that provides a simple but powerful API for Google’s mapping services.

  1. jQuery(document).ready(function(){
  2. jQuery(‘#map1’).jmap(‘init’, {‘mapType’:‘hybrid’,‘mapCenter’:[40.736216,-74.193393]});
  3. jQuery(‘.toggle-map’).toggle(function(){
  4. jQuery(‘#map1’).fadeOut(function(){
  5. jQuery(this).jmap(‘CheckResize’);
  6. });
  7. }, function(){
  8. jQuery(‘#map1’).fadeIn(function(){
  9. jQuery(this).jmap(‘CheckResize’);
  10. });
  11. });
  12. jQuery(‘.resize’).click(function(){
  13. var size = jQuery(this).attr(‘rel’) + ‘px’;
  14. jQuery(‘#map1’).animate({‘width’: size, ‘height’: size}, function(){
  15. jQuery(this).jmap(‘CheckResize’);
  16. });
  17. });
  18. });

Mouse Wheel extension

This plugin adds mouse wheel support for your application. Just call mousewheel to add the event and call unmousewheel to remove the event.

  1. $(‘div.mousewheel_example’).mousewheel(fn);
  2. $(‘div.mousewheel_example’).bind(‘mousewheel’, fn);

jQuery BigPicture

jQuery BigPicture is an unobtrusive plugin designed to display images in a modal window along with a full description.

  1. $(‘#basic’).bigPicture();

Price Format Plugin

jQuery Price Format Plugin is a plugin to format input text fields as prices. For example, if you type 123456, the plugin updates it to US$ 1,234.56. It is costumizable, so you can use other prefixes and separators (for example, use it to get R$ 1.234,55), and also limit the the number of chars or change the size of the cents field (for example, to get US$ 12.345)

  1. $(‘#example2’).priceFormat({
  2. prefix: ‘R$ ‘,
  3. centsSeparator: ‘,’,
  4. thousandsSeparator: ‘.’
  5. });

Repeated Clicks

Repeats events if user hold mouse button.

  1. $(‘.counter .plus’).repeatedclick(function () {
  2. // body…
  3. }, {
  4. duration  : 500, // starting duration
  5. speed     : 0.8, // duration multiplier
  6. min       : 100  // minimum duration
  7. })

CheckBoxGroup

This useful little plugin provides “select all” checkbox functionality to a group of checkboxes. The select all checkbox stays in sync with the group so it is appropriately checked when it needs to be.

  1. <input type=‘checkbox’ class=‘checkall’>checkall<br>
  2. <input class=‘groupclass’ name=‘group’ type=‘checkbox’>chk1<br>
  3. <input class=‘groupclass’ name=‘group’ type=‘checkbox’>chk2<br>
  4. <input class=‘groupclass’ name=‘group’ type=‘checkbox’>chk3<br>
  5. <input class=‘groupclass’ name=‘group’ type=‘checkbox’>chk4<br>
  6. <input type=‘checkbox’ class=‘checkall’>

  1. $(‘.checkall’).checkgroup({
  2. groupSelector:‘.groupclass’,
  3. enabledOnly:true,
  4. onComplete: function(boxes){
  5. //do something with the affected check boxes – boxes is an array
  6. }
  7. });

Perl semi-compatible sprintf

Based on the functionality of the Perl implementation of sprintf.

  1. $(‘obj’).printf(‘<div>Integer: %d, hex: %1$#x, HEX: %1$#X, Binary: %1$#b, BINARY: %1$#B, Octal: %1$#o, Float: %1$f, Exp: %1$e</div>‘, 123.456 );

EmptyText

A simple plugin to set “default” text for a form field. When the field is empty, the default text is inserted, and when the user clicks in the field, the text is cleared.

  1. $(“:text”).emptyText(“This text box is empty!”, “Defaulted”);

Easy Input

The purpose of the plug in is to help mature-aged users, the visually impaired users and/or any user who is sick and tired of the tiny text inputs and areas, by providing a large display box that shows (in real-time) what you are typing into these areas (text inputs and text areas).

  1. $(document).ready(function() {
  2. $(‘:text, :textarea’).easyinput();
  3. });

Edit-in-Place

Switches an element to a text input box, then when you’re done typing and hit enter/tab, it calls a callback.

  1. $(‘#editable-thing’).click(function(){
  2. $(this).edit_in_place(function(editable_thing, value){
  3. alert(“You typed “+value);
  4. });
  5. });

jQuery Doubleselect Plugin

Fill in a second select box dependent on the first one

  1. $(document).ready(function()
  2. {
  3. “Vegetables”: {
  4. “key” : 10,
  5. “defaultvalue” : 111,
  6. “values” : {
  7. “tomato”: 110,
  8. “potato”: 111,
  9. “asparagus”: 112
  10. }
  11. },
  12. “Fruits”: {
  13. “key” : 20,
  14. “defaultvalue” : 212,
  15. “values” : {
  16. “apple”: 210,
  17. “orange”: 211,
  18. “kiwi”: 212,
  19. “melon”: 213
  20. }
  21. }
  22. };
  23. $(‘#first’).doubleSelect(‘second’, selectoptions);
  24. });

AJAX Broken Link Checker

This module checks your links on the current page by requesting them and reading the server response. If the server returns 200 OK the link gets ‘active’ class, if other header – the link marked as inactive.

  1. $(‘a.goto’).linkChecker({ linksAtOnce : 2, timeout: 4 });

jFade 1.0

This plugin will easily allow you to do color transitions for text, background and borders for different events.

  1. $.fn.jFade.defaults = {
  2. trigger: “load”,
  3. property: ‘background’,
  4. start: ‘FFFFFF’,
  5. end: ‘000000’,
  6. steps: 5,
  7. duration: 30
  8. };
Be Sociable, Share!
Father's Day Promo $40 OFF on ANY orrder
You can leave a response, or trackback from your own site.

Leave a Reply