jQuery插件editable

 

将选定的元素变为“可编辑”：

即，当用户点击该元素时，显示一个编辑框，编辑框失去焦点（或其他特定事件）时，将编辑框的内容回存到该元素。

该元素可能是div，span，td等。

 

(function ($) {

    $.joytech._editable = {

        _editor: null,
        _richeditor: null,
        _currenteditor: null,
        _holder: null,

        _blur: function (event) {
            var pthis = $.joytech._editable;
            if (pthis._holder) {
                var e = $(pthis._holder);
                switch (e.attr("joytech_editable_type")) {
                    case 'text': e.text(pthis._currenteditor.value); break;
                    case 'html': e.html(pthis._currenteditor.value); break;
                    case 'value': e.val(pthis._currenteditor.value); break;
                }
                pthis._holder = null;

                $(pthis._currenteditor).hide();
            }
            return false;
        },

        _click: function (event) {
            var pthis = $.joytech._editable;
            if (pthis._editor == null) {
                $(document.body).append("<input type='text' style='position:absolute;' id='joytech__editable__editor'/>");
                pthis._editor = $('#joytech__editable__editor')[0];
                $(pthis._editor).blur($.joytech._editable._blur).hide();
            }
            if (pthis._richeditor == null) {
                $(document.body).append("<textarea style='position:absolute;' id='joytech__editable__richeditor'/>");
                pthis._richeditor = $('#joytech__editable__richeditor')[0];
                $(pthis._richeditor).blur($.joytech._editable._blur).hide();
            }
            pthis._holder = event.target;
            var e = $(event.target);

            var bricheditor = (e.attr("joytech_editable_type")) == 'html' && (e.attr("joytech_editable_usingricheditor")=='true');
            if (bricheditor) pthis._currenteditor = pthis._richeditor;
            else pthis._currenteditor = pthis._editor;

            var i = $(pthis._currenteditor);

            var value = '';
            switch (e.attr("joytech_editable_type")) {
                case 'text': value = e.text(); break;
                case 'html': value = e.html(); break;
                case 'value': value = e.val(); break;
            }

            if (bricheditor) i.val(value);
            else i.val(value);

            var o = e.offset();
            i.css({
                left: o.left,
                top: o.top,
                width: e.width(),
                height: e.height()
            }).show().focus();
            return false;
        }

    };

    $.fn.editableHTML = function (usingricheditor) {
        this.attr("joytech_editable_type", "html");
        this.attr("joytech_editable_usingricheditor", usingricheditor);
        this.click($.joytech._editable._click);
        return $;
    };

    $.fn.editableText = function () {
        this.attr("joytech_editable_type", "text");
        this.click($.joytech._editable._click);
        return $;
    };

    $.fn.editableValue = function () {
        this.attr("joytech_editable_type", "value");
        this.click($.joytech._editable._click);
        return $;
    };

})(jQuery);

示例：

    $(document).ready(function () {
        $("#editableText td").editableText();
        $('#editableHTML td').editableHTML(false);
        $('#editableHTML_Div').editableHTML(true);
    });

功能还有待完善

 

下载：

http://download.youkuaiyun.com/detail/tiewen/4297662