Question

我有一个textarea

<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

你想要实现的目标并不太清楚。您的示例HTML中未引用#grippie，当您的jQuery引用 ID resizeable时，您的DIV的类为resizeable

您是否希望实现某些目标like this？

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')
});

无法根据调整div的大小调整textarea的大小

3 个答案: