JQuery UI中的自定义可调整大小的句柄 [英] Custom Resizable Handles in JQuery UI

问题描述

我一直在试图创建一个可调整大小的文本框（ASP.NET多行 TextBox / HTML textarea ）和使用JQuery UI使其可调整大小，但似乎遇到了涉及自定义拖动控制柄的一些问题。

关于 Resizable 方法（具体说就是 句柄 选项）表明我可以设置任何句柄来使用自定义HTML元素。我设法使用默认的可调整大小的手柄来使可调整大小的文本框工作得很好，但试图设置自定义的文本框（即，我在标记中定义的HTML元素）会产生以下问题：可调整大小的容器留下正确的空间用于底部的 div 句柄（对于南手柄），然后留空并显示可调整大小的容器下面（使用Firebug进行验证）下方的元素。

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

 < asp：TextBox runat =serverID =codeTextBoxTextMode =MultiLineWrap =falseRows =15> 
< / asp：TextBox> 
< div class =resizable-sstyle =width：100％; height：22px; background：red;> 
< / div> 
 
< script type =text / javascript> 
 $ b $（function（）{
 var codeTextBox = $（＃<％= codeTextBox.ClientID％>）; 
 
 codeTextBox.resizable（ {
句柄：{s：$（。resizable-s）}，
 minHeight：80，
 maxHeight：400 
}）; 
}）; 
 
< / script> 
  

当然，我无法创建可调整大小的句柄div（class resizable -s ） TextBox / textarea 的子元素，但这不应该是问题根据JQuery文档。

从我所做的搜索判断，我不是唯一有这个问题的人。 （不幸的是，JQuery文档没有给出一个使用自定义可调整大小的句柄的例子，所以我们都不确定是否正确的代码。）如果任何人都可以建议修复这个问题，或确实确认它是一个JQuery错误，这将是非常赞赏。

解决方案

从一点挖掘我做了jquery-ui代码，我想我可以确认可调整大小的元素外部的自定义句柄不起作用。

问题在于鼠标事件是针对可调整大小的元素（或textarea情况下的包装元素）初始化的。如果句柄不是处理鼠标事件的地方，它不会触发句柄上的mousedown事件，因此不会拖动它。

作为概念验证我在jquery-ui中进行了一些修补，直到我得到了某种工作。没有关于代码的保证，但它应该指出需要发生什么样的更改才能使其工作。

在ui.resizable.js中的第140行左右，我更改了：

pre $ this._handles = $（'。ui-resizable-handle'，this.element）
.disableSelection （）;


至

  this._handles = $（'。ui-resizable-handle'）
 .disableSelection（）; 
  

然后，我添加了下面的代码（从ui.core.js的mouseInit的一部分，可能应该使用整个函数）在ui.resizable.js（大约180行）之后调用mouseInit来调整大小的元素：

。
//初始化鼠标交互
this._mouseInit（）;

//为手柄添加鼠标事件 - ylebre
（this.handles中的i）{
$（this.handles [i]）。bind（' mousedown.resizable'，函数（event）{
return self._mouseDown（event）;
}）;


$

这允许我创建一个不是可调整大小的子元素的调整大小的句柄元件。我的句柄是id为'south'的div，并附加到可调整大小的元素。这里是HTML snippit：

 < textarea id =resizableclass =ui-widget-content> 
< h3 class =ui-widget-header>可调整大小< / h3> 
< / textarea> 
< div id =southclass =ui-resizable-handle> south< / div> 
  

以及javascript代码：

<$ p $可调整大小（
{handles：{s：document.getElementById（south）}}
）; $ {code> $（＃resize

希望这有助于您！

I've been attempting to create a resizable textbox (ASP.NET multiline TextBox / HTML textarea) and use JQuery UI to make it resizable, but seem to be running into a few issues involving custom drag handles.

The JQuery documentation on the Resizable method (specifically that on the handles option) suggests that I can set any of the handles to use a custom HTML element. I have managed to get the resizable textbox working perfectly well using the default resizable handles, but trying to set custom ones (i.e. an HTML element that I have defined in markup) creates the following issue: the resizable container leaves the correct amount of space for the div handle at the bottom (for the South handle), yet leaves the space empty and shows the element below (outside of) the resizable container (verified using Firebug).

Here is my markup (ASP.NET/XHTML) and JavaScript code:

<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>

Of course, I can't make the resizable handle div (class resizable-s) a child of the TextBox/textarea, but this should not be a problem according to the JQuery docs.

Judging by the searching I've done, I'm not the only person who's had this problem. (Unfortunately, the JQuery docs fail to give an example of using custom resizable handles, so we're all left unsure of precisely the right code.) If anyone could suggest a fix to this, or indeed confirmation that it is a JQuery bug, that would be very much appreciated.

解决方案

From a bit of digging I did in the jquery-ui code, I think I can confirm that a custom handle outside the resizable element doesn't work.

The problem is that the mouse events are initialized for the resizable element (or a wrapper element in the case of textarea). If the handle is not a child of where the mouse events are handled, it won't trigger the mousedown event on the handle, thus not making it draggable.

As a proof of concept I patched around a bit in jquery-ui until I got things to (sort of) work. No guarantees about the code, but it should point out what kind of changes would need to happen to make it work.

Around line 140 in ui.resizable.js I changed:

this._handles = $('.ui-resizable-handle', this.element)
    .disableSelection();

to

this._handles = $('.ui-resizable-handle')
    .disableSelection();

Then I added the following code (part of mouseInit from ui.core.js, probably should use the whole function) in ui.resizable.js (around line 180) after the mouseInit is called for the resizable element:

   ...
   //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);
      });
   }

This allows me to make a resize handle that is not a child of the resizable element. My handle is a div with id 'south' and is attached to the resizable element. Here is the 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>

And the javascript code:

    $("#resizable").resizable(
        {handles: {s: document.getElementById("south")}}
    );

Hope this helps!

这篇关于JQuery UI中的自定义可调整大小的句柄的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！