jquery - 无法根据调整 div 的大小来调整 textarea 的大小

Question

我有一个文本区域

<textarea name="quotes" id="resizeable" cols="40" rows="10" ></textarea>

我想从 textaea 下方的 div 调整它的大小。

<div id="grippie" style="margin-right: 0px;cursor: n-resize;">-----------------------------</div>

我尝试了以下脚本，但它没有调整大小。可能是什么原因？请帮我解决这个问题。

 <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <script>
  $(function() {
    $( "#grippie" ).resizable({
      alsoResize: "#resizeable"
    });
    $( "#resizeable" ).resizable();
  });
  </script>

Answer 1

目前还不太清楚您要达到的目标。#grippie在您的示例 HTML 中未引用，并且您的 DIV 有一个类，resizeable当您的 jQuery 引用 ID resizeable时。

您是否希望实现这样的目标？

Answer 2

这需要一些尝试，但我得到了它的工作。正如已经提到的，您的可调整大小的类应该是一个 ID，并且您正在引用不存在的 grippie。此外，您还需要引用 jQuery UI 样式表或以其他方式设置调用 resizable 时自动添加的“句柄”的样式。请注意，他们还为您添加了适当的光标，因此您不必自己设置样式。

我在 jsFiddle 上创建了一个工作示例：http: //jsfiddle.net/aRSs3/1/。

这是代码：

标记：

<div id="resizeable">Test</div>
<div id="grippie">Drag me</div>

脚本：

$(document).ready(function () {

    $("#grippie").resizable({
        alsoResize: "#resizeable"
    });

    $('#resizeable').resizable();

});

CSS：

#resizeable {
    background:#EEE;
    width:180px;
    height:20px;
    padding:5px;
}
#grippie {
    background:#CCC;
    width:180px;
    height:20px;
    padding:5px;
}

Answer 3

试试这个，http://jsfiddle.net/steelywing/vqQQw/2/

$('#resizable').resizable({
    handles: {
        s: $('.ui-resizable-s')
    },
    alsoResize: $('textarea')
});