Plugins
Home

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.

Range


jQuery spinbox form element

Submitted by george.adamson@... on October 25, 2009 - 9:31am

Converts a textbox into a spinner control without adding any mark-up to the page. Provides a handy ui field for selecting numeric input.
(The appearance of the up/down buttons is provided by a background image sprite)

$("INPUT.spinbox").spinbox();
$("INPUT.spinbox").spinbox({
  min: 0,    // Set lower limit or null for no limit.
  max: 100,  // Set upper limit or null for no limit.
  step: 0.5, // Set increment size.
});

The spinbox() method accepts a hash of options such as min and/or max to limit the spinner value and step to specify the size of the increments. Accepts keyboard control via up and down keys as well as mouse wheel (in addition to typing into the text box as normal). Specify bigStep option to apply larger increments when page up or page down is pressed or when the Shift button is held down

Caret Range

Submitted by mzabriskie on September 10, 2009 - 2:57am

Easily get or set the selection range of the caret in an INPUT or TEXTAREA element.

USAGE

var input = $("#selector");
var range = input.caret();
var text = null;

// Get selected text
text = input.val().substr(range.start, range.end - 1);

// Insert text at caret then restore caret
var value = input.val();
text = " New Text ";
input.val(value.substr(0, range.start) + text + value.substr(range.end, value.length));
input.caret(range.start + text.length);

// Select first ten characters of text
input.caret(0, 10);

SnakeCharmer Selection Plugin

Submitted by ptr on June 19, 2009 - 5:38pm

About SnakeCharmer

SnakeCharmer is a small and simple plugin for jQuery. It helps you to make logical connected selections of HTML elements. Think of a bunch of options (maybe generated out of some datasets) from which a range of multiple ones (or even a single one) can be selected. A typical example would be a calendar where the user should select some days for his summer leave days. Or, you have a seat plan where a client should select the seats he want to reserve for the weekly sneak peak in the local cinema. Beside that, with SnakeCharmer you easily can restrict the available seats according to the latest booking stand by specifying the initial jQuery selector string to not include elements that use a certain class name (which in turn may be used to visually format already reserved seats). Pragmatic, isn't it? :-)

wrapSelection

Submitted by finding_zion on July 23, 2008 - 7:42pm

Overview

wrapSelection wraps highlighted text with valid XHTML span tags and returns as a jQuery object for chaining additional commands.

Originally designed to allow end users to select text (highlight text with their mouse) and change the background style. Unlike other solutions that apply to the whole element, this creates XHTML compliant span tags around the selection area.

Features

  • Cross Browser Selections (tested in IE, Firefox, Opera, Safari)
  • Create function getRangeAt() to return custom range object
  • Create a custom class to identify selections
  • Ability to restrict selectable area to a tag (single element)
  • jQuery plugin with limited chaining ability
  • Must create XHTML compliant code
  • Snaps to begining and end or word if selected in the middle of the word

Visit demonstration sitefor a practical example of this plugin.