About

A simple plugin for switching inputs between editable and preview modes for inline ( in-place ) editing and forms.

Project Home

project homepage and resources

Why

Inspired by the great jeditable, here are the key differences:

Why the different approach?

API

The plugin api consists of the following (click links to skip to api section):

Source

jquery.toggleEdit.js
jquery.toggleEdit.min.js
toggleEdit.css

Recent Updates

Dependencies

JQuery and JQuery UI (built using the JQuery UI widget factory)

Demos

These demos are interactive. Click the demo buttons to trigger each demo and hover and then click the elements accordingly:

default usage:

Lorem ipsum dolor, { } elit. In hac { } velit. Quisque tristique, { } ante, a imperdiet tellus mauris sed.

custom event methods:

Lorem ipsum dolor, { } elit. In hac { } velit. Quisque tristique, { } ante, a imperdiet tellus mauris sed.

parent listener:

Lorem ipsum dolor, { } elit. In hac { } velit. Quisque tristique, { } ante, a imperdiet tellus mauris sed .......(click anywhere in the black area)

events:

Lorem ipsum dolor, { } elit. In hac { } velit. Quisque tristique, { } ante, a imperdiet tellus mauris sed.

design?

Options

Events

these are passed two parameters, the event object and a ui object consisting of the preview element (ui.preview), the input element (ui.element) and the textual representation of the value (ui.text)

Methods

These are called as follows: el.toggleEdit(methodName,param1,param2...)

Custom Inputs

A custom input requires three functions, one to test an element and return true if that element is an instance of the custom input ('is'), another to parse the value from the custom input ('text'), and another to retrieve the inner input element if there is one (for blur and focus events). For example: