InPlaceEditor 1.2.1



Details

Author
Thierry Bela
Current version
1.2.1
GitHub
tbela99/InPlaceEditor
Downloads
3785
Category
Interface
Tags
Report
GitHub Issues

Releases


Dependencies

  • _self_/_current_: InPlaceEditor
  • core/1.3.1:
    • Class.Extras
    • Element.Event
    • Element.Style
    • Element.Dimensions
    • Fx.Tween
    • Array
  • more/1.3.1: Element.Delegation

How to use

you could create an instance this way:

Javascript:

//make every div that is a form child node editable
var inplace = new InPlaceEditor($$('form > div'), {

                        properties: {

                            rows: 3,
                            cols: 18
                        },
                        onChange: function (div, value, oldValue) {

                            //do something
                        }
                    });

or this way, you can attach elements later

Javascript:

//make every div that is a form child node editable
var inplace = new InPlaceEditor({

                        properties: {

                            rows: 3,
                            cols: 18
                        },
                        onChange: function (div, value, oldValue) {

                            //do something
                        }
                    });

inplace.attach('form > div');

Inplaceeditor Options

  • wrapper - (string, optional) HTML tag for the editor wrapper. default to span
  • buttons - (boolean, optional) display save and cancel buttons. default to true. if set to false, input is saved on blur or cancelled if the validation fails or the user press esc
  • property - (string, optional) element property to edit. possible values are text and html. default to text
  • element - (string, optional) editor HTML tag. possible values as input, textarea. default to textarea
  • toColor - (string, optional) when the mouse enter the element, change its background color to this value
  • fColor - (string, optional) when the mouse leave the element, change its background color to this value
  • newLine - (boolean, optional) insert a new line between the editor and cancel/save buttons
  • properties - (object, optional) editor properties. for example for textarea, you may want to set the number of rows, cols, etc.
  • validate - (function, optional) function that validates user input, return true if the input is valid.
  • className - (string, optional) class name for the editor wrapper. default to inplace-edit.
  • cancelMsg - (string, optional) value of the cancel button. default to cancel
  • OKMsg - (string, optional) value of the OK button. default to SAVE

Inplaceeditor Events

onChange

fire when the element content has been edited.

Arguments:

  • element - (element) the element that has been edited
  • value - (string) the new element content
  • oldValue - (string) the previous element content

Element Method Attach

attach InPlaceEditor behaviors to elements

Returns:

  • this InPlaceEditor instance

Arguments:

elements - (mixed) elements.


Element Method Detach

remove InPlaceEditor behaviors from elements

Returns:

  • this InPlaceEditor instance

Arguments:

elements - (mixed) elements.


Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.

blog comments powered by Disqus