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

时间:2013-05-09 07:55:06

标签: jquery css

我有一个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>

3 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

尝试了一些尝试,但我得到了它的工作。如前所述,您的可调整大小的类应该是一个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;
}

答案 2 :(得分:0)

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

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