Plugins

User login
Login/Register
Can't find a Plugin?

Can't find a Plugin you are looking for? Check out the jQuery Wiki page.

Are you a plugin developer? Please move your plugin over to this site.

Website Bug or Feature Request?

Found a bug on the new jQuery Plugin website? Have a feature request?

Submit it to the jQuery Plugin website issue queue to ensure it is noticed!

Home › Downloads

Plugins: Widgets


Filter by Project release API compatibility:
Login or register to modify the filter.

(mb)ConteinersPlus, a jQuery component for full customizable and featured container layout (DIV box model)

Last changed: 10 weeks 3 days ago

Here it is!
Finally I realized the DIV box model of the (mb)Containers!

This is a useful plug in to build full featured and fully skinnable containers.
The container can be set to draggable, resizable, collapsable and minimizable.

demo and doc: http://pupunzi.wordpress.com/2009/02/01/mbcontainersplus/

dependencies:

ui.core.js
ui.draggable.js
ui.resizable.js
optional: jQuery.metadata.js

How does it work:

here is the js call:

$(function(){
$(”.containerPlus”).buildContainers({
containment:”document”,
elementsPath:”elements/”
});
});

here is the code for each container:

Titolo container 1

VersionDateLinksStatus
1.0.02009-Feb-01Recommended for 1.0.xThis is currently the recommended release for 1.0.x.
1.0.32009-Feb-15Recommended for 1.2.xThis is currently the recommended release for 1.2.x.
1.82009-Apr-18Recommended for 1.3.xThis is currently the recommended release for 1.3.x.

(mb)Gallery, another way to present your photo gallery!

Last changed: 17 weeks 6 days ago

A full featured image gallery, with nav toolbar, thumbnails, autosize frame.

DEPENDENCIES:
jquery.js(1.3)

HOW DOES IT WORK:

here is the js call:

$(function(){
$("#g1").mbGallery( {
galleryMaxWidth:0,
galleryWidth:300,
galleryHeight:300,
galleryColor:"#333",
galleryFrameBorder: 12,
galleryFrameColor:"#fff",

thumbStripPos: "right",
thumbStripWidth:250,
thumbSelectColor: "#fff",
thumbOverColor : "#cccccc",
thumbStripColor: "#333333",
thumbsBorder: 6,
thumbHeight:70,
headerOpacity: .8,

labelColor: "#333333",
labelColorDisactive:"#333333",
labelTextColor: "#ffffff",
labelTextSize:"11px",
labelHeight:20,

startFrom:0,
fadeTime: 500,
autoSlide:true,
autoSize : true,
slideTimer: 3000,
iconFolder: "elements/white",
startTimer:0
}
)}
);

here is the code for each image:

VersionDateLinksStatus
1.0.02009-Feb-28Recommended for 1.3.xThis is currently the recommended release for 1.3.x.

(mb)ImgNavigator, a photo gallery for extralarge images!

Last changed: 4 weeks 1 day ago

A photogallery for extralarge images with navigator.
You can drag your extralarge image in the display by the navigator or the image itself.
Enjoy yourself into images!

dependencies:

jquery.js(1.3)
ui.core.js (1.6rc5)
ui.draggable.js(1.6rc5)

How does it work:

here is the js call:

$(function(){
   $("#navArea").imageNavigator( {
          areaWidth: 700,
          areaHeight:500,
          draggerStyle:"1px dotted red",
          navOpacity:.8
    })
})

here is the code for each image:

<div id="navArea">
<div imageUrl="DSC00844.JPG" navPosition="BR" navWidth="100" style="display:none;" class="imagesContainer">
<span class="title">zuccheriera</span>
<div class="description"><STRONG>description1</STRONG></div>
</div>
[...]
</div>

Params:

areaWidth and areaHeight are the width and the height of the display;

VersionDateLinksStatus
1.02009-Jan-20Recommended for 1.0.xThis is currently the recommended release for 1.0.x.
1.8.02009-Mar-16Recommended for 1.3.xThis is currently the recommended release for 1.3.x.

(mb)MaskedGallery

Last changed: 5 weeks 3 days ago

Slide your images into a mask!

Build your own png mask and choose your images to slide inside!

Releases:

1.0 first release

dependencies:

jquery.js (1.2 -> 1.3.1)

How does it work:

here is the js call:

$(function(){
$("#g1").mbMaskGallery({
type:"normal",
galleryMask:"mask/monitor.png",
galleryColor:"black",
galleryLoader:"loader/loader_black.gif",
loaderOpacity:.3,
loader:false,
fadeTime: 200,
slideTimer: 6000
});
})

here is the code for each container:

<div id="g1" class="galleryCont" >
<img src="images/3.jpg">
<img src="images/2.jpg" url="mbMaskedGallery1.html">
<img src="images/5.jpg">
<img src="images/4.jpg">
<img src="images/6.jpg">
<img src="images/7.jpg">
<mg src="images/8.jpg">
</div>

Params:

type axcept random or normal;

VersionDateLinksStatus
1.8.02009-May-26Recommended for 1.3.xThis is currently the recommended release for 1.3.x.

(mb)Tooltip, a beautiful alternative

Last changed: 18 weeks 6 days ago

Nice tooltip for yor page!
Now you can replace the ugly default tooltip with this smart and nice one!

demo:http://pupunzi.wordpress.com/2009/02/07/mbtooltipmbtooltip/

dependencies:

jquery.timers.js
jquery.dropshadow.js

How does it work:

here is the js call:

$(function(){
$("[title]").mbTooltip({
    opacity : .90, //opacity
    wait:500, //before show
    ancor:"mouse", //"parent"
    cssClass:"default", // default = default
    timePerWord:70, //time to show in milliseconds per word
    hasArrow:false,
    color:"white",
    imgPath:"images/",
    shadowColor:"black",
    fade:500
  });
})

here is the code for each image:

try to mouseOver each of the text in this page... wait just few seconds... and...

...
prova tooltip (span)
...

VersionDateLinksStatus
1.0.02009-Feb-07Recommended for 1.0.xThis is currently the recommended release for 1.0.x.
1.1.02009-Feb-21Recommended for 1.3.xThis is currently the recommended release for 1.3.x.

Activebar2

Last changed: 19 weeks 23 hours ago

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.

VersionDateLinksStatus
2.0.12009-Feb-20Recommended for 1.3.xThis is currently the recommended release for 1.3.x.

AddThis

Last changed: 4 weeks 3 days ago

jQuery AddThis Plugin

This is a jQuery implementation of the AddThis widget that is available from AddThis. Being the first version, this just uses the basic options that allow you to put this on your site.

Usage:

HTML

<a class="addthis"></a>

JS

$.addthis();
-or-
$.addthis('username');
where username is your AddThis username. Useful for tracking statistics.

VersionDateLinksStatus
0.12009-Jun-02Recommended for 1.2.xThis is currently the recommended release for 1.2.x.

ajaxPager

Last changed: 18 hours 45 min ago

ajaxPager is a jQuery UI widget plugin for building javascript pagers quickly and easily. Each page’s content can be from either a ajax request, a url (iframe), string, element inside the pager, or element outside the pager.

VersionDateLinksStatus
0.2.1-beta-32009-Jul-03Recommended for 1.3.xThis is currently the recommended release for 1.3.x.

anchorCheck

Last changed: 38 weeks 6 days ago

anchorCheck is a lightweight checkbox replacement control that does not rely on an actual checkbox being rendered first. The control accepts any anchor tag and simply extends it with checkbox-like behavior. The download contains a test page which easily demonstrates implementing anchorCheck.

VersionDateLinksStatus
1.32008-Oct-04Recommended for 1.0.xThis is currently the recommended release for 1.0.x.
1.12008-Oct-03Recommended for 1.2.xThis is currently the recommended release for 1.2.x.

Another Color Picker

Last changed: 1 year 50 weeks ago

This rudimentary color picker plugin was designed for use in small UIs. It does not use image files and does nothing fancy. It creates a number of small elements (normally SPANs) which, when clicked, activate a callback function, which is typically used to pass on the selected color to some other UI element(s) (e.g. to change a background, text, or border color). The list of colors it uses can of course be customized and the layout of the color list itself is somewhat configurable.

VersionDateLinksStatus
2007.07.122007-Jul-16Recommended for 1.1.xThis is currently the recommended release for 1.1.x.

asmSelect - Alternative Select Multiple

Last changed: 30 weeks 5 days ago

A progressive enhancement to select multiple form elements. It provides a simpler alternative with the following advantages:

  • Easier for users to understand and interact with than regular select multiple form elements. Users know how to interact with it sans instruction.
  • Doesn't require user to Ctrl-Click or Shift-Click multiple elements. Instead users of your form can add or remove elements individually, without risk of losing those that have already been selected.
  • Selected elements are always visible (within the confines of your interface) while unselected elements are always hidden (within a regular select).
  • Unlike regular select multiple option elements, those on asmSelect are optionally sortable with drag and drop (this part requires jQuery UI).
  • asmSelect hides, maintains and updates the original select multiple so that no changes are required to existing code.
  • If a user does not have javascript, then of course the regular select multiple form element is used instead.
  • If the original select multiple form element is modified by some other jQuery or javascript code, the change will be reflected in the asmSelect as well.

Please see full information at http://code.google.com/p/jquery-asmselect/

Companion article at: http://www.ryancramer.com/journal/entries/select_multiple/

VersionDateLinksStatus
1.0.4-beta2008-Dec-01Recommended for 1.0.xThis is currently the recommended release for 1.0.x.
1.0.1-beta-22008-Jul-07Recommended for 1.2.xThis is currently the recommended release for 1.2.x.

Autocomplete

Last changed: 1 year 1 week ago

Autocomplete an input field to enable users quickly finding and selecting some value, leveraging searching and filtering.

By giving an autocompleted field focus or entering something into it, the plugin starts searching for matching entries and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches.

This can be used to enter previous selected values, eg. for tags, to complete an address, eg. enter a city name and get the zip code, or maybe enter email addresses from an addressbook.

Both local and remote data can be used: Local is good for small datasets (like an addressbook with 50 entries), remote is necessary for big datasets, like a database with hundreds or millions of entries to select from.

Support

VersionDateLinksStatus
1.0.22008-Jun-26Recommended for 1.2.xThis is currently the recommended release for 1.2.x.

benma-iframe-tab

Last changed: 34 weeks 1 day ago

基 于 Jquery 的 iframe tab 标 签 组 件,
详 细 内 容 请 参 考

http://code.google.com/p/benma-iframe-tab/

VersionDateLinksStatus
1.0.0-beta12008-Nov-07Recommended for 1.2.xThis is currently the recommended release for 1.2.x.

BogoDice

Last changed: 1 year 46 weeks ago

BogoDice provides rudimentary "dice rolling" behaviour. Simply apply the plugin to a button element, then clicking that element will "roll" the defined number of "dice".

VersionDateLinksStatus
2007.08.152007-Aug-14Recommended for 1.1.xThis is currently the recommended release for 1.1.x.

Bookmark

Last changed: 7 weeks 10 hours ago

Share your page with any number of bookmarking sites. Features include:

* Full and compact versions.
* Customisable list of sites.
* Easy addition of new/other sites.
* Optional 'Favorites' and 'E-mail' links.
* Bookmark a page other than the current one.

VersionDateLinksStatus
1.1.32009-May-16Recommended for 1.2.xThis is currently the recommended release for 1.2.x.

Bounce

Last changed: 1 year 20 weeks ago

* Added live demo page (url at bottom of page)

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.

VersionDateLinksStatus
1.0.0-updated-example2008-Feb-12Recommended for 1.0.xThis is currently the recommended release for 1.0.x.
1.1.02008-Feb-14Recommended for 1.2.xThis is currently the recommended release for 1.2.x.

Buttonify

Last changed: 8 weeks 4 days ago

Buttonify turns any HTML <input type="button"> or <input type="submit"> button into an anchor that you can style using CSS. This makes it easy to create cool-looking buttons, with full backwards compatibility.

The plugin takes care of forwarding events applied to the original button. Demo can be found inside the project download.

VersionDateLinksStatus
0.0.22009-May-05Recommended for 1.3.xThis is currently the recommended release for 1.3.x.

Calculator

Last changed: 3 weeks 9 hours ago

Attach a popup calculator to your input fields, or inline for a division or span, to assist in determining values for entry.

* Complete control over layout, with two standard layouts defined.
* Can be driven via the keyboard.
* Support for memory.
* Common trigonometric and mathematical functions included.
* Add your own functions.
* Supports binary, octal, decimal (the default) and hexadecimal notation.
* Supports degrees and radians for trigonometric functions.
* Localised content.

VersionDateLinksStatus
1.2.12009-Jun-13Recommended for 1.2.xThis is currently the recommended release for 1.2.x.

CalendarView

Last changed: 5 weeks 3 days ago

The Calendar widget is a JavaScript-based calendar that can either be embedded within a page or popup when a trigger element is clicked. It is based very loosely on the Dynarch Calendar and CalendarView for Prototype.

VersionDateLinksStatus
1.22009-May-27Recommended for 1.0.xThis is currently the recommended release for 1.0.x.

checkboxToSlider

Last changed: 23 weeks 1 day ago

This plugin enables you to transform form checkboxes into neat sliders. The slider hides the checkbox and will update its value after a status change.

VersionDateLinksStatus
1.0.1-BETA-12009-Jan-23Recommended for 1.2.xThis is currently the recommended release for 1.2.x.

CheckTree

Last changed: 42 weeks 2 days ago

CheckTree is a simple way of turning a hierarchy of check-able items into a collapse-able tree.

VersionDateLinksStatus
0.22008-Sep-10Recommended for 1.2.xThis is currently the recommended release for 1.2.x.

CheckTree(ycTIN Edition)

Last changed: 6 weeks 5 days ago

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

VersionDateLinksStatus
0.12009-May-18Recommended for 1.0.xThis is currently the recommended release for 1.0.x.

Clipregion

Last changed: 2 years 12 weeks ago

Simple carousel component for only showing a window of content on a slider, similar to a slideshow.

VersionDateLinksStatus
1.0.02007-Apr-05Recommended for 1.0.xThis is currently the recommended release for 1.0.x.

ClockPick, a Time Picker

Last changed: 3 weeks 4 days ago

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.

VersionDateLinksStatus
1.2.62009-Jun-08Recommended for 1.0.xThis is currently the recommended release for 1.0.x.

clueTip - flexible, enhanced tooltip

Last changed: 4 weeks 4 days ago

The clueTip plugin allows you to easily set a link, or any other element, to show a tooltip when the user's mouse hovers over it. If the link includes a title attribute, its text becomes the heading of the clueTip.

The contents of the clueTip can come from a separate file via AJAX, an element on the current page when set to "local," or the title attribute with a designated delimiter.

The clueTip offers smart positioning relative to the linked element or the mouse.

It takes advantage of Brian Cherne's fantastic hoverIntent plugin if it's available (just include it in a tag if you want the clueTip to use it), and comes with many options, all of which are documented in the source comments and on the demo page.

VersionDateLinksStatus
1.0.32009-Jun-01Recommended for 1.3.xThis is currently the recommended release for 1.3.x.

Collidable Draggables

Last changed: 14 weeks 2 days ago

Adds collision detection to draggable objects.

Add "collide: 'block'" or "collide: 'flag'" when you create a draggable:

$(".box").draggable({collide: 'flag'});
or
$(".box").draggable({collide: 'block'});

In 'flag' mode overlapping objects receive new classes - 'ui-draggable-overlapping' for the object being dragged and 'ui-draggable-overlapped' for the other object. In 'block' mode objects are blocked from overlapping other objects by being snapped to the edge of the object they collided with.

This doesn't currently play well with constraints because they are applied before the drag event is propagated.

VersionDateLinksStatus
0.0.12009-Mar-26Recommended for 1.3.xThis is currently the recommended release for 1.3.x.

Column View

Last changed: 17 weeks 3 days ago

Transforms a nested unordered list of links (like a Drupal menu, for example) into a Mac OS X-like column view, without requiring changes to markup.

Generates disclosure triangles with Canvas automagically, no other support files required except: Requires Live Query plugin.

Tested with FF3, Safari 3/4, IE 6/7, Chrome.

Update: Now compatible with 1.3.x, without Live Query dependency.

See documentation or release notes for minified download links.

VersionDateLinksStatus
1.0.12009-Mar-03Recommended for 1.2.xThis is currently the recommended release for 1.2.x.
1.1.12009-Mar-03Recommended for 1.3.xThis is currently the recommended release for 1.3.x.

Component

Last changed: 4 days 23 hours ago

jquery-component 1
makes any widget a live component
license: public domain

usage:

var comp= $.component(
{   tag: 'x:bold'
,   factory: function( el ){
        var klass= arguments.callee
        if(!( this instanceof klass )) return new klass( el ) // use jquery-widget for reuse same code
        this.el= el
        el.style.fontWeight= 'bold'
        this.destroy= function(){ // optional, calls when element removes from DOM
            this.el.style.fontWeight= ''
            delete this.el, this.destroy
        }
        return this
    }
})

this code creates a component by [factory] for every [x:bold] element (you must define xmlns:x and mime-type must be equal text/html).
it works in any time (you may modify DOM by any methods). use [comp.freeze] and [comp.revive] methods for control that.

advanced usage:
var comp= $.component(
{ tag: 'select' // html tags allows, but not recommended

VersionDateLinksStatus
1.62009-Jun-29Recommended for 1.0.xThis is currently the recommended release for 1.0.x.

Confirm In Place

Last changed: 43 weeks 4 days ago

This plugin displays a confirmation message in place before doing an action. It does not require adding any extra code apart from a call to the plugin itself. One call to $(element).confirm() will do the magic. Also, this plugin doesn't require you to provide a callback function; it figures it out on its own.

For examples and docs please visit:
http://nadiana.com/jquery-confirm-plugin

VersionDateLinksStatus
1.02007-Sep-21Recommended for 1.0.xThis is currently the recommended release for 1.0.x.
1.22008-Sep-01Recommended for 1.2.xThis is currently the recommended release for 1.2.x.

Confirmer

Last changed: 1 year 49 weeks ago

Confirmer implements a novel approach to the process of confirming an action. Normally this is achieved via a yes/no dialog box or a button with a "confirm" checkbox next to it. The Confirmer plugin instead sets up a single button which changes to a "confirm the action" state if it is clicked one time. If the button is clicked again within a specified time then the action is confirmed, otherwise it times out and returns to its initial state.

VersionDateLinksStatus
2007.07.242007-Jul-24Recommended for 1.1.xThis is currently the recommended release for 1.1.x.

Conway's Game of Life

Last changed: 10 weeks 1 day ago

The jQuery Life Plugin allows you to easily insert a simulation of the Conway's Game of Life in your web.

VersionDateLinksStatus
1.0.12009-Apr-24Recommended for 1.3.xThis is currently the recommended release for 1.3.x.

Countdown!

Last changed: 8 weeks 8 hours ago

A countdown timer with:

* Control over which time components are shown.
* Built-in expanded or compact formats, or define your own layout.
* Ability to count up instead of down.
* Display of your own HTML description.
* Callbacks per tick and/or on expiry.
* Automatic display of a message or go to another page on expiry.
* Localised content.

VersionDateLinksStatus
1.1.02008-Feb-16Recommended for 1.0.xThis is currently the recommended release for 1.0.x.
1.5.22009-May-09Recommended for 1.2.xThis is currently the recommended release for 1.2.x.

Crayonbox Color Picker

Last changed: 19 weeks 2 days ago

Crayon box is a really simple color picker. The idea is to make it as simple as possible for the user, while leaving lots of options up to you. Create a textfield you will want to add a crayonbox to. Then select it using jQuery and call the crayonbox plugin. If you want to, you can overwrite the color selection with either color names (red, blue) or color hex codes (#FF0000, #0000FF). You can also specify a preselected color.

VersionDateLinksStatus
2.0.02009-Feb-18Recommended for 1.0.xThis is currently the recommended release for 1.0.x.
1.0.02009-Jan-21Recommended for 1.2.xThis is currently the recommended release for 1.2.x.

ctRotator

Last changed: 33 weeks 3 days ago

An highly customizable item/image rotating script. Supports creating the rotator from various data sources, such as JavaScript object, HTML UL/OL list, RSS feed, Flickr feed. More data sources can be supported with custom bridges.

Preview the plugin: http://test.thecodecentral.com/ajax-rotator/
Full documentation: http://thecodecentral.com/2008/11/12/ctrotator-a-flexible-itemimage-rota...

Call ctRotator with a data source on a selected element:

<ul id="container"></ul>

<script type="text/javascript">
$('#container').ctRotator(dataSource, {
  showCount:5,
  speed:1000
});
</script>

Format of the data source (can be from other sources):

var dataSource = [
{title: 'test', url: 'http://thecodecentral.com', tip: 'Programmer\'s blog for programmers'},
{title: 'test2', url: 'http://thankyouproject.org', tip: 'Fill the World with Thanks'},

VersionDateLinksStatus
0.9-rc-12008-Nov-12Recommended for 1.2.xThis is currently the recommended release for 1.2.x.

Currency

Last changed: 43 weeks 4 days ago

Currency: an unobstrusive automatic and real time currency conversion

This is a small tool that may prove to be usefull. It permits automatically converting any currency to any other currency on a website, with real time quotes. It is

implemented using an ajax PHP script backend (for cross-domain issue).

How to install:

Simply copy the currency-ajax.php file to the website (for example in the root folder), the jquery.currency.js and currency.css files. In addition, you can use the set

of icons provided in the package, or your own.

How it works:

Currency reads automatically traverses the DOM and processes every element tag with class currency. Each automatically converted currency value uses the

rel= tag for the options.

Here is an example:

VersionDateLinksStatus
1.0.0-02008-Sep-01Recommended for 1.2.xThis is currently the recommended release for 1.2.x.

Date Entry Fields

Last changed: 10 hours 37 min ago

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

* Can be driven via the keyboard or with the mouse.
* Accepts direct date entry via the keyboard.
* Allow various date formats including day and/or month names.
* Can restrict to a minimum and/or maximum date.
* Localisations available.

See also the date picker and time entry plugins.

VersionDateLinksStatus
1.0.22009-Jul-04Recommended for 1.3.xThis is currently the recommended release for 1.3.x.

Date Input

Last changed: 2 weeks 2 days ago

Date Input is a no frills date picker plugin for jQuery. It is:

  • Lightweight
  • Fast
  • Pretty by default
VersionDateLinksStatus
1.2.12009-Jun-17Recommended for 1.0.xThis is currently the recommended release for 1.0.x.

datePicker

Last changed: 1 year 36 weeks ago

The datePicker plugin is a popup calendar widget and then some. It allows you to add popup calendars to your forms to make it easier for users of your website to enter dates.

v2 of the date picker is a complete rewrite with the aim of being as extensible as possible. It is completely localisable and can be used in a myriad of different ways.

Please look through the selection of demos to see all the different ways the date picker can be used.

v2 is the recommended version of the plugin although v1 is still available for legacy support.

NOTE All support requests and bug reports should be made through the googlecode page for this plugin, not here. I will not monitor this page for support requests.

http://code.google.com/p/jquery-datepicker/issues/

VersionDateLinksStatus
1.02007-Jun-20Recommended for 1.0.xThis is currently the recommended release for 1.0.x.
2.0.0-Beta2007-Jun-20Recommended for 1.1.xThis is currently the recommended release for 1.1.x.
2.1.12007-Oct-25Recommended for 1.2.xThis is currently the recommended release for 1.2.x.

Delicious.com Feeds Displayer

Last changed: 16 weeks 2 days ago

Load a list of bookmarks, tags, network members, and/or fans from del.icio.us for a specific user using the del.icio.us JSON feeds (http://delicious.com/help/feeds/), and without need for any server-side component.

VersionDateLinksStatus
0.1.12009-Mar-11Recommended for 1.1.xThis is currently the recommended release for 1.1.x.

Draeli CheckImg

Last changed: 1 year 2 weeks ago

Fr : ImgChk est une extension permettant d'utiliser des images pour les checkbox.
En : ImgChk is an extension allow you to use image for checkbox.

Fr : Comment l'utiliser ?
La librairie JQuery 1.2 doit être présente :

<script type="text/javascript" src="jquery.js"></script>

L'extension doit ensuite être mise :

<script type="text/javascript" src="jquery.CheckImg.js"></script>

ou la version optimisé :
<script type="text/javascript" src="jquery.CheckImg.optimized.js"></script>

Enfin l'extension doit être activé :

$("input.CheckImg").CheckImg('CheckImg0.png', 'CheckImg1.png', 'path/');

Le path (chemin vers les fichiers) n'est pas obligatoire (et s'applique aux deux images si spécifié), de même que vous pouvez les spécifier au niveau des arguments si vous souhaitez utiliser des images présentes dans des répertoires différents.

VersionDateLinksStatus
1.2.02008-Jun-17Recommended for 1.0.xThis is currently the recommended release for 1.0.x.
1.0.02008-Apr-01Recommended for 1.2.xThis is currently the recommended release for 1.2.x.

Drop Down Panel script

Drop Down Panel adds a pull down panel to the top of your page that contains external content fetched via Ajax. Visitors click on the protruding button to cause the panel to drop down and reveal its content. Clicking anywhere on the panel again closes it. You can easily customize the height of the Panel, button text (ie: "panel content"), and drop down speed in milliseconds. A plug and play Ajax drop down panel!

VersionDateLinksStatus
1.02008-Apr-03Recommended for 1.2.xThis is currently the recommended release for 1.2.x.

Drop-down Combo Box

Last changed: 39 weeks 9 hours ago

A drop-down combo box, or a select box into which you can type text to narrow down the visible result set. This code is a compilation of the JQuery Autocomplete plugin as well as other JQuery plugins, and is still in the alpha stage of development.

VersionDateLinksStatus
1.0.0-alpha-12008-Oct-04Recommended for 1.0.xThis is currently the recommended release for 1.0.x.

Droplist Filter

Last changed: 18 weeks 5 days ago

This adds a small Javascript search widget to any dropdown list. The widget allows you to filter a long (or short) list to a handful of items based on a searched word. When you click on the widget, the list is replaced by a textbox. Type in a few letters and click again, and the list will immediately re-appear and be filtered down to only items that match the search.

$('select').droplistFilter();

The user interface is simple and self-explaining. Four sample color schemes are provided, but customized skins may easily be used instead by supplying your own CSS and/or images.

VersionDateLinksStatus
0.12009-Feb-22Recommended for 1.2.xThis is currently the recommended release for 1.2.x.

dynDateTime: calendar date and time picker

Last changed: 29 weeks 5 hours ago

This jQuery plugin makes it easy to add progressive enhancement to your forms. Add date and time selection to single textfield inputs.

jQuery("input.dateField").dynDateTime();

This example will make all input elements tagged with the 'dateField' class. There are plenty of options for configuration; see details in documentation.

jQuery has lots of date pickers, but no date time pickers. This supports date and time, and renders the value to a single field in a configurable format.

VersionDateLinksStatus
0.22008-Dec-13Recommended for 1.0.xThis is currently the recommended release for 1.0.x.
0.12008-Nov-24Recommended for 1.2.xThis is currently the recommended release for 1.2.x.

Easy Color Picker

Last changed: 48 weeks 4 days ago

A Simple Colorpicker for JQuery

  • Color picker is intuitive to use
  • It's easy to integrate into your project

This is the color picker used in FormSmarts Form Builder. It is based on an earlier color picker plugin, integrating changes to fix a bug and allow the checkmark's color to be either back or white, depending on the color selected (see demo.)

VersionDateLinksStatus
1.02008-Jul-28Recommended for 1.0.xThis is currently the recommended release for 1.0.x.

Easy Widgets

Last changed: 16 weeks 5 days ago

After I read How to Mimic the iGoogle Interface tutorial, I think that is a very simple way to use Widgets in one of my projects: Gesbit, you can see here a demo. I study the tutorial code and want to put into a jQuery plugin. After some work I finally use this plugin in Gesbit and think that maybe can be useful for other developers.

The plugin as been tested in last version of Firefox, Opera, Internet Explorer, Safari, Konqueror and Chrome browsers. Please try the examples for more details.

VersionDateLinksStatus
2.0.52009-Mar-08Recommended for 1.3.xThis is currently the recommended release for 1.3.x.

Edit-In-Place

Last changed: 3 weeks 4 days ago

Switches an element to a text input box, then when you're done typing and hit enter/tab, it calls a callback. Simple and sweet. Use this especially when you need user input simply to edit a value in your javascript back-end or change a hidden field value.

$('#editable-thing').click(function(){
    $(this).edit_in_place(function(editable_thing, value){
        alert("You typed "+value);
    });
});

VersionDateLinksStatus
1.0.02009-Jun-08Recommended for 1.0.xThis is currently the recommended release for 1.0.x.

Expandable Widget

Last changed: 16 weeks 17 hours ago

Create an expandable widget from a simple div. Allows for elegant content grouping/hiding and is stylable with jQuery UI themes. Lots of options:

  • customize tooltip
  • open, close callbacks
  • can set title programmatically or in template
  • use icons from jQuery UI (1.6rc4+)
  • customize animation
  • can start open or closed
  • set extra icon on the right (.ui-expandable-extraIcon)

Usage

HTML

<div id="content">
    [content]
</div>

JS

$("#content").expandable();

or set a title like this:

<div id="content">
    <div class="ui-expandable-title">Title</div>
</div>

$("#content").expandable("open");
$("#content").expandable("open", { duration: 0 }); /* one time animation options */
$("#content").expandable("close");
$("#content").expandable("destroy");

Options


{
startopen: false,

VersionDateLinksStatus
0.42009-Mar-13Recommended for 1.2.xThis is currently the recommended release for 1.2.x.

FancyTip

Last changed: 21 weeks 4 days ago

An easy-to-use plugin allowing for nice-looking tooltips to be associated with any element selectable via jQuery, with a good degree of configuration available.

Uses only CSS markup, not tables, for layout. Designed to have good performance and be compatible across the major modern browsers (IE 6+, Firefox 2+, Opera 9+, Safari 3+).

VersionDateLinksStatus
1.2.02009-Feb-02Recommended for 1.2.xThis is currently the recommended release for 1.2.x.

Faviconize

A jQuery plugin for displaying a favicon on an external link.

VersionDateLinksStatus
1.0.02008-Mar-07Recommended for 1.0.xThis is currently the recommended release for 1.0.x.
1234next ›last »