【问题标题】:Use an HR tag to resize a textarea使用 HR 标签调整文本区域的大小
【发布时间】:2015-04-17 12:39:26
【问题描述】:

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

【问题讨论】:

  • 问题在这里诊断和解决:stackoverflow.com/questions/958419/…
  • 感谢@BenRondeau,但正如您在我自己的回答中看到的那样,这是一个 jsFiddle 问题......不是 jQuery(您提供的链接与我写的非常接近)

标签: jquery html css jquery-ui jsfiddle


【解决方案1】:

好的,如果我手动注入 jQuery 和 jQueryUI,我的代码实际上是可以工作的。

可能是 jsFiddle 的一个错误。

更新后的 jsFiddle:updated

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

这不起作用。 chrome 控制台显示:

未捕获的类型错误:无法读取 undefined$.widget._mouseDown @ jquery-ui.js:648(匿名函数)@ jquery-ui.js:582jQuery.event.dispatch @ jquery-compat-git 的属性“safari”。 js:4894jQuery.event.add.elemData.handle@jquery-compat-git.js:4551 67jquery-ui.js:656

未捕获的类型错误:无法读取未定义的属性“msie”

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

  • 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

它按预期工作。

【讨论】:

  • @Stewartside:完整的工作代码在问题中。只有外部资源的引用发生了变化(使用 jsFiddle UI,而不是使用标签),这就是为什么我没有复制问题中的代码
  • @Stewartside:你是对的。我用更多细节更新了答案
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-03-29
相关资源
最近更新 更多