jQuery.edit

jQuery plugin to show how to implement an inline editing functionality.

by cesar iduarte

HTML

<ul>
    <li class="jedit">Click to edit me</li>
    <li class="jedit">Click to edit me</li>
</ul>
<p>Hola amigo</p>

JavaScript

/**
 * edit - A jQuery plugin for showing how to implement 
 * a basic inline editting.
 *
 * (c) Copyright Cesar Iduarte
 * http://www.guirrina.com
 * http://www.twitter.com/ciduarte
 *      
 * Todo:
 *     - Show in span the changed value.
 *     - Listen to kestrokes in text field and add some behaviours.
 */
;(function ($) {
    $.fn.edit = function (options) {

        return this.each(function() {
            
            var $element = $(this);
            var value    = $element.text(); 
            var span     = '<span style="display:none;"></span>';
            var input    = '<input type="text" style="display:none;" />';
            
            $element.html('').append(span).append(input);
            $element.children().first().html(value).   
            on('click',function(){
                $(this).hide().next().show().select();
            }).show().next().val(value).
            on('blur',function(){
                $(this).hide().prev().show();
            });
        });
    };
})(jQuery);

$('li,p').jedit();