jquery - 使用 HR 标签调整文本区域的大小

Question

我正在尝试创建一个可调整大小的文本区域，并将水平线作为句柄(类似于 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重现了这个问题。

Answer 1

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

可能是 jsFiddle 的错误。

更新后的 jsFiddle:updated

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

这没有用。 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

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

• 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

它按预期工作。