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.

values


Increment - jQuery Plugin for numeric inputs

Submitted by Sean O on March 4, 2010 - 2:13pm

The Increment plugin allows for efficient keyboard-based value manipulation using the arrow keys, with Shift/Ctrl/Cmd modifiers for larger/smaller changes, and optional graphic UI hints.

Block Manager

Submitted by wdsn on August 30, 2009 - 1:32am

Add and delete form fields with buttons add and delete
usage:

    <script src="./js/jquery-1.3.2.min.js"></script>
    <script src="./js/jquery.tmpl.js"></script>
    <script src="./js/jquery.blockmanager.js"></script>
<script language="JavaScript">
$(document).ready(function() {

    $blockEdu = $('#tableBottomRowEdu').blockmanager({
        names: {
            name: "text",
            specialnost: "select"
        },
        fieldsName: "user[edu]",
        templateItem: "#templateItemEdu",
        templatePrefix: "eduTr",
        itemId: "user_id",
        buttonAddId: "eduAdd"
    });

    // add empty fields
    $blockEdu.addItem("", {});

    // add block with values
    $blockEdu.addItem('2', {
        name: "Jhon Connor",
        specialnost: "2"
    });
});
</script>

JSON-REST

Submitted by nbubna on June 23, 2009 - 5:48pm

This plugin is an effort to combine jQuery simplicity with some JSON-REST principles and add some nice convenience features (all in 2.6K minimized)

Here's the basic ideas:

  • Maps CRUD calls ($.Create, $.Read, $.Update and $.Delete) to http methods (POST, GET, PUT and DELETE) via jQuery.ajax() calls.
  • Defaults everything to JSON dataType (works best with JSON utils present, in which case it will process the data into json instead of a query string for calls to Create and Update).
  • Tries to move data into the provided URL, such that $.Read("/{b}/{a}", { a:'foo', b:'bar', c:3 }) ultimately becomes a GET to "/bar/foo?c=3".
  • Allows you to pass in the usual success (and error) callback, but also "before", "after" and error status-code callbacks.

XClone

Submitted by nbubna on April 25, 2009 - 1:05am

This plugin depends upon the Values plugin to provide an enhanced clone method.
This "xclone" method will store the element it is called on as a template
of sorts, and then create sibling clones that have the specified values
automatically set and are also automatically inserted below (or, optionally,
above) where the original prototype was located. In essence, this enhances
the template-ish abilities of the Values plugin in a fashion similar to what
the jsRepeater plugin does, but with only standard XML/HTML syntax.

This is particulary useful for AJAX applications, allowing the initial document
to contain just an "empty" element set that serves as a location marker and template for clones which are filled with model data loaded/generated on the client side.

The demo (and its source) are probably the best documentation thus far.

Sync

Submitted by nbubna on March 31, 2009 - 10:56am

This plugin uses the Values plugin to keep the values of various page parts synchronized. If, for instance, you have a set of form fields and a preview below it, Sync can keep the preview actively updated with the form values by simply doing:

$('#preview').syncFrom('#myForm');

This assumes that the various preview fields have "name" attributes that match up to those of the form. Of course, being familiar with the Values plugin is rather important here.

There is also a syncTo method (e.g. you'd want $('#myForm').syncTo('#preview') above) and a $('#a').sync('#b') method which does bidirectional sync'ing between the two selections.

Examine the source to see the various configuration options. It's all fairly modular and straightforward.

Values

Submitted by nbubna on June 21, 2008 - 10:18am

Makes it trivial to get/set values for any DOM element(s) very intelligently and extensibly. Simply add "name" attribute(s) (as you do for form elements) to the elements whose values you wish to retrieve or set and call values() on a selection to retrieve those keys/values in a handy little hash object.

To get all values:
var values = $('form').values();
To set values:
$('#demo').values({ foo: 'bar', answer: 42 });
To get one value:
var foo = $('.bar').values('foo');
To set one value:
$('.bar').values('foo', 'bar');

Another way to think of this is as using your markup as a bi-directional template that needs no extra syntax. Rather than replacing special placeholders, it uses element attributes to identify where values should be set or retrieved. This allows the data binding to work in both directions and does not require separate template files, you can work directly on your markup.