Plugins

The plugins site is currently in development.

We've been looking to provide a higher-quality, spam-free experience at the plugins site for some time, and a major error on our part forced us to shut down the current site before we could put the new one in place. We are developing a new site, and you can follow along with its development on GitHub. For more information about this transition, including steps you can take as a plugin author to prepare, please read our post about what's going on.

form field


Inline Field Label

This plugin allows to input a default text label inside an input text element or a text area.

Very common on search boxes, login forms or any other short forms.

Features

  1. When the field gets focus the label disappears.
  2. When the user submits the form the label is discarded.
  3. If the user didn't insert any value after focusing the field - the label returns on blur.
  4. Supports password input fields.
  5. Supports metadata jquery plugin.
  6. Supports default out of the box variable set up.

Examples

Suppose we have this form:

<form  method="post" accept-charset="UTF-8" action="#">
<input type="text" class="form-text" value="" size="15" id="edit-search" maxlength="128">
</div>
<input type="submit" class="form-submit" value="Search" id="edit-submit-1" name="op">
</form>

You can use this script to add the label search inside the form:

relCopy

relCopy, short for rel copy, is a jQuery plugin that copies any DOM element, and its children, targeted by an action link's rel tag. It is typically used in forms to copy the file upload fields for multiple file uploads. It can also be customized for any purpose that requires multiple copies of fields with limits and other features. Read the how-to for more info.

Field Watermark

Used to set the field default value to show or hide depending on whether the field has focus or not and whether the field has content other than the default.

Maxlength Field

Displays number of characters remaining / additional to a number

jQuery FormGroup

"jQuery FormGroup" is the simple and compact plugin for customize checkboxes/radio elements from CSS.

The cheked elements have ".checked" and unchecked have ".unchecked" CSS class property.

Tested on browsers:

  • Safari3/4
  • Firefox2/3
  • Opera9
  • MSIE6/7/8
  • Flock2.0.3
  • SeaMonkey1.1.15

asmSelect - Alternative Select Multiple

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/

Form Example Plugin

Populate form fields with example text that disappears on focus.