About

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

• enables in place editing
• enables easy switching of elements between editmode and previewmode
• makes forms visually subtler and less obtrusive

Project Home

project homepage and resources

Why

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

• Is called on form elements so it does not break if javascript is disabled
• Conforms to the hijax design pattern
• Provides events for your ajax callbacks but...
• Decouples the actual ajax callback (mainly because i didn't want to rewrite my ajax calls for legacy systems)

Why the different approach?

• I already have many legacy forms and inline inputs I'd like to retrofit this to
• The web framework i'm currently using (django) is awesome at generating forms from ORM objects, so inputs are a more natural starting point for me
• i don't want to rewrite my ajax calls or server side data handling
• I want my forms to automatically degrade gracefully without js, ie the 'hijax' design pattern; inputs minus js still leaves usable inputs

API

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

• options
• events
• methods
• custom inputs

Source

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

Recent Updates

• new option: stickyFocus - delays switching for focused elements until blur
• new 'i' selector... focus, blur and change events only work on form elements. Therefore, for these events to work on custom inputs that have wrapper divs, this selects the inner input variable retrieved by a type.input function (see custom input jsfiddle at the bottom for more info)

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:

Options

• copyCss: determines whether to copy the input width, height, display and float to the preview element
• eventsEnabled: allows you to enable and disable automatic mode switching based on events
• stickyFocus (new): delays switching for focused elements until blur
• defaultText (new): text to display if no value is entered
• events:
  • edit: event method for switching to edit mode e.g. mouseenter, click etc.
  • preview: event method for switching to preview mode e.g. mouseenter, click etc.
  • delayedit: after the event has fired provide a delay before switching to edit mode: 1000 is 1 second
  • canceledit: if this is triggered during the delay, the switch to edit mode will be cancelled
  • delaypreview: after the event has fired provide a delay before switching to preview mode: 1000 is 1 second
  • cancelpreview: if this is triggered during the delay, the switch to preview mode will be cancelled
• listeners: (pass e for edit element, p for preview element, i for the form element (if custom types are being used) or a standard jquery selector)
  • edit:selects element that listens for when to trigger edit mode (default='p')
  • preview:selects element that listens for when to trigger preview mode (default='e')
  • canceledit:selects element that listens for when to cancel switch to edit mode (default='p')
  • cancelpreview:selects element that listens for when to cancel switch to preview mode (default='e')
• types:an array of custom input types to enable same functionality for custom inputs

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)

• onedit:fired on switch to edit mode
• onpreview:fired on switch to preview mode
• oncanceledit:fired on cancelling of switch to edit mode
• oncancelpreview:fired on cancelling of switch to edit mode

Methods

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

• edit:switches to edit mode
• preview:switches to preview mode
• toggle:toggles between modes
• previewEl:returns preview element
• enableEvents:binds events to listener elements
• disableEvents:clears events
• destroy:removes the widget functionality and cleans up after itself

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: