Question

我正在尝试将Jeditable与jQuery UI重新组合。我非常接近，除了看起来Jeditable通过可调整大小的功能做了一些有趣的事情。

以下代码的问题是调用可调整大小的destroy函数时出现错误（见下文）。我检查过，班级还在那里。起初我没有包括可调整大小的破坏，但是在没有破坏它并重新初始化它之后，在第一次编辑（或取消）后，调整大小不再起作用。由于错误，取消不再有效（即，它保留编辑）。

Error: cannot call methods on resizable prior to initialization; attempted to call method 'destroy'

JSFiddle - ＆gt; http://jsfiddle.net/y8Ayd/

HTML

<div class="box">Hello</div>

CSS

.box {
  background-color: #ccf;
  height: 150px;
  width: 150px;
}

JS

$('.box').resizable();

$('.box').editable(
function (value, settings) {
    return (value);
}, 
{
    cancel: 'x',
    callback: function (value, settings) {
        $(this).resizable('destroy');
        $(this).resizable();
    },
    data: function (value, settings) {
        return value.replace('<div class="ui-resizable-handle ui-resizable-e" style="z-index: 1000;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 1000;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1000;"></div>', '');
    },
    event: 'dblclick',
    onreset: function (settings, original) {
        $(this).resizable('destroy');
        $(this).resizable();
    },
    submit: 'ok'
});

Answer 1

错误消息中的内容正是如此：您正在尝试在初始化可调整大小之前调用resizable（）或resizable（'destroy'）。

然而，你想要做的是因为（jquery.jeditable.js）在ui-resizable-handle ui-resizable-e等内容中的可编辑位置你已经意识到这一点，因为你试图通过value.replace（'去掉Value中的那个废话。

可能的做法是在可编辑的地方附上一个div，然后将resizable附加到那个。

我为你准备了一个小样本：

或JSFiddle：http://jsfiddle.net/U4LUe/20/

HTML：

<div id="EditBox1" class="editbox">Enter some Text...</div><br/>

<div id="EditBox2" class="editbox">Enter some Text in an Area...</div>

CSS：

    .editboxwrapper {
      background-color: #ccf;
      width: 650px;
      min-height: 50px;
      padding: 0px;
      overflow: hidden;
    }
    .editbox {
      width: 100%;
      margin: 0px 10px 0px 0px;
    }

JQuery的：

$(function () {
    //on $(document).ready(function () {...});
    ResizableEditbox({
        selector: 'EditBox1',
        wrapperClassName: 'editboxwrapper' //the class of the wrapper (for css-style)
    });
    ResizableEditbox({
        selector: 'EditBox2',
        wrapperClassName: 'editboxwrapper' //the class of the wrapper (for css-style)
    });
});
function ResizableEditbox(args) {
    var me = this;
    this.args = args;
    this.wrapperName = args.selector + 'Wrapper';

    $('#' + args.selector).editable(
        function (value, settings) { //This fakes a real call to the server!
          return (value);
        }, {
        type: 'textarea',
        tooltip: 'Click to edit...',
        cancel: 'x',
        id: this,
        callback: function (value, settings) {
            me.InitResizable(me.wrapperName);
        },
        data: function (value, settings) {
            me.RemoveResizable(me.wrapperName);
            var retval = value;
            return retval;
        },
        event: 'click',
        onreset: function (settings, original) {
            //var class = $(this).className;
            me.InitResizable(me.wrapperName);
        },
        submit: 'ok',
        onsubmit: function (settings, td) {
            var value = td.textContent;
            if (value == "") {
                alert('Please enter a value');
                return false;
            }
            else {
                return true;
            }
        }
    });
    this.CreateWrapper = function () {
        //create a div$('#' + args.selector).wrap("<div id='" + my.wrapperName + "' class='"     +     my.args.wrapperClassName + "'></div>");
        var wrapperDiv = $(document.createElement("div"));
        wrapperDiv.addClass(me.args.wrapperClassName);
        wrapperDiv[0].setAttribute("id", me.wrapperName);
        $('#' + args.selector).wrap(wrapperDiv[0].outerHTML); 
    };

    this.InitResizable = function(wrapperSelector) {
        var element = $('#' + wrapperSelector);
        if (element.length > 0) {
            if (!element.hasClass('ui-resizable-handle')) {
                element.resizable({
                    //Initialise
                });
            }
        }
    };
    this.RemoveResizable = function(wrapperSelector) {
        var element = $('#' + wrapperSelector);
        if (element.length > 0) {
            if (!element.hasClass('ui-resizable-handle')) {
                element.resizable('destroy');
            }
        }
    };
    me.CreateWrapper();
    me.InitResizable(me.wrapperName);
}

如何组合Jeditable和jQueryUI可调整大小？

1 个答案: