An even newer version of inlineEdit is out! Check out inlineEdit3, with plenty of awesome examples such as save after edit functionality.

Inline Editing

This is an example of the light-weight, flexible inline editing plugin for mootools.
Abilities

* Make A Page completely editable and add an onSave function to save the page.
* Look Cool.
* Conserve Space.

Steps

1.

var inlineEditor = new inlineEdit('editarea', {indicatorText: 'edit this'});

2. Enjoy inline editing on all text elements inside ‘editarea’

Alt Steps

1.

var inlineEditor = new inlineEdit('editable', {indicatorText: 'edit this'});

2. Enjoy inline editing on all elements with the class name ‘editable’

Options

onStart Add additon affects to what happens when you start editing (like changing text color)

onChange Add additon affects to what happens when you finish editing (like changing text color)

observingAction The Action required to begin editing an element. (defaults to ‘click’)

editingClass The Class applied to the input/textarea element. (defaults to ‘editLine’)

showIndicator if set to true a tooltip will show that the element is editable.

indicatorClass the prefix for your tooltip class name. (defaults to ‘editIndicator’)
the whole tooltip will have as classname: editIndicator-tip

indicatorText the text to be displayed in the edit indicator. (defaults to ‘editable’)
Example

(start code)

<div id="editarea">

 <h1>I am Justin</h1>

 <p>Hello World</p>

</div>

<script>

 var inlineEditor = new inlineEdit('editarea',{indicatorText: 'edit this'}); //Makes text inside 'editarea' inline editable

 inlineEditor.deactivate(); //Deactivates the ability to edit the text

 inlineEditor.toggle(); //Toggles the ability to edit the text (in this situation it would turn it back on since we just turned it off)

</script>

(end)

Properties

deactivate Disables inline editing.

toggle Toggles Editablity on and off.

Demo: http://dev.justinmaier.com/inlineEdit/

Download: inlineEdit.js | inlineEdit.compressed.js | mootools.dependancies.js

Source: http://dev.justinmaier.com/inlineEdit/

Related Listings:

1. Another InlineEdit.js 3 I light to keep my plugins light and flexible, so...
2. Ajax Inline Quick Edit in Place Ajax Inline Edit in Place Script is a fast forward...
3. Tab Inline Editable Elements I have been spending a lot of time at work...
4. Ajax Instant Inline Text Edit Ajax Instant Edit Text User can edit the inline text...
5. editRegions – Edit in Place Script Resize the edit interface using the gray square. Move the...

Do you like this post?

Email: