Resizable方法上的JQuery文档(特别是handles选项)表明我可以设置任何句柄来使用自定义的HTML元素。我设法使用默认的可调整大小的句柄来获得可调整大小的文本框，但是尝试设置自定义的句柄(即我在标记中定义的HTML元素)会产生以下问题：可调整大小的容器留下正确的空间底部处的div句柄(用于南方句柄)，但是将空格留空，并显示可调整大小的容器下面的元素(使用Firebug验证)。

这是我的标记(ASP.NET/XHTML)和JavaScript代码：

<asp:TextBox runat="server" ID="codeTextBox" TextMode="MultiLine" Wrap="false" Rows="15">
</asp:TextBox>
<div class="resizable-s" style="width: 100%; height: 22px; background: red;">
</div>

<script type="text/javascript">

    $(function() {
        var codeTextBox = $("#<%= codeTextBox.ClientID %>");

        codeTextBox.resizable({
            handles: { s : $(".resizable-s") },minHeight: 80,maxHeight: 400
        });
    });

</script>@H_301_7@ 
 
当然，我无法使可调整大小的句柄div(class resizable-s)是TextBox / textarea的一个小孩，但根据JQuery文档，这不应该是一个问题。
 
 
根据我所做的搜索，我不是唯一有这个问题的人。 (不幸的是，JQuery文档不能给出一个使用自定义可调整大小的句柄的例子，所以我们都不能确切地确定正确的代码。)如果有人可以建议修复这个，或者确认它是一个JQuery错误，这将非常感激。
@H_301_12@
解决方法

 从我在jquery-ui代码中进行的挖掘，我想我可以确认在可调整大小的元素之外的自定义句柄不起作用。 
  
 
问题是鼠标事件被初始化为可调整大小的元素(或在textarea的情况下是包装元素)。如果句柄不是处理鼠标事件的小孩，则它不会在句柄上触发mousedown事件，因此不会使其拖动。
 
 
作为一个概念证明，我在jquery-ui中修补了一些，直到我得到了一些工作。对代码没有保证，但它应该指出需要进行什么样的更改才能使其运行。
 
 
在ui.resizable.js中的第140行，我改变了：
 
  
 
this._handles = $('.ui-resizable-handle',this.element)
    .disableSelection();@H_301_7@ 
 
至
 
  
 
this._handles = $('.ui-resizable-handle')
    .disableSelection();@H_301_7@ 
 
然后，在调用可调整大小的元素的mouseInit之后，我添加了以下代码(ui.core.js中的一部分mouseInit，大概应该使用整个函数)在ui.resizable.js(第180行)中)
 
  
 
...
   //Initialize the mouse interaction
   this._mouseInit();

   // Add mouse events for the handles as well - ylebre
   for (i in this.handles) {
      $(this.handles[i]).bind('mousedown.resizable',function(event) {
        return self._mouseDown(event);
      });
   }@H_301_7@ 
 
这允许我做一个不可调整大小的元素的调整大小的句柄。我的句柄是一个id为“南”的div，并附加到可调整大小的元素上。这是HTML snippit：
 
  
 
<textarea id="resizable" class="ui-widget-content">
    <h3 class="ui-widget-header">Resizable</h3>
</textarea>
<div id="south" class="ui-resizable-handle">south</div>@H_301_7@ 
 
和JavaScript代码：
 
  
 
$("#resizable").resizable(
        {handles: {s: document.getElementById("south")}}
    );@H_301_7@ 
 
希望这可以帮助！
@H_301_12@
        @H_301_12@
      

      
                 

        
上一篇：jquery – 读取文本文件？下一篇：使用jQuery获取#anchor的URL？