editable jQuery Plugin

This plug-in makes any DOM element editable as a textbox with a save button beneath it. A saveHandler can be specified that is fired when the Save button is clicked. You can press ESC while in the editable area to abort editing without firing the SaveHandler.


>jQuery.fn.editable = function(options)<



> The options parameter can be a map of any of these properties (default values are shown):

<> var def = { editClass: null, saveText: "Save", editMode: "text", // html saveHandler: null, value: null };<>

<>editClass<> The CSS class for the edited element. Optional. If not specified an Azure background is used.

<>saveText<> The text of the save button. "Save" by default. The Save button also assigns an implicit class="editableButton" to allow you to override styling of the button.

<>editMode<> Determines whether the text is read and written as plain text, or as HTML. HTML offers the ability for formatting that isn't stripped.

<>saveHandler<> Event handler when the Save button is clicked.

<>value<> The initial value that is to be edited. By default this will be the content (text or html) of the element edited but when value is specified it's overridden.

<>Named Parameter: cleanup<> This named parameter option cleans up an editbox and save button and redisplays the original content. This is equivalent to pressing the ESC key and aborting the edited content.




> <>$("#divMessage").editable( saveText: "Update Comment", editClass: "contenteditable", // css class for edited text saveHandler: function(e) { // this is content element edited alert( $(this).html() ); // or use .text() return true; // true to stop editing, false to keep editing }); <>

Class Members

See also:

Class contentEditable

© West Wind Technologies, 1996-2024 • Updated: 12/19/15
Comment or report problem with topic