使用HR标签调整文本框的大小

Question

使用HR标签调整文本框的大小

4

我正在尝试创建一个可调整大小的文本区域，并使用水平线作为手柄（类似于Stackoverflow编辑器）。

我正在尝试使用以下内容：

<div class="container">
    <textarea class='editor'></textarea>
</div>

和

(function ($) {
    $(function () {
        $(".editor")
            .wrap("<div class='resizable'></div>'")
            .parent()
            .append("<hr class='resizer ui-resizable-s'/>");    

        $(".resizable").resizable({
            handles: {
                s: $(".resizer").get()
            }
        });
    });
})(jQuery);

但是这并不起作用。实际上什么都没有发生。

如何解决这个问题？

顺便提一下，有一个JSfiddle可以重现这个问题。

- Steve B

问题在这里得到诊断和解决：https://dev59.com/QHNA5IYBdhLWcg3wcddk?rq=1 - Ben Rondeau

谢谢@BenRondeau，但正如您可以在我的答案中看到的那样，这是一个jsFiddle问题...而不是jQuery（您提供的链接非常接近我所写的内容）。 - Steve B

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Steve B · Accepted Answer

好的，实际上我的代码是有效的，如果我手动注入jQuery和jQueryUI。

可能是jsFiddle的一个错误。

更新后的jsFiddle: updated

更准确地说，我的第一次尝试是使用jsfiddle添加jQuery和jQuery UI：

enter image description here

这并没有起作用。Chrome控制台显示：

Uncaught TypeError: Cannot read property 'safari' of undefined$.widget._mouseDown @ jquery-ui.js:648(anonymous function) @ jquery-ui.js:582jQuery.event.dispatch @ jquery-compat-git.js:4894jQuery.event.add.elemData.handle @ jquery-compat-git.js:4551 67jquery-ui.js:656

Uncaught TypeError: Cannot read property 'msie' of undefined

但如果我手动包含这些资源：

enter image description here

http://code.jquery.com/ui/1.11.4/themes/redmond/jquery-ui.css
http://code.jquery.com/jquery-2.1.3.min.js
http://code.jquery.com/ui/1.11.4/jquery-ui.min.js

它按预期工作。