代码之家 › 专栏 › 技术社区 › Noldorin

JQuery UI中的自定义可调整大小的句柄

resizable user-interface jquery-ui html jquery

Noldorin · 技术社区 · 16 年前

TextBox /HTML textarea )并使用jQueryUI使其可调整大小,但似乎遇到了一些涉及自定义拖动手柄的问题。

上的JQuery文档 Resizable 方法(特别是 handles div

以下是我的标记(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>

resizable-s 文本框

从我所做的调查来看,我不是唯一一个有这个问题的人。(不幸的是,JQuery文档没有给出一个使用自定义可调整大小句柄的示例,因此我们都不确定正确的代码。)如果有人能建议对此进行修复,或者确实确认这是JQuery错误,我们将不胜感激。

5 回复 | 直到 16 年前

ylebre 16 年前

通过我在jQueryUI代码中所做的一点挖掘,我想我可以确认在Resizeable元素之外的自定义句柄不起作用。

问题在于,鼠标事件是为可调整大小的元素(或textarea中的包装器元素)初始化的。如果句柄不是处理鼠标事件的位置的子级,它将不会触发句柄上的mousedown事件,因此无法将其拖动。

在ui.resizable.js的第140行附近,我更改了:

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

到

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

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

这允许我创建一个不是可调整大小元素的子元素的调整大小句柄。我的句柄是一个id为“south”的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>

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

希望这有帮助!

Roman Nurik 16 年前

是的,对我来说像个虫子。以下是一个完整的示例,供在本地尝试的用户使用:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="http://jqueryui.com/latest/themes/base/ui.all.css" type="text/css"/>
  <script src="http://jquery-ui.googlecode.com/svn/tags/latest/jquery-1.3.2.js" type="text/javascript"></script>
  <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/ui.core.js" type="text/javascript"></script>
  <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/ui.resizable.js" type="text/javascript"></script>
  <style type="text/css">
    #resizable { width: 100px; height: 100px; background: silver; }
    #southgrip { width: 100px; height: 10px; background-color: blue; }
  </style>
  <script type="text/javascript">
    $(function() {
      $('#resizable').resizable({
        handles: { 's': $('#southgrip') },
        minHeight: 80,
        maxHeight: 400
      });
    });
  </script>
</head>
<body>

<div id="resizable"></div>
<div id="southgrip"></div>

</body>
</html>

This jQuery UI bug 也许有关联。

我尝试过的其他事情:

ui-resizable-s 和/或 ui-resizable-handle CSS类到 #southgrip #南夹 在里面 #resizable
使用 { 's': $('#southgrip').get(0) } 对于 handles

ccsakuweb 12 年前

4年后我也有同样的问题。他们好像从来没修过。我想使用这个界面,但自2007年以来它并没有任何更新。所以我决定自己修复这个bug,并在Github的jQueryUI项目中进行请求拉取。 https://github.com/jquery/jquery-ui/pull/1134 我希望他们接受它并尽快合并。我添加了一个测试,所以我确信它在任何情况下都能工作,因为所有来自jQueryUI的Resizeable测试都可以使用这个修改。

我开始使用ylebre代码,但它不起作用。所以我做了一些小的改变。

Kareem 11 年前

经过数小时的努力,终于找到了一个非常有效的解决方案,克服了这个恼人的错误。简单地说,将句柄元素附加到ui类中。下面的功能已经过测试,可与South和West手柄配合使用。希望有帮助!

function resizables(element, handle, type){

 var height = handle.height();
 var place = type =="s"? "bottom":"top";
 var css = {};
        css["height"] = height+"px";
        css[place] = -height+"px";


 element.resizable({handles: type});
 var jqclass = element.find(".ui-resizable-"+type);

        handle.css({"cursor": type+"-resize"});
        jqclass.append(handle); 
        jqclass.css(css);
}

resizables($("#draggable"), $("#handle"), 's');

zoomtronic 5 年前

2020年,, 这个简单的解决方案有效。。

$('.your-class').each(function (index) {
        $(this).resizable({
            handles: { e: $(this).find('.child-div .handle-resize-class') },

-1

David Alcalá Álvarez 10 年前

我有一个类似的问题,但我需要将Hadler动态设置为多个元素:

            $.each($(".imagecontainer"),function() {
                $(this).resizable({
                    handles: {se: $(this).closest(".spaciator").find(".ui-resizable-se")}
                });
            };