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.

<

>

<

>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.

<>$("#divContent").editable("cleanup");<>

<

>Example<

> <>$("#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 }); <>