Usefull jQuery Plugins

Adding a Timepicker to jQuery UI Datepicker

The timepicker addon adds a timepicker to jQuery UI Datepicker, thus the datepicker and slider components (jQueryUI) are required for using any of these. In addition all datepicker options are still available through the timepicker addon.

FullCalendar

FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar). It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event).

bxSlider

horizontal, vertical, and fade transitions, display and move multiple slides at once (carousel), prev / next, pager, auto controls, easing transitions, random start, ticker mode, before, after, first, last, next, prev callback functions, optional styling included, TONS of options

elRTE

elRTE is an open-source WYSIWYG HTML-editor written in JavaScript using jQuery UI. It features rich text editing, options for changing its appearance, style and many more.

elFinder

elFinder is an open-source file manager for web, written in JavaScript using jQuery UI. As you can see its creation is inspired by simplicity and convenience of Finder program used in Mac OS X operating system.

jQuery.multiselect

jQuery plugin that converts select input with attribute multiple into group of checkboxes with ability to add new values.
Requires jQuery UI styles (jQuery UI JS is not required).

jQuery UI MultiSelect Widget

MultiSelect turns an ordinary HTML select control into an elegant drop down list of checkboxes with themeroller support.

jQuery Related (Dependent) Selects Plugin

jQuery Related Selects is a plugin that allows you to create any number of select boxes whose options are determined upon the selected value of another. You pass an array or object of select box names, and the select boxes will depend on each other in the order in which they are passed in.

jQuery TOOLS

jQuery Tools is a collection of the most important user interface components for the web. These are tabs, accordions, tooltips, overlays, exposing effects and scrollables. They can dramatically improve the usability and responsiveness of your site.

jQuery Validation

This jQuery plugin makes simple clientside form validation trivial, while offering lots of option for customization

Metadata – jQuery plugin for parsing metadata from elements

    /*
    * Metadata - jQuery plugin for parsing metadata from elements
    *
    * Copyright (c) 2006 John Resig, Yehuda Katz, Jörn Zaefferer, Paul McLanahan
    *
    * Dual licensed under the MIT and GPL licenses:
    * http://www.opensource.org/licenses/mit-license.php
    * http://www.gnu.org/licenses/gpl.html
    *
    */
    /**
    * Sets the type of metadata to use. Metadata is encoded in JSON, and each property
    * in the JSON will become a property of the element itself.
    *
    * There are three supported types of metadata storage:
    *
    * attr: Inside an attribute. The name parameter indicates *which* attribute.
    *
    * class: Inside the class attribute, wrapped in curly braces: { }
    *
    * elem: Inside a child element (e.g. a script tag). The
    * name parameter indicates *which* element.
    *
    * The metadata for an element is loaded the first time the element is accessed via jQuery.
    *
    * As a result, you can define the metadata type, use $(expr) to load the metadata into the elements
    * matched by expr, then redefine the metadata type and run another $(expr) for other elements.
    *
    * @name $.metadata.setType
    *
    * @example 

This is a p

* @before $.metadata.setType("class") * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label" * @desc Reads metadata from the class attribute * * @example

This is a p

* @before $.metadata.setType("attr", "data") * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label" * @desc Reads metadata from a "data" attribute * * @example

This is a p

* @before $.metadata.setType("elem", "script") * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label" * @desc Reads metadata from a nested script element * * @param String type The encoding type * @param String name The name of the attribute to be used to get metadata (optional) * @cat Plugins/Metadata * @descr Sets the type of encoding to be used when loading metadata for the first time * @type undefined * @see metadata() */ (function($) { $.extend({ metadata : { defaults : { type: 'class', name: 'metadata', cre: /({.*})/, single: 'metadata' }, setType: function( type, name ){ this.defaults.type = type; this.defaults.name = name; }, get: function( elem, opts ){ var settings = $.extend({},this.defaults,opts); // check for empty string in single property if ( !settings.single.length ) settings.single = 'metadata'; var data = $.data(elem, settings.single); // returned cached data if it already exists if ( data ) return data; data = "{}"; if ( settings.type == "class" ) { var m = settings.cre.exec( elem.className ); if ( m ) data = m[1]; } else if ( settings.type == "elem" ) { if( !elem.getElementsByTagName ) return undefined; var e = elem.getElementsByTagName(settings.name); if ( e.length ) data = $.trim(e[0].innerHTML); } else if ( elem.getAttribute != undefined ) { var attr = elem.getAttribute( settings.name ); if ( attr ) data = attr; } if ( data.indexOf( '{' ) <0 ) data = "{" + data + "}"; data = eval("(" + data + ")"); $.data( elem, settings.single, data ); return data; } } }); /** * Returns the metadata object for the first member of the jQuery object. * * @name metadata * @descr Returns element's metadata object * @param Object opts An object contianing settings to override the defaults * @type jQuery * @cat Plugins/Metadata */ $.fn.metadata = function( opts ){ return $.metadata.get( this[0], opts ); }; })(jQuery);

jQuery Zoomy

Zoomy is a quick and easy plugin that will zoom into a picture. You only need two copies of one image first the display image and then the zoom image.

Spritely

jQuery.spritely is a jQuery plugin created by Artlogic for creating dynamic character and background animation in pure HTML and JavaScript. It’s a simple, light-weight plugin with a few simple methods for creating animated sprites such as the birds you see on this page, and dynamic scrolling backgrounds.

UI.Layout – The Ultimate Page Layout Manager

his plugin was inspired by the extJS border-layout, and recreates that functionality as a jQuery plug-in. The UI.Layout plug-in can create any UI look you want – from simple headers or sidebars, to a complex application with toolbars, menus, help-panels, status bars, sub-forms, etc.

Timed cycling of DOM elements using Javascript

I had the following sequence of code:

  • test 1
  • test 2
  • test 3
  • test 4
  • test 5

What i wanted to achieve was to add the class “selected” to the childrens of #parent one at a time, having some delay in between. When then next element is selected, then the element before it should lose the selected class.

Based on the great work of cmarshall at http://www.webmasterworld.com/javascript/3449722.htm and adding a bit of jQuery i was able to build a page using jQuery that does that.

I didn’t bother to put the all the code here, you can just view source in the demo. The code is pretty much commented so you shouldn’t have any problem understanding it.

You can click here to see it in action.